Saturday, June 9, 2012

Membuat Threaded Comment Dengan 3 Tampilan Warna Berbeda

10:53 AM Hzndi 57 comments

Threaded Comment

Sekarang zamannya menggunakan threaded comment  pada blog loh ! tidak lengkap rasanya jika tidak menggunakan gadget  ini pada blog kita. Nah fitur yang saya dapatkan dari spiceupyourblog ini sangat berguna untuk membuat blog kamu lebih stylish dan enak dipandang. Langsung saja yah cara membuatnya bisa kamu lihat di bawah karena saya tahu kalian sudah tahu fungsi dari widget ini :) oh iya, ada 3 Warna berbeda loh yang bisa kamu coba sesuai keinginan kamu !

1. Masuk ke Akun Blogger kamu.

2. Lihat gambar di bawah ini untuk langkah selanjutnya :


3. Langkah ke 3 lihat gambar di bawah ini lagi yah :

 

4. Setelah klik Ubahsuaikan, Kamu pilih Tingkat Lanjut --> Tambahkan CSS seperti Gambar di bawah ini :

 

5. Masukkan Salah satu kode CSS di bawah ini yang kamu inginkan ke dalam kotak CSS.

a. Untuk Threaded Comment Berwarna Biru

Threded Comment

/*Blogger Threaded Comments From http://www.spiceupyourblog.com*/
/* Repost by http://hzndi.blogspot.com*/
#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:#1e05d8}
#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 #1e05d8;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:#1e05d8}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTuP95g8-6mtf5-6JCNS_TO2pkFDbcI8753RJkCf-3eZlBp_c2RltakjNpVhiolvw_6ccZOkJn0GTfH9tMHyopO7HShFkLYV4FdxoKOLjDCsjQOq-tHdKo0_Qdt31beRnZ3Oh37nS_z9U/s320/picresized_1338990142_comment-author-blue.gif);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%}
/* Repost by http://hzndi.blogspot.com*/
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/


b. Untuk Thread Comment Berwarna Pink

Threaded Comment

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
/* Repost by http://hzndi.blogspot.com*/
#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:#d80556}
#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 #d80556;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:#d80556}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqD1_axgqLrHhkDvMRhIISSt22Nx1tu03lq9YYmv2PnNtFzamcEpivztoS0iWSX-PBMo4zQGLGITet9s-ErzMQ9KcDlZHbds814jfxmUf7ipL3LS76B8kiUb2EIhEIkib9yRdeWzWMLc/s320/author-pink.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%}
/* Repost by http://hzndi.blogspot.com*/
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

c. Untuk Threaded Comment  Berwarna Hijau

Threaded Comment 

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
/* Repost by http://hzndi.blogspot.com*/
#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:#56d805}
#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 #56d805;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:#56d805}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWrZMqixqS4O3tePViaqQvWuAo6Cwgx-BRebp7TXl6IsbjV2eTxScT1YT9EtxhHEAXwLJidOT8tTgaHiKsyOiTEQ9UZm6wAXIo5M39mGVXi39ilzGXIR5dB6U8iL4xfebaFAq1jijMezA/s320/picresized_1338989738_comment-author-green.gif);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%}
/* Repost by http://hzndi.blogspot.com*/
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

6. Klik Terapkan ke Blog dan lihat hasilnya :)

Postingan Terkait:

Posted in: ,

