Cara Membuat Fitur Reply Thread Comment Keren

Cara Membuat Fitur Reply Thread Comment KerenSetelah kamu membaca postingan Kamu Klik sebelumnya, yakni Cara Mudah Mengaktifkan Fitur Thread Comments Blogspot semoga saja kamu sudah berhasil mengaktifkan fitur thread comment diblog kamu. Akan tetapi tampilannya masih sangat sederhana dan simple. Naah.. Untuk mempercantik atau memperindah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Agar hasilnya jadi seperti gambar dibawah ini:

Cara Membuat Fitur Reply Thread Comment Keren

Sponsored Ad

Lalu bagaimana caranya biar tampilan Thread Comment’y gak monoton, agar tampilannya berubah seperti gambar diatas ? Keren bukan ? yuk, Silakan ikuti langkah-langkah dibawah ini:

  • Pertama login ke blog kamu > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
  • Cari kode CSS Comment yang lama, kalau CSS punya Kamu Klik sih seperti dibawah ini.

    #comments h4 {
    color:#666666;
    font-weight:normal;
    letter-spacing:0.2em;
    line-height:1.4em;
    margin:1em 0;
    font-size:14px;
    text-transform:none;
    }
    #comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}#comments-block .comment-author{background:#e0dede;border-top:1px solid #ddd;margin:.5em 0;padding-left:0px;color:#111}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-body{padding-left:0px;color:#333}#comments-block .comment-footer{padding-left:0px;margin:.25em 0 2em;line-height:1.5em;font-size:9px;border-top:1px solid #ddd}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:justify;margin:0 1em .75em;padding-left:5px;border-left:3px solid #f0f0f0}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic; color:gray}.owner-Body{padding-left:0px;color:#333}.owner-Body p{text-align:justify;margin:0 1em .75em;padding-left:5px;background:#f5f5f5;border-left:3px solid #ddd}
    #blog-pager-newer-link {
    float:left;
    }

    Tapi yaa biasanya tiap template berbeda-beda bukan ? Jadi yaa kamu cari sendiri kode CSS komentar kamu versi template blog kamu

  • Kamu hapus semua kode CSS komentar yang lama versi template blog kamu, lalu kamu copy kode dibawah diatas kode ]]> (untuk menemukan kode yang dicari kamu tinggal CTR + F, lalu masukan kode yang ingin dicari.)

    #comments h4{font-size:24px; font-weight:normal; margin:20px 0}
    .cm_wrap {clear:both; margin-bottom:10px; float:right; width:100%;}
    .cm_head{margin:0; width:70px; float:left}
    .cm_avatar{margin:0; vertical-align:middle; border: 1px solid #DDD; padding:3px; background:white; width:35px; height:35px}
    .cm_reply{padding-top:5px}
    .cm_reply a{display:inline-block; margin:0; padding:1px 6px; border:1px solid #C4C4C4; border-top-color:#E4E4E4; border-left-color:#E4E4E4; color:#424242 !important; text-align:center; text-shadow:0 -1px 0 white; text-decoration:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; background:#EDEDED; background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) ); background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% ); font:11px/18px sans-serif}
    .cm_reply a:hover{text-decoration:none !important; ; background:#ccc; ; background:-webkit-gradient(linear,left top,left bottom,color-stop(.2,#eee),color-stop(1,#ccc)); ; background:-moz-linear-gradient(center top,#eee 20%,#ccc 100%); }
    .cm_entry{padding:16px; background:#F7F7F7; border:1px solid #E4E4E4; overflow:hidden}
    .cm_arrow{display:block; width:9px; height:18px; background:url(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) no-repeat; position:absolute; margin-left:-25px}
    .cm_info{margin-bottom:5px}
    .cm_name{font-weight:bold; font-size:12px; float:left}
    .cm_date{font-size:10px; float:right; font-style:italic; color:#CCC}
    .cm_entry p{margin:0; font-size:13px; color:#666}
    .cm_pagenavi{font-size:10px; text-transform:uppercase; color:#666; text-shadow:1px 1px white; font-weight:bold}
    .cm_pagenavi a{color:#666; text-decoration:none; padding:10px}
    .cm_pagenavi a:hover{text-decoration:underline}
    .cm_pagenavi span{color:#888; background:white; padding:4px; border:1px solid #E0E0E0}

  • Setelah itu kamu cari kode , setelah itu pastekan kode dibawah diatas kode 


  • Kemudian kamu cari kode  , Hapus kode antara kode sampai dengan  (kode yang berwarna biruyang harus didelete)

    Contoh :

  • Lalu Paste kode berikut ini diantara kode   sampai dengan  yang sudah dihapus tadi gantikan dengan kode dibawah.

         
         
               

                    
                 
                    1 comment
                 
                    comments
                 

               

               

               

               

               

                   
                       
                       
            
                           

                               

                                   
                                   

                                   

                                       
                                       

                                           

                                               
                                                   
                                                       
                                                   

                                               
                                                   
                                               

                                           

                                           

                                               
                                               
                                           

                                           

                             
                                       

                            
                                       

                                   

                               

                           

                           
            
               

               

           
                   
                       
                   
                       
                   

                   
                   
                       
                   

           

         
         

  • Kalau sudah selesai semua, kamu klik Save, Lalu lihat hasilnya deh ^^

Hmm.. mungkin agak rumit yaa pemirsa.. tapi yaa itulah yang saya ketahui. Selamat mencoba dan semoga berhasil

rating 5
Sponsored Ad

Related Posts