Back to Top
Artikel Terbaru
Home » » Cara Memodifikasi Kotak Komentar Keren Abis

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.

Dapatkan Update Artikel Terbaru

Follow Us

Di Posting Oleh : Mas Onqi

Hai Kawan ONshare™, perkenalkan saya Onqi dari Gresik Jawa Timur. Kegiatan saya sehari-hari adalah bekerja dan juga kuliah, untuk kegiatan blogging ini adalah kegiatan untuk mengisi waktu luang saja. dan terima kasih kawan ONshare™ sudi mengunjungi blog saya ini.
Artikel Dilindungi Oleh : DMCA.com

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. lebih rapi dan lebih keren ya mas kelihatannya, jadi kepingin coba nih :)

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

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

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

    ReplyDelete
  7. Berkunjung kesini lagi mas supportnya

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

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

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

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

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

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

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

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

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

    ReplyDelete
  17. Terima kasih untuk infonya Kang :D

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

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

      Delete
  19. Keren nih! Kunbal nya kapan gan?

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

      blog tentang windows dan ubuntu...

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

    blog tentang windows dan ubuntu...

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

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

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

    ReplyDelete
  24. 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
  25. hebat gan.... berhasil dicoba tutorialnya...
    sukses selalu...

    izin blogwalking
    http://miniblogger28.blogspot.com

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

    ReplyDelete
  27. keren sob
    rifalnurkholiq.blogspot.com

    ReplyDelete