Tahu kan Threaded Comments? Itu lho, rangkaian komentar yang bisa dibalas. Nah, mengenai "makhluk" ini entah bermula dari siapa, soalnya begitu banyak blogger yang sudah memuat tulisan ini dengan cara copy paste tanpa menyebutkan sumbernya (hehehe...). Akibatnya, kesalahan penyebutan banyaknya kode yang harus diganti pun sama (padahal cuma satu, hehehe...).
Sebenarnya jika sobat rajin gonta-ganti template, banyak template sekarang yang sudah menambahkan kode HTML untuk Threaded Comments, seperti template WP Zine. Kalau Threaded Comments-nya tidak berfungsi, hal itu dikarenakan setelan komentarnya tidak disetel ke bentuk tersemat, karena Threaded Comments ini hanya bisa berfungsi apabila setelan komentar dibuat tersemat di bawah entry.
Jadi jika mau menambahkan Threaded Comments ini, terlebih dahulu harus mengubah setelan komentar menjadi tersemat. Selanjutnya, seperti biasa:
- Dari halaman Dasbor, pilih Template - Edit HTML (untuk amannya, lakukan duplikasi template terlebih dahulu).
- Beri tanda centrang pada Expand Template Widget.
- Kemuadian cari kode :
<b:include data='post' name='comments'/>
- yang terletak antara kode-kode berikut:
<b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </b:if> - Selanjutnya ganti kode yang berwarna merah dengan kode ini:
<!--Threaded Komentar--> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> <!--/Threaded Komentar--> - Setelah itu save, jika hanya ingin membuat Threaded Comments saja. Namun akan tanpak kurang menarik, kira-kira hasilnya akan seperti ini (tergantung template yang digunakan):
- Ubah CSS #comments h4 dengan ini (tidak penting):
#comments h4 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDsOZi0W3KyZf9lkqqd8L1s7qp-gcEXkeY2xLcwsdiO4YQKEloPfCYZ490uzivOUiMDwP2P0Yye23QO7vNed1uZTtD-zrWmkrFQrdA-bWspmJfuOw0_1EirSguJguJQg-D1k1suijkI4Y/s1600/commentposts.png) no-repeat; padding-left:37px; margin:0; font-size:14px; font-weight:bold; line-height:32px; text-align:justify; } - Setelah itu tambahkan CSS berikut (penting!):
/*=== Threaded Comments ===*/ .comments .comments-content .icon.blog-author { background-image: url(http://siteexpansion.com/img/smilies/21.gif);/*icon untuk admin*/ background-repeat: no-repeat; width:38px; height:20px; } .comments .comments-content .loadmore a { border-top: 1px solid silver; border-bottom: 1px solid silver; } .comments .comment .comment-actions a { padding-right: 5px; padding-top: 2px; } .comments .continue { margin-top:2px; border-top: 2px solid silver; } .comments .comments-content .datetime a{ float: right; font-size:10px; } #comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child { background:#FAFAFA url(url comment) top repeat-x; margin:5px auto 0; padding:5px 5px; border:1px solid silver; } .comment-actions a { padding:2px 5px; margin-right:10px; 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; font: 11px sans-serif; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; background: #EDEDED; background: linear-gradient( center top, white 20%, #E5E5E5 100% ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); background: -webkit-linear-gradient( center top, white 20%, #E5E5E5 100% ); background: -o-linear-gradient( center top, white 20%, #E5E5E5 100% ); background: -ms-linear-gradient( center top, white 20%, #E5E5E5 100% ); } .comment-actions a:hover { text-decoration: none !important; background: #CCC; background: linear-gradient(center top,#EEE 20%,#CCC 100%); background: -moz-linear-gradient(center top,#EEE 20%,#CCC 100%); background: -webkit-linear-gradient(center top,#EEE 20%,#CCC 100%); background: -o-linear-gradient(center top,#EEE 20%,#CCC 100%); background: -ms-linear-gradient(center top,#EEE 20%,#CCC 100%); } .comments .avatar-image-container { margin-left:0px; }Catatan:- Boleh ditempatkan dimana saja asal di atas kode ]]<>/b:skin>.
- Untuk mudahnya, tambahkan saja setelah atribut CSS untuk #comments h4 tadi atau di bawah CSS untuk komentar.
- Selanjutnya jika ingin tampilan avatar container-nya menarik, tambahkan CSS berikut di bawah CSS tadi (lumayan penting):
/*=== BOX Avatar dan Blank Avatar ===*/ .avatar-image-container { box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC; -webkit-box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC; } .avatar-image-container img { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBeQE_USFaai-xwZSteGyM6cEz16hjfPY_T-6bnD6KLdBpF5kQ4pbpSLiJHFx1wV5ypM6RGgk3hqGeH0avV5Ytc63NOE_li9-B8rb2AIjw8MoBlJjcZjdU_a6pTbu1FCxPhZMmPL4ivm8/s1600/blog-anonim.png); width:35px; height:35px; border:none; } .avatar-image-container img:hover { transform:scale(1.2) rotate(360deg); -ms-transform:scale(1.2) rotate(360deg); -o-transform:scale(1.2) rotate(360deg); -moz-transform:scale(1.2) rotate(360deg); -webkit-transform:scale(1.2) rotate(360deg); transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; -webkit-transition:0.5s; } - Save hasilnya lalu ucapkan Alhamdulillah...
Silahkan test sendiri Threaded Comments-nya. Menarik kan?
Ok, segitu aja sob. Semoga bermanfaat .....
12 komentarPosting Komentar
Kang masih ingat waktu membantu saya memperbaiki template 3 tahun yang lalu he he saya masih seperti yang dulu tetap tidak tahu mengoprek template jadi begitu deh make template bawaan blogger saja xi xi
Apa kabar Om, semoga selalu sehat ya. Selamat beraktifitas aja, moga hari ini berjalan dengan lancar.
alhamdulillah
baru sampai Threaded Comments aja eunk
makasih sobat
@Munir ArdikuPadahal template-nya udah ada Threaded Commentnya, sayang kalo gak ditambahin CSS buat mendukung penampilan Threaded Comment, bang
@AdiniAlhamdulillah baik mbak...
@Reca EARSami-sami. Sayang kalo gak ditambahin CSS-nya tuh, jadi gak tampil cantik, frend
Baus sekali tutorialnya kang.
ngomong2 cara menyembunyikan form comment seperti gimana ya?,
jika g keberatan tlg kirim link atau kode-nya ke email saya ya : admin(at)rumahexcel(dot)com
@Anto RamanaCari saja kode seperti ini:
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
Kode HTML untuk kotak formulir komentar
</div>
</b:includable>
Lalu buatkan toggle spoiler atau pake toggle jQuery
Untuk lebih jelasnya, nanti deh dibuatkan tutorialnya
Salam jumpa lagi kang lama gak ngeblog nih.
dulu blog saya http://mptrhreelyrics.blogspot.com dan link blog saya juga masih ada di blognya kang enes, skr saya fokus di http://bl1t4r.blogspot.com
Salam Blogger Blitar
mw tanya bro enes, kenapa ya.
pas saya ikutin tutor diatas, kok tampilan post nya sama sekali gak berubah?.
mohon pencerahannya..
thanks before.
Siiip... akhirnya sukses juga pake threaded comment. Nuhun ah lur...
Mantaf...
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.