57 comments:

  1. Mochammad NasrullohJune 9, 2012 at 12:30 PM

    icikiciw css trick yah bang :)

    ReplyDelete
  2. Oh Gitu..June 9, 2012 at 1:24 PM

    wwooww keren bro.. ane jadi pingin coba.. biar kotak komentar jadi lebih hidup dan berwarna :D

    ReplyDelete
  3. AsalasahJune 9, 2012 at 1:25 PM

    keren keren, tapi sayangnya blog ane susah di modif komentarnyaa.. hehe

    ReplyDelete
    Replies
    1. HzndiJune 9, 2012 at 4:31 PM

      hehe ya gpp gan, kali gitu ini berguna buat yang lain heheh

      Delete
  4. GoparJune 9, 2012 at 1:55 PM

    sip sob.. manteb tuh tutornya

    ReplyDelete
  5. UnknownJune 9, 2012 at 3:06 PM

    keren sob. nice post :)

    ReplyDelete
  6. Staff AdministratorJune 9, 2012 at 4:53 PM

    :Dartikel nya bermanfaat sob...

    ReplyDelete
  7. Cendekiawan ITJune 9, 2012 at 5:32 PM

    wah keren ya jadinya... aseeeekkkk

    ReplyDelete
  8. emmetheJune 9, 2012 at 6:48 PM

    hahahaha! keren habis ,, mantab dah ,,, ane mau coba deh bisa da tya di tmpelate ku ?

    ReplyDelete
  9. Kang BejoJune 9, 2012 at 6:55 PM

    Mau nyobain gan, keren kayanya

    ReplyDelete
  10. arie5758June 9, 2012 at 7:09 PM

    Sepertinya keren jika ada beda warna ya, tapi saya mumet banget jika merubah CSS template. Ngrubah thread komen yg sekrang saja butuh berhari² hingga berhasil. Maklum ga cepat tangkap kalau masalah percodingan hahahaha....

    ReplyDelete
    Replies
    1. HzndiJune 10, 2012 at 6:37 PM

      heheh ane juga gitu gan, di coba dan belajr terus saja :D

      Delete
  11. arie5758June 9, 2012 at 7:10 PM

    Sepertinya keren ya jika komentar dibuat warna yg berbeda :)

    ReplyDelete
  12. Azura ZieJune 9, 2012 at 7:25 PM

    panjang banget ya script nya..

    ReplyDelete
    Replies
    1. HzndiJune 10, 2012 at 6:38 PM

      ini karena ada 3 pilihan, lgian kan tinggal di copas doang sob hehe

      Delete
  13. UnknownJune 9, 2012 at 7:29 PM

    wahhh, manteb nih sobat :))

    ReplyDelete
  14. secangkir teh dan sekerat rotiJune 9, 2012 at 7:43 PM

    widih..
    kalo mau ganti template besok2.. bakalan lebih pusing lagi saya.. T.T

    ReplyDelete
    Replies
    1. HzndiJune 10, 2012 at 6:40 PM

      ini caranya mudah kok gan, ga terlalu ribet banget :)

      Delete
  15. Edot HerjunotJune 9, 2012 at 8:39 PM

    bener banget bang ..
    ane ganti template juga karena yang dulu gak bisa dipake thread coment ..
    lha ini udah jaminan berhasi apa tergantung template juga bang ... hehe

    ReplyDelete
    Replies
    1. HzndiJune 10, 2012 at 6:41 PM

      iyah sih, ane juga pake threaded comment yang biasa aja ga neko2 :P

      Delete
  16. Aldio BlogJune 10, 2012 at 1:12 AM

    wah mantap nih, maasih sob...

    ReplyDelete
  17. AsukaJune 10, 2012 at 1:27 AM

    Bikin blog jadi berat gak sob.

    ReplyDelete
  18. UnknownJune 10, 2012 at 5:34 AM

    pengen banget sob pasang komentar treded di blog saya, tapi sudah banyak cara saya coba tapi hasilnya gak bisa bisa juga sobat....

    ReplyDelete
  19. RopinkJune 10, 2012 at 8:29 AM

    mantab Gan, menarik banget

    ReplyDelete
  20. DamarJune 10, 2012 at 9:38 AM

    Tipsnya bagus sekali Kang, serasa koment di WP karena berjenjang.
    Hanya saja saya berkali-kali ganti model komentar, sampai disqus segala, pada akhirnya pasrah nurut bawaannya blogger.

    ReplyDelete
    Replies
    1. HzndiJune 10, 2012 at 6:46 PM

      kaykanya kalau pake disqus mah bikin berat dah (pengalaman ane) ,mending bawaan dari blogger aja gan :)

      Delete
  21. Blog KeperawatanJune 10, 2012 at 12:20 PM

    Tampilannya kotak komentar akan bisa lebih bagus lagi sahabat dengan sentuhan CSS nih

    ReplyDelete
    Replies
    1. HzndiJune 10, 2012 at 6:47 PM

      iyah gan, tapi ya jangan terlalu banyak CSS ntar blog jadi berat hehe

      Delete
  22. Icah BanjarmasinJune 10, 2012 at 12:58 PM

    Absen dulu ah tempat bang Hzndi..mantef tutor tuh bang..hahahayyyy

    ReplyDelete
  23. AnonymousJune 10, 2012 at 1:32 PM

    Mantap gan.... :)

    ReplyDelete
  24. CoretankuJune 10, 2012 at 2:21 PM

    Keren sob. Izin menyimak :)

    ReplyDelete
  25. KONTES BLOG TERBARUJune 10, 2012 at 3:02 PM

    tHANKS BEROOW... nICE

    ReplyDelete
  26. ichwan POINGAME.COMJune 10, 2012 at 6:37 PM

    wah keren ni sob

    ReplyDelete
  27. AnonymousJune 13, 2012 at 11:53 AM

    gan, harus dipasang salah satu ya? g bisa dipasang sekali tiga? hehe,,,

    ReplyDelete
  28. NyakOctober 10, 2012 at 2:09 PM

    Makasih sobat sharenya.../
    Threaded yang satu ini emang rapi tampilannya..
    izin modif dikit di blog ane yaah... :)

    ReplyDelete
  29. UnknownDecember 4, 2013 at 5:40 PM

    di blog ane kok nggk ada efeknya gan ? masih sama ?

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More