Highlight Author Threaded Comments Levels Blogger

By Unknown

Friday, July 27, 2012

Highlight author pada threaded comments dan cara membuat threaded comment bertingkat di blogger atau threaded comments for blogspot saat ini sudah menjadi suatu keharusan guna membedakan posisi setiap komentar, baik antara author blog dengan balasan komentar pengunjung dan begitu juga antar tiap komentar lainnya.

Tentunya banyak tutorial mengenai Bagaimana Cara Membuat Threaded Comment Di Blogspot ataupun panduan Blogger Threaded Comments For Custom Templates dan juga How to Enable Threaded Comments in Blogger (Blogspot) dan yang biasanya dicari oleh pengguna blogspot, yaitu Cara Memberi Highligh Pada Author Blog.

Dan kali ini Saya ingin menggabungkan beberapa diantara tutorial tersebut:

Letakkan kode CSS ini diatas ]]></b:skin>

.comment-block{position:relative;padding:8px;border:1px solid #ddd;border-radius:4px}
.comment-block .icon.blog-author{position:absolute;right:0;bottom:0;background:rgba(232,149,19,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRXOMXFFgfvnOVKc3Fwk31xv2_yDNwYDZ2z1efE1XHVL2y7-VV15IpEc3ho5Xtv5LJHWx2fVnAFv57Ukl7YphdmupDam4a3pEIs3P6u40qgbGFci8RjdDvafD20Ds02tsnHZ4KCa4NUbg/s1600/admin2.png) bottom right no-repeat !important;width:100% !important;height:100% !important;margin:0 !important}
.comment-block:hover{background:rgba(139,139,139,0.1);border:1px solid #eee;box-shadow:4px 4px 4px #444}
.comment-block:hover .icon.blog-author{width:60px !important;height:22px !important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRXOMXFFgfvnOVKc3Fwk31xv2_yDNwYDZ2z1efE1XHVL2y7-VV15IpEc3ho5Xtv5LJHWx2fVnAFv57Ukl7YphdmupDam4a3pEIs3P6u40qgbGFci8RjdDvafD20Ds02tsnHZ4KCa4NUbg/s1600/admin2.png) bottom right no-repeat !important;background-size:60px 22px !important}
sumber: http://blogonol.blogspot.com/2012/06/highlight-author-threaded-comments.html


.comments .thread-toggle{margin-bottom:10px;}
.comments .comment-thread.inline-thread .comment .comment-block{margin-left:52px;}
.comments .comment-thread.inline-thread .comment{margin:0px 0px 5px 30%;background-color:rgba(174,212,251,.7);border:1px solid #333;box-shadow:0 10px 5px -5px #000;padding:10px 15px;color:#222;}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;}
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;}
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;}
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;}
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; }
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; }
sumber: http://hompimpaalaihumgambreng.blogspot.com/2012/05/efek-thread-comment-bertingkat-hanya.html

Share :

Facebook Twitter Google+