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 Komentar
Unknown
keren2 aku gak bisa ngomong apa selain keren :)
Unknown
@system of blog Sama aku juga cuma bisa kasi 4 :-bd :-bd :-bd :-bd yang aku punya itu pun udah + jempol kaki..
Menuju Yang Terbaik
aku mo cb dulu sob sblm kasih jempol
arimjie blog
@Suwardi Unggit kalo saya kasi 6 :-bd pinjem jempol teman.. hehehe
makasih mas tovic, segera diterapkan
Unknown
mantep... dah gan ane coba...
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼████████┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░███░░░░░██░┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░██░░░░░░░░█░┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░██░░░░░░░░░█░┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼██░░░░░░░░░██┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░█░░░░░░░░░██┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼██░░░░░░░░██░┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼░█░░░░░░░░██░┼┼┼┼
┼┼┼┼┼┼┼┼┼░█████░░░┼┼┼┼┼░█░░░░░░░░█░┼┼┼┼┼
┼┼┼┼┼┼┼░█████████████░┼██░░░░░░░█░┼┼┼┼┼┼
┼┼┼┼┼┼░██░░░░░░██░░█████░░░░░░░██┼┼┼┼┼┼┼
┼┼┼┼┼┼██░░░░░░░░░█░░░░░██░░░░░░██┼┼┼┼┼┼┼
┼┼┼┼░███░░░░░░░░░░█░░░░░░░░░░░░██┼┼┼┼┼┼┼
┼┼┼░██░░█░░░░░░░░░░█░░░█░░░░░░░░█░┼┼┼┼┼┼
┼┼░██░░░██░░░░░░░░░██░██░░░░░░░░░█░┼┼┼┼┼
┼┼░██░░░███░░░░░░░░░█░░░██░░░░░░░██┼┼┼┼┼
┼┼┼░█░░░░░░██░░░░░░░░░░░░█░░░░░░░░█┼┼┼┼┼
┼┼░███░░░░░░██░░░░░░░░░░░██░░░░░░░██░┼┼┼
┼░██░██░░░░░░███░██░░░░░██░░░░░░░░████░┼
┼██░░░██░░░░░░░░█████████░░░░░░░░░█░░██┼
┼██░░░░██░░░░░░░░░░░░░░██░░░░░░░░██░░░█┼
┼┼█░░░░░███░░░░░░░░░░░░█░█░░░░░░██░░░░█┼
┼░██░░░░░░███████░░░░███░░██░░░██░░░░██┼
┼████░░░░░░░░█████████░░░░░░█░░░░░░░░█░┼
┼██░██░░░░░░░░░░░░░░░█░░░░░░░░░░░░░░██┼┼
┼┼██░░███░░░░█░░░░░░██░░░░░░░░░░░░░██░┼┼
┼┼░██░░███████░█████░░░░░░██░░░░░░██░┼┼┼
┼┼┼┼███░░░░█░░█░██░░░░░████░░░░░███░┼┼┼┼
┼┼┼┼┼░███████████████████████████░┼┼┼┼┼┼
┼┼┼┼┼┼┼┼░░░░░░░░░░░░░░░░░░░░░░░░┼┼┼┼┼┼┼┼
┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼
┼┼┼┼██┼██████████████████████┼┼┼┼█████┼┼
┼┼┼┼██┼█┼┼┼┼┼█┼┼┼┼┼┼┼┼█████████████┼██┼┼
┼┼┼┼██┼█┼┼█┼┼█┼┼█┼┼██┼█┼┼┼┼┼█┼┼█┼┼█┼██┼┼
┼█████┼█┼┼████┼┼█┼┼██┼█┼┼█┼┼█┼███┼█┼███┼
┼█┼┼██┼█┼┼┼┼┼█┼██┼┼█┼┼█┼┼█┼┼█┼┼█┼┼█┼┼┼██
┼█┼┼┼┼┼███████┼██┼┼█┼┼█┼┼┼┼┼████████████
┼██████████████████████┼┼███████████████
Unknown
om kalau ganti reply comment biar gak window popup gimana..?? yang ada di template saya seperti ini ..
gantinya pake apa om.. thnx...!!! :\
Agriculture Product
Sob,bagaimana cara bikin treaded comentar.? Maklum masih Newbie.
NUNO
mantap gang
Febbiez
di kasi jempol rame-rame.
Farhan Hamzah
keren banget kang
Anonim
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
Taufik Nurrohman
Kalau bentuk URL-nya seperti ini, tombolnya bisa bekerja:
Tapi kalau seperti ini, tombolnya jadi macet:
Unknown
bang... hebat blognya.
Buatin dong comment thread kayak punyaan abang yang tombol reply-nya tanpa pop-up.. :'( :'( :'( :'(
Ari
Keren
Laboratorium Sains
ko di tempat ku ga bisa ya...
Unknown
ini baru mantap. mas taufik emang jagoo 10 :bd
Unknown
Alhamdulillah, berhasil mas. mksh yach \o/
Arief Yustana
Ane kurang beruntung broo...
Unknown
lebih simple, apa mungkin mas taufik ahnya menambahkan beberapa kode terhadap kode komentar bawaan blogger ?