Efek Thread Comment Bertingkat Hanya dengan CSS
Anda pernah tertarik untuk memasang fitur/sistem thread comment bertingkat dengan hack komentar Blogger dari beberapa blog yang Saya temukan? Jika Anda sekedar tertarik dengan efek bertingkatnya saja, sebenarnya efek itu bisa diciptakan hanya dengan CSS3. Blogger memiliki tingkatan komentar balasan satu tingkat, namun setidaknya mereka memiliki induk komentar yang bisa kita jadikan sebagai batas akhir perhentian efek.
Cukup salin kode ini dan letakkan di atas kode ]]></b:skin>
atau </style>
:
/*!
* Efek thread-comment bertingkat hanya dengan CSS
* Level tingkatan dibuat dengan cara menentukan `margin-left` dengan nilai yang berbeda
*/
.comments .thread-toggle {margin-bottom:10px}
.comments .comment-thread.inline-thread .comment .comment-block {margin-left:52px}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 30%; /* Level 6+ */
background-color:#222;
border:1px solid #333;
padding:10px 15px;
color:#ccc;
}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin-left:25%} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin-left:20%} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin-left:15%} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin-left:10%} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin-left:5%} /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin-left:0%} /* Level 1 */
Klik Simpan Template. Warna latar, huruf dan border bisa dimodifikasi sesuka hati.
19 Comments:
keren2 aku gak bisa ngomong apa selain keren :)
@system of blog Sama aku juga cuma bisa kasi 4 :-bd :-bd :-bd :-bd yang aku punya itu pun udah + jempol kaki..
@Suwardi Unggit kalo saya kasi 6 :-bd pinjem jempol teman.. hehehe
makasih mas tovic, segera diterapkan
mantep... dah gan ane coba...
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼████████┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░███░░░░░██░┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░██░░░░░░░░█░┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░██░░░░░░░░░█░┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼██░░░░░░░░░██┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░█░░░░░░░░░██┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼██░░░░░░░░██░┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░█░░░░░░░░██░┼┼┼┼
┼┼┼┼┼┼┼┼┼░█████░░░┼┼┼┼┼░█░░░░░░░░█░┼┼┼┼┼
┼┼┼┼┼┼┼░█████████████░┼██░░░░░░░█░┼┼┼┼┼┼
┼┼┼┼┼┼░██░░░░░░██░░█████░░░░░░░██┼┼┼┼┼┼┼
┼┼┼┼┼┼██░░░░░░░░░█░░░░░██░░░░░░██┼┼┼┼┼┼┼
┼┼┼┼░███░░░░░░░░░░█░░░░░░░░░░░░██┼┼┼┼┼┼┼
┼┼┼░██░░█░░░░░░░░░░█░░░█░░░░░░░░█░┼┼┼┼┼┼
┼┼░██░░░██░░░░░░░░░██░██░░░░░░░░░█░┼┼┼┼┼
┼┼░██░░░███░░░░░░░░░█░░░██░░░░░░░██┼┼┼┼┼
┼┼┼░█░░░░░░██░░░░░░░░░░░░█░░░░░░░░█┼┼┼┼┼
┼┼░███░░░░░░██░░░░░░░░░░░██░░░░░░░██░┼┼┼
┼░██░██░░░░░░███░██░░░░░██░░░░░░░░████░┼
┼██░░░██░░░░░░░░█████████░░░░░░░░░█░░██┼
┼██░░░░██░░░░░░░░░░░░░░██░░░░░░░░██░░░█┼
┼┼█░░░░░███░░░░░░░░░░░░█░█░░░░░░██░░░░█┼
┼░██░░░░░░███████░░░░███░░██░░░██░░░░██┼
┼████░░░░░░░░█████████░░░░░░█░░░░░░░░█░┼
┼██░██░░░░░░░░░░░░░░░█░░░░░░░░░░░░░░██┼┼
┼┼██░░███░░░░█░░░░░░██░░░░░░░░░░░░░██░┼┼
┼┼░██░░███████░█████░░░░░░██░░░░░░██░┼┼┼
┼┼┼┼███░░░░█░░█░██░░░░░████░░░░░███░┼┼┼┼
┼┼┼┼┼░███████████████████████████░┼┼┼┼┼┼
┼┼┼┼┼┼┼┼░░░░░░░░░░░░░░░░░░░░░░░░┼┼┼┼┼┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼
┼┼┼┼██┼██████████████████████┼┼┼┼█████┼┼
┼┼┼┼██┼█┼┼┼┼┼█┼┼┼┼┼┼┼┼█████████████┼██┼┼
┼┼┼┼██┼█┼┼█┼┼█┼┼█┼┼██┼█┼┼┼┼┼█┼┼█┼┼█┼██┼┼
┼█████┼█┼┼████┼┼█┼┼██┼█┼┼█┼┼█┼███┼█┼███┼
┼█┼┼██┼█┼┼┼┼┼█┼██┼┼█┼┼█┼┼█┼┼█┼┼█┼┼█┼┼┼██
┼█┼┼┼┼┼███████┼██┼┼█┼┼█┼┼┼┼┼████████████
┼██████████████████████┼┼███████████████
om kalau ganti reply comment biar gak window popup gimana..?? yang ada di template saya seperti ini ..
<a expr:href='"https://www.blogger.com/comment.g?blogID=5385811348401427020&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
gantinya pake apa om.. thnx...!!! :\
Sob,bagaimana cara bikin treaded comentar.? Maklum masih Newbie.
mantap gang
di kasi jempol rame-rame.
keren banget kang
mas mas saya kan pakek templatenya bang andre, terus komentarnya saya ganti pakek komentnya mas topik yg ini. nah terus pada saat reply komen bisa, tapi pas pengen reply lagi ga bisa.
jadi reply komennya cman bisa ngereply komen 1 kali, level komen ke dua dan seterusnya ngga berjalan. :(
coba cek di sini http://bangbungg.blogspot.com/2012/08/converter-html.html
Kalau bentuk URL-nya seperti ini, tombolnya bisa bekerja:
../2012/08/converter-html.html
Tapi kalau seperti ini, tombolnya jadi macet:
../2012/08/converter-html.html?showComment=1345878748301#c4355477803293935843
bang... hebat blognya.
Buatin dong comment thread kayak punyaan abang yang tombol reply-nya tanpa pop-up.. :'( :'( :'( :'(
Keren
ko di tempat ku ga bisa ya...
aku mo cb dulu sob sblm kasih jempol
ini baru mantap. mas taufik emang jagoo 10 :bd
Alhamdulillah, berhasil mas. mksh yach \o/
Ane kurang beruntung broo...
lebih simple, apa mungkin mas taufik ahnya menambahkan beberapa kode terhadap kode komentar bawaan blogger ?
Post a Comment
<< Home