Memasang Threaded Comments Stylish Light

Memasang Threaded Comments Stylish Light

Sekarang ini sedang marak  sekali  pada kalangan blogging,  tentang  pembahasan
Pada komentar  dan segala, atribute nya, sebelumnya sudah  saya  posting  tentang
Praktek Membuat threaded comment di Blog b1   kali ini  saya akan bahas tentang
Memasang Threaded Comments Stylish Light,  di bagian 2 ini,  ada sedikit  agak di
Edit pada bagian markup tertentu guna untuk, lebih tampil elegan dan lebih dinamis
Tampilan komentar  blog anda, jika tertarik silahkan simak berikut  tutorial nya disini

Memasang Threaded Comments Stylish Light

Memasang Threaded Comments Stylish Light :

Threaded Comments
Adalah  script  pembubuh,  untuk  di  terpkan  pelengkap,  atau  penghias  pada  suatu  web site
Atau pada  blog  juga  blogger,  di mana  sering  kita  jumpai,  jika  kita  berkomentar  pada  blog
Sobat di situ para web-blog  beraneka  ragam memodifikasi  form komentar sebagai kepuasan
Sang  pemblogger  juga sebagai ,  Accessories Blogger,  dengan  memsang  script  penghias
Blog anda, maka itu sangat menyamankan, pengunjung blog anda untuk, memudahkan dalam
Berkomentar, karena sudah di lengakapi dengan button delet juga balas, silah simak langsung

Cara Memasangnya :

Biasa anda masuk blog  anda lalu sign in, kemudian pilih template,  dan pilih edite template
Sealnjutnya cari kode   ]]></b:skin>  tekan,  Ctrl +F  untuk  memudahkan  pencarian  kodenya
Kemudian copy kode  di bawah ini,  dan paste kan  kodenya,  tepat di  atas kode  ]]></b:skin>

#comments h4{margin:0;font-size:150%;margin-bottom:10px}
#comments-block .avatar-image-container.avatar-stock img { border-width:0; padding:1px }
#comments-block .avatar-image-container { height:40px; left:-45px; position:absolute; width:40px }
#comments-block.avatar-comment-indent { margin-left:45px; position:relative }
#comments-block.avatar-comment-indent dd { margin-left:0 }
iframe.avatar-hovercard-iframe { border:0 none; padding:0; width:25em; height:9.4em; margin:.5em }
.comments .comments-content { margin-bottom:16px }
.comments .comment .comment-actions a { background-color:#55AB21; color:#fff; font-family:Segoe UI; font-size:12px; font-weight:bold; letter-spacing:normal; padding:3px 7px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; margin:0 10px 0 -7px }
.comments .continue a:hover,.comments .comment .comment-actions a:hover { background-color:#F9AC48; text-decoration:none }
.comments .comments-content .comment-thread ol { margin:20px 0 0 -10px; overflow:hidden }
.comments .comments-content .inline-thread { padding:0 }
.comments .comments-content .comment-thread { margin:0 0 0 -15px }
.comments .comments-content .comment-thread:empty { display:none }
.comments .comments-content .comment-replies { margin-left:0; margin-top:0 }
.comments .comments-content .comment,.comments .avatar-image-container { padding:4px }
.comments .comments-content .comment:first-child { padding-top:4px }
.comments .comments-content .comment:last-child { border-bottom:0; padding-bottom:0 }
.comments .comments-content .comment-body { position:relative }
.comments .comments-content .user { font-style:normal; font-weight:bold; font-size:15px; text-transform:capitalize; margin-bottom:-3px }
.comments .comments-content .icon.blog-author { display:inline-block; height:18px; margin:0 0 -4px 6px; width:18px }
.comments .comments-content .datetime { font-size:10px; margin-left:0; line-height:12px; display:block; margin-top:-5px; margin-right:10px }
.comments .comments-content .datetime a { color:#888 }
.comments .comments-content .datetime a:hover { text-decoration:none }
.comments .comments-content .comment-header { position:relative; min-height:37px; line-height:37px; padding-left:45px }
.comments .comments-content .comment-content { border:1px solid #ccc; padding:5px 10px; margin:17px 0 7px -9px; position:relative; background-color:#ffffff; color:black; font:normal 16px Calibri,Arial,Sans-Serif; height:auto; -moz-box-shadow:0 0 3px #49b9a9; -webkit-box-shadow:0 0 3px #49b9a9; box-shadow:0 0 3px #49b9a9; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px }
.comments .comments-content .comment-content:before { content:""; width:0; height:0; position:absolute; bottom:100%; left:20px; border-width:10px; border-style:solid; border-color:transparent transparent #49B9A9 transparent; display:block }
.comments .comments-content .owner-actions { position:absolute; right:0; top:0 }
.comments .comments-replybox { border:none; width:100% }
.comments .comment-replybox-single { margin-left:4px; margin-top:5px }
.comments .comment-replybox-thread { margin:5px 25px }
.comments .comments-content .loadmore a { display:block; padding:10px 16px; text-align:center }
.comments .thread-toggle { cursor:pointer; display:none }
.comments .continue { cursor:pointer; display:inline-block; margin:0 0 0 50px }
.comments .continue a { display:block; font-weight:bold }
.comments .comments-content .loadmore { cursor:pointer; margin-top:3em; max-height:3em }
.comments .comments-content .loadmore.loaded { max-height:0; opacity:0; overflow:hidden }
.comments .thread-chrome.thread-collapsed { display:none }
.comments .thread-toggle .thread-arrow {width:7px;height:7px;padding-right:4px;}
.comments .avatar-image-container { padding-left:0; margin:5px 10px 5px 0; max-height:45px; width:45px }
.comments .avatar-image-container img { border:2px solid #1BDDAC; max-width:44px; width:44px; border-radius:30px; display:block; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; box-shadow:0 1px 1px #aaa; -moz-box-shadow:0 1px 1px #aaa; -webkit-box-shadow:0 1px 1px #aaa }
.comments .comment-block { margin-left:0; position:relative }
.comments .comments-content .comment { list-style:none outside none; margin:0 13px 15px 50px }
#comment-editor { background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9OG1LUUPDq878ICXO6tgCuCz0T0c21jACyJBsLDIC2gmgwEadxsKIBW8UnKiM-HOWPnOElJ_5d-sTFgmTn3owk7KGqBuchatDYdfVMTNoAOgxfU548uM9dt4zeH3-kUfZoLCwfsrdokj/s1600/loader.gif') no-repeat 50% 120px; width:100% !important }
.comment-form { width:100%; max-width:100% }

Setelah kodenya terpasang dengan benar klik save atau simpan, dan cobalah cek blog anda
Kode Css di atas sedikit panjang,  namun cukup ringan,  untuk  di  terapkan  pada  blog anda

Keterangan :

01. Jika threaded comments belum muncul di template blog anda silahlan anda cari kode

 <b:include data='post' name='comments'/>

02. Lalu ganti kode diatas dengan kode di bawah ini

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Jika kodenya  lebih dari satu gantikan semua,  dengan kode nomor 1 diatas
Dan gantikan, pada kode nomor 2 di atas,  kalau tidak salah ada 4  kodenya