Modifikasi Thread Comment Dengan CSS

Selamat sore sobat Kolom Tutorial™, gimana masih pada semangat kan.....???
Harus semangat terus tentunya sob, setelah sebelumnya kita membahas tentang Modifikasi Label Blog Dengan CSS3  selanjutnya kita akan membahas tentang Bagaimana Cara Memodifikasi Thread Comment Dengan CSS, Seperti pada ngambar dibawah ini gan :
Untuk DEMO sobat  bisa perhatikan di thread Comment Blog Kolom Tutorial™. dan untuk langkah-langkah pembuatannya sebagai berikut :

1. Seperti biasa Login ke akun Blogger Sobat
2. Klik "Template"
3. Klik "Edit HTML"
4. Klik ""
5. Kemudian Cari kode ]]></b:skin> Gunakan Ctrl + F untuk mempercepat penbcarian, jika sudah ketemu letakan kode "CSS" Dibawah ini Tepat Diatas Kode ]]></b:skin>
 #comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#2630E3}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #2630E3;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#2630E3}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://1.bp.blogspot.com/-pH7X7_Ylkdk/URinVSctSBI/AAAAAAAABLM/6WQR2fTOPGU/s1600/author-Biru.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%} 

6. Klik "Save Template"

Note :
Untuk mengganti Background Image http://1.bp.blogspot.com/-pH7X7_Ylkdk/URinVSctSBI/AAAAAAAABLM/6WQR2fTOPGU/s1600/author-Biru.png silakan sesuaikan dengan Url Gambar dibawah :
http://1.bp.blogspot.com/-pH7X7_Ylkdk/URinVSctSBI/AAAAAAAABLM/6WQR2fTOPGU/s1600/author-Biru.png

http://1.bp.blogspot.com/-W7tn6ewfb9Q/URinVnaAY8I/AAAAAAAABLQ/PTXgZf0y6kw/s1600/author-Black.png

http://4.bp.blogspot.com/-6QFx8vsnJks/URinXN1cduI/AAAAAAAABLc/5B2-BDfndfU/s1600/author-Hijau%20Muda.png

http://2.bp.blogspot.com/-TIBv4pwS6mE/URinXoFdiFI/AAAAAAAABLo/vybtYGSVQRA/s1600/author-Merah.png

http://3.bp.blogspot.com/-FtcL6Xe5eFc/URinXsUErJI/AAAAAAAABLk/0ViZGEEmits/s1600/author-Ungu.png


http://4.bp.blogspot.com/-OJc1I_S_zvg/URinYHTJpHI/AAAAAAAABLw/2fO6AGvIBno/s1600/author-pink.png

Dan Untuk mengganti Warna Comment Dan Nama Penulis Silakan diganti kode #2630E3 Sesuai Selere sobat Untuk kode Warna silakan Klik "DISINI"

Selesai and happy blogging........................


Berlangganan update artikel terbaru via email:

17 Responses to "Modifikasi Thread Comment Dengan CSS"

  1. Tutorial menarik neh sahabat .. aku coba dah hehe ..makasih ya

    ReplyDelete
  2. kemarin saya pengen coba biki sendiri, tapi gagal trus gan, eh saya liat disni ada turialnya,

    oh iya gan kalau itu tulisan author mw bikin sendiri gimana caranya yah?

    ReplyDelete
    Replies
    1. Mas @Reki, Terimaksih untuk kunjungannya,
      untuk mengganti tulisan autornya, berarti mas reki harus edit gambarnya dulu,
      silakan mas ambil gambarnya kemudian mas edit pake Potoshop terus di upload dan masukan link gambar yang udah di edit tersebut.

      Delete
    2. hm, gitu yah sob, terima kasih atas penjelasannya sob, sukses selalu.

      Delete
  3. keren sob, patut untuk dicoba dah

    ReplyDelete
  4. Nice for sharing sobat...
    thanks ya udah share nfonya Insya Allah bermanfaat
    apa lagi buat pemula spt ane nie yg baru kenal dunia blogging...wajib dicoba nie... :)

    ReplyDelete
    Replies
    1. makasih juga gan atas kunjungannya, jangan gitu ah, apalagi ane gan di dunia blogger baru anak kemarin sore.

      Delete
  5. .: TQ tutorialnya kawan, kebetulan thread komen saya sedikit error gara2 modifikasi template...^_^

    ReplyDelete
  6. saya request donk, itu kan modifikasi author, khusus untuk para komentator bisa nggak di buat seperti itu tapi gambarnya bertuliskan komentator (khusus para komentator)

    ReplyDelete
    Replies
    1. Bisa Mas, silakan dimodifikasi aja url image nya, mungkin dengan potoshop.

      Delete
    2. gimana cara settingnya mas, untuk komentar ada tulisannya ada tulisannya visitor, kana authornya bales kan ada itu ada gambar Author

      Delete
  7. template saya coba pake ini gak bisa.

    ReplyDelete
    Replies
    1. mungkin perlu di delete dulu css comment yang lama, tapi kalau mau lakukan itu sebaiknya template mis backup dulu takutnya gagal.

      Delete
  8. tutorial ini sudah sy terapin di blog saya mas. terimakasih yah? eheheh

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel