Saturday

Cara Memodifikasi Kotak Komentar Keren Abis

Selamat datang di Blog taharonqi.blogspot.com, Hallo sobat-sobat semua lama tidak pernah update artikel di blog saya yang ini, karena kangen update artikel disini kali ini saya akan berbagi sedikit cara tentang bagaimana cara memodifikasi kotak komentar, walaupun kotak komentar bawaan dari blogger sudah bagus sih, tapi gak ada salahnya kan merubahnya agar biar lebih enak dipandang, oke untuk bagaimana hasilnya nanti jika sudah diterapkan berikut gambarnya :


Gimana sobat enak dipandang kan? Jika sobat tertarik langsung ikuti langkah-langkah berikut, bisa mengikuti langkah pertama maupun kedua, pilih salah satu sobat :

(Langkah Pertama)
  • Masuk ke Akun Blogger Sobat
  • Pilih Template
  • Klik Edit HTML
  • Cari ]]></b:skin> (Gunakan Ctrl+F untuk memudahkan)
  • Masukkan kode berikut di atasnya
/* ----------taharonqi.blogspot.com----------*/
.comments {
  padding: 4px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 5px 5px 5px 5px;}
.comments-content .comment-thread {
  padding: 4px;
  background: #000000;
  border: 1px solid #24B200;}
.comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;}
.comments .comments-content .comment:first-child {
  padding-top: 0px;}
.comments .avatar-image-container {
  height: 36px;
  padding-left: 0px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comment-block {
  padding-top: 4px;
  padding-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comments-content .inline-thread {
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comments-content .comment-replies {
  margin-left: 48px;}
.comments .comment .comment-actions a {
  margin-right: 4px;
  padding: 2px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .continue a {
  padding: 2px;
  background: #000000;
  border: 1px solid #24B200;}
.comments .comments-content .datetime {
  float: right;
  margin-right: 4px;}
.comments .comments-content .icon.blog-author {
  float: right;
  margin-right: 3px;}
.comment-form {
  max-width: 100%;
  width: 100%;}

  • Klik pratinjau, kalau tidak ada kesalahan klik simpan dan lihat hasilnya
(Langkah Kedua)

  • Masuk ke Akun Blogger Sobat
  • Pilih Template
  • Klik Edit HTML
  • Cari kode /* Comments----------------------- */ (Gunakan Ctrl+F untuk memudahkan)
  • Masukkan kode berikut di bawahnya
.comments {
  padding: 4px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 5px 5px 5px 5px;}
.comments-content .comment-thread {
  padding: 4px;
  background: #000000;
  border: 1px solid #24B200;}
.comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;}
.comments .comments-content .comment:first-child {
  padding-top: 0px;}
.comments .avatar-image-container {
  height: 36px;
  padding-left: 0px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comment-block {
  padding-top: 4px;
  padding-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comments-content .inline-thread {
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comments-content .comment-replies {
  margin-left: 48px;}
.comments .comment .comment-actions a {
  margin-right: 4px;
  padding: 2px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .continue a {
  padding: 2px;
  background: #000000;
  border: 1px solid #24B200;}
.comments .comments-content .datetime {
  float: right;
  margin-right: 4px;}
.comments .comments-content .icon.blog-author {
  float: right;
  margin-right: 3px;}
.comment-form {
  max-width: 100%;
  width: 100%;}
  • Klik pratinjau, kalau tidak ada kesalahan klik simpan dan lihat hasilnya
Keterangan :
Waktu Mencari Kode kalau tidak ketemu, bisa mencari yang hampir mirip.

Mungkin itu saja yang dapat saya bagi kepada sobat-sobat blogger semua pada kesempatan kali ini, jika ada pertanyaan sobat bisa berkomentar, terima kasih.

37 comments:

  1. Salam mas onqi...lama tak dengar khabar?

    ReplyDelete
  2. asli keren abis,seperti judulnya,hehe
    apalagi diberi sedikit sentuhan shadow pada kodenya,pasti lebih keren, ijin edit kodenya ya mas..

    ReplyDelete
  3. Terlihat lebih rapi ya mas :D

    ReplyDelete
  4. lebih rapi dan lebih keren ya mas kelihatannya, jadi kepingin coba nih :)

    ReplyDelete
  5. Insya Allah tika mau coba nih, kayaknya seru.. Thanks :)

    ReplyDelete
  6. demonya kotak komentar yang ini yia?..beneran keren banget sih, rapih jadi keliatan blog profesional gituh ya.
    dicobain diblog saya yang laen ah.

    ReplyDelete
  7. saya juga pernah mencoba tutor ini mas onqi,
    hasilnya juga lumayan keren

    ReplyDelete
  8. Berkunjung kesini lagi mas supportnya

    ReplyDelete
  9. Super keren modifikasi kotak komentarnya Mas Onqi salut deh
    Saya coba pakai yah Mas. makasih atas tutorialnya *salam

    ReplyDelete
  10. saya udah coba modif kotak komentar di blog saya tapi selalu gk bisa, gk tau deh kenapa tuh, sampai stress sendiri saya sob :(

    ReplyDelete
  11. Kunjungan rutin M as Onqi, simak dan baca lagi cara memodifikasi
    Kotak komentarnya. sangat indah jadinya form comments nya ya Mas

    ReplyDelete
  12. terimakasih omm sudah jadi di blogku ma'lum baru pemula hehehe jangan lupa kunjungi blogku yahhh http://rofizulfikar.blogspot.com/

    ReplyDelete
  13. thanks min, membantu banget ini, update terus
    di tunggu kunjungannya http://rendomblog.blogspot.com/

    ReplyDelete
  14. bikin berat gk tuh ?

    ReplyDelete
  15. saya paling awam memodifikasi template sob, tp boleh deh di coba di blog percobaan.

    ReplyDelete
  16. benar-benar keren abis mas jangan lupa backlink y
    http://sigli-net.blogspot.com/

    ReplyDelete
  17. sip gan tengkyu mampir semuanya ke blog ane www.watermellons.co.vu

    ReplyDelete
  18. keren gan ,kunjungi blog ane juga ya http://newslokerlampung.blogspot.com/

    ReplyDelete
  19. Terima kasih untuk infonya Kang :D

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  21. Keren nih! Kunbal nya kapan gan?

    ReplyDelete
    Replies
    1. gan...ditunggu kunjunga nnya di
      http://windubuntu.blogspot.com/

      blog tentang windows dan ubuntu...

      Delete
  22. gan...ditunggu kunjunga nnya di
    http://windubuntu.blogspot.com/

    blog tentang windows dan ubuntu...

    ReplyDelete
  23. Mantap gan, udah ane coba nih. keren

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Keren nggak abis abis nih namanya... (y)

    ReplyDelete
  26. Keren ci gan, tapi warnanya terlalu mencolok di blog saya . Keliling lagi ah, oh ia buat silaturahmi mampir ke blog saya ============>>>>> http://heru-setianto.blogspot.com/

    ReplyDelete
  27. hebat gan.... berhasil dicoba tutorialnya...
    sukses selalu...

    izin blogwalking
    http://miniblogger28.blogspot.com

    ReplyDelete
  28. saya coba tidak pengaruh......kesalahan dimana?

    ReplyDelete
  29. keren sob
    rifalnurkholiq.blogspot.com

    ReplyDelete