Ngawi Cyber

Tampilkan postingan dengan label Hack Threaded Comments. Tampilkan semua postingan

Merubah Kotak Replay "Bertingkat" Threaded Comment

Assalamu alaikum Wr.Wb...
Pada kesempatan hari ini saya akan memberikan trik Blogger yaitu 'Merubah Kotak Replay (Bertingkat) Threaded Comment', trik ini hanya khusus yang sudah mengaktifkan Threaded Comments diblog, jika sobat belum mengaktifkannya silahkan baca disini.

jadi trik ini sbenarnya belum dapat dilakukan di threaded comments (Standart Blogger), kita hanya hanya menambahkan kode css saja untuk bisa menciptakan mode bertingkat di kotak Replay Threaded comment, baiklah biar sobat dapat memahami sperti apa yg akan kita bahas ini, sobat perhatikan kedua gambar berikut:

Sebelum (Standar).

Sesudah (Hasilnya).

Bagaimana? sudah dimengerti kan perbedaannya..
Baiklah jika ingin mencoba diblog sobat, silahkan ikuti langkat berikut, dan hanya menambahkan kode css saja.

Login blogger.
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Letakkan kode berikut diatasnya :

/* Hack thread-comment bertingkat */
.comment .comment-thread.inline-thread .comment:nth-child(7) {margin:0px 0px 5px 30%;}
.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%;}

4. Selanjutnya Simpan Template dan lihat hasilnya.

Selamat Mencoba GOODLUCK :D

Baca selengkapnya »

Hack Threaded Comments

Tweet Share Share Share Share Share

Merubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta' Bag.4

Unknown 13.43

Assalamu Alaikum Wr.Wb.
Kali ini saya akan memberikan trik blogger lagi yaitu 'Merubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta' Bag.4', dimana pada postingan saya yang lalu pernah juga membahas..

1. Rubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta',
2. Costume Comments Dengan Fitur Replay (Thread Comment) Ala UTta' Bag.2, dan
3. Threaded Comments (Fitur Reply) Dengan Komentar Berbeda Bag.3.

Merubah tampilan kotak komentar, adalah salah satu cara untuk mempercantik tampilan blogger kita, apalgi trik yang akan saya berikan ini, pasti membuat anda tertarik membuat'Nya,. klw gk, brrt gk normal.hahaa (justkid),.

Oia sob, treaded comments kali ini ini berbeda dari ketiga mode threaded comment yang pernah saya bahas, disamping memiliki tampilan yang enak dilihat, juga sudah dilengkapi dengan Author admin yang berbeda dari komentar teman2, mksdnya, disini komentar admin akan lebih mudah diketahui dari komentar yang lain,. sehingga pengunjung dapat mudah membedakan mana admin dan bukan admin,.. so mantap deh pokoke.hohoo,..

Baiklah jika sobat penasaran melihat contohnya silahkan lihat gambar dan demo dibawah ini..

DEMO BISA LIHAT DISINI..

Gimana?? tertarik membuat'Nya.... jika begitu silahkan ikuti tahap-tahap berikut :

Login blogger.
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Letakkan kode berikut diatasnya :

/* Threaded Comments style bag.4 */
.comment-body-author p{color:rgba(0,137,224,0.65)!important;text-shadow:0 0 1px #000;}
.comment-body-author {background-color:rgba(0,0,0,0.40);border:1px solid #111;border-top-color:#111;border-bottom-color:rgba(0,137,224,0.40);border-right-color:rgba(0,137,224,0.45);box-shadow:inset 0 2px 6px #000;-webkit-box-shadow:inset 0 2px 6px #000;-moz-box-shadow:inset 0 2px 6px #000;padding:2px;cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii2vxX95NsuV2oe3M195a2ojlDurnCyfu-HIhzJycGtlnhh_sCl4kKAsDKYwc2PBeCGQTqIF9LfvJLTx_OmrCEcCye6LBmezBjhZp_6mVpEPLoYy0im8KAomSDKMczGC6m0nzY3Ono2Gg/s320/forum_admin_utta.png),auto;font-family:Terminal Dosis Light;font-weight:420}
.comment-body-author:hover{border:1px solid #222;border-top-color:#333;border-bottom-color:rgba(0,137,224,0.60);border-right-color:rgba(0,137,224,0.70);}
.comment-form, #comment-editor {background-color:rgba(0,0,0,.2);border:1px solid #222;border-top-color:#333;border-bottom-color:#151515;-moz-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-box-shadow:0 5px 12px rgba(0,0,0,.7);box-shadow:0 5px 12px rgba(0,0,0,.7);overflow-x:hidden;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;padding:15px;}
#comment-editor {width:95%!important;}
#cm_page_copy, .cm_pagenavi {background:#000;height:1px;margin:8px 0;padding:2px 0;border-radius:3px;border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #333;border-bottom:1px solid #333;}
.comment-form{width:95%;max-width:95%;}
.comment-form p {cursor:help;box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-moz-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-webkit-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);position:relative;border:4px solid rgba(35,35,35,0.40);
padding:10px;font-family:century gothic;font-size:12px;line-height:1.6em;color:#bbb;margin-top:30px;}
.comment-form p:hover {color:#0089e0;background:rgba(15,15,15,0.70);}
.comment-form p::after, .comment-form p::before {top:100%;
border:solid transparent;content:" ";height:0;width:0;position:absolute;
pointer-events:none}
.comment-form p::before {border-top-color:rgba(45,45,45,0.55);border-width:15px;right:10%;margin-right:-26px}
.comment-form p::after {border-top-color:rgba(0,137,224,0.75);border-width:9px;right:10%;margin-right:-20px}
.comment-form iframe{opacity:0.1;-webkit-transition:.2s ease-in;
-moz-transition:.2s ease-in;transition:.2s ease-in;}
.comment-form iframe:hover{opacity:1}
.comment-form a{color:#0089e0;}
#comments h4{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvspnNb1jDUPlyaNGkyt35g_-vBgZR_Pube5JOATk3vubTIq1z2qNwnOh8uiE6Gi1dX4VzzOmjKRzGuZVg-dyPcWe1HW0fhGhHvYg502oRDLRCI1Ya82rldWCk6H1eFfl1HYKQWT0aP_TR/s400/icon_comments.png) no-repeat 3px .3em;padding-left:27px;padding-top:0;margin:0;font:bold 16px oswald;color:rgba(75,75,75,0.50);
font-size:20px;text-shadow:0px 0px 0 rgb(-22,-21,-21),-1px -1px 0 rgb(-54,-53,-53), -2px -2px 0 rgb(-85,-84,-84),-3px -3px 2px rgba(0,0,0,0.5),-3px -3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);}
.comments{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCzQiFrbw3Vez4uitJ2G_5w-lKayLnU-f3EZv31gGIqbJzRMmCy99IJabcZKSQQb6Jdb5uWAmn4I11uoRGUvSKuzhcTbZKNHxA2lBeFxw2jl3lO45hmus_8LRQVQUaOySnIsIsqnn6sk/s1600/fill_aka.png);-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;padding:10px 10px;text-shadow:0 -1px 1px #000}
.cm_avatar, .comment-form p, .cm_reply a{-webkit-transition:all 2s ease;-moz-transition:all 2s ease;transition:all 2s ease;}
.avatar-image-container, .cm_avatar{box-shadow:1px -2px 1px #000;-webkit-box-shadow:1px -2px 1px #000;-moz-box-shadow:1px -2px 1px #000;cursor:help;}
.comments .avatar-image-container,.comments .avatar-image-container img{width:67px;max-width:67px;height:67px;max-height:67px;}
.cm_wrap{clear:both;margin-bottom:10px;float:right;width:100%}
.cm_head{width:60px;float:left;margin:0;}
.cm_reply{padding-top:3px}
.cm_reply a{box-shadow:inset 0 1px 2px rgba(15,15,15,0.70);-moz-box-shadow:inset 0 1px 2px rgba(15,15,15,0.70);-webkit-box-shadow:inset 0 1px 2px rgba(15,15,15,0.70);display:inline-block;border-top:1px solid #0089e0;border-right:1px solid #222;border-left:1px solid #222;border-bottom:1px solid #0089e0;color:#aaa!important;text-align:center;text-decoration:none;background:rgba(9,9,9,0.60);font:normal 11px oswald;height:25px;width:25px;max-width:100%;border-radius:100%;padding:25px;margin:0 auto;overflow:hidden;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);}
.cm_reply a:hover{background:rgba(5,5,5,0.70);border-top:1px solid transparent;border-left:2px solid #0089e0;border-right:2px solid #0089e0;border-bottom:1px solid transparent;text-decoration:none!important;color:#0089e0 !important;-moz-transform:rotate(1800deg);-webkit-transform:rotate(1800deg);transform:rotate(1800deg);}
.cm_entry{background-color:rgba(0,0,0,.2);overflow:hidden;padding:10px;padding-left:20px;border-right:1px solid #222;border-top:1px solid #222;box-shadow:5px 6px 7px rgba(0,0,0,.5);-moz-box-shadow:5px 6px 7px rgba(0,0,0,.5);-webkit-box-shadow:5px 6px 7px rgba(0,0,0,.5);}
.cm_info, .cm_info_a{background-color:rgba(45,45,45,0.75);margin-bottom:5px;padding:5px;}
.cm_info{border:1px dashed #333;background:rgba(0,0,0,.2);box-shadow:0px 1px 2px #222;box-shadow:inset 0px 0px 3px #222;}
.cm_name a{text-shadow:0 0 2px #222;color:rgba(0,137,224,0.65)!important;}
.cm_info_a{border:1px dotted rgba(0,137,224,0.65)!important;}
.cm_name,.cm_name_a{font:bold 14px Terminal Dosis Light;text-decoration:none;float:left}
.cm_name{color:#888 !important;}
.cm_name_a{color:rgba(0,137,224,0.65)!important;}
.cm_date{color:#888!important;font-style:italic;}
.cm_date_a{color:rgba(0,137,224,0.65)!important;}
.cm_date_a, .cm_date{font:normal 11px Terminal Dosis Light;text-decoration:none;float:right;padding-top:5px}
.cm_avatar, .cm_avatar_a{vertical-align:middle;border:1px solid #0089e0;border-right-color:#222;border-bottom-color:#222;background-color:#000;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTam6eNkqMPQYsvY-THQ8GF-DtowWYyYbgyT9vSlVqiMZelcJeNWgZ5ejiztKMpZbjSiS8eBbRTTmMGcLlfUHj34nhOZBxkynAyb9iQoDlyylN4JoTAqiRUYAKEMYLoODrg16Xzx5RYkQ/s1600/gravatar_utta.jpg) center no-repeat;width:67px;max-width:67px;height:67px;max-height:67px;margin:0;padding:3px}
.cm_avatar:hover{-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);transform:rotate(-20deg);opacity:0.8}
.cm_entry p,.cm_entry_a p{clear:both;font:bold 14px Terminal Dosis Light;color:#bbb;word-wrap:break-word;padding:5px;border:thin solid #222;background-color:rgba(30,30,30,0.60);box-shadow:-10px -5px 0 rgba(45,45,45,0.50);-webkit-box-shadow:-10px -5px 0 rgba(45,45,45,0.50);-moz-box-shadow:-10px -5px 0 rgba(45,45,45,0.50);}
.deleted-comment {display:none!important;}

4. Selanjutnya cari kode </body> , lalu letakkan script berikut tepat diatasnya :

<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/akauttacomment.js' type='text/javascript'/>

5. NEXT,.. Selanjutnya cari kode <b:includable id='comments' var='post'> , lalu Hapus kode antara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> (kode yang berwarna biru yang harus didelete).

Contoh Seperti ini :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>
</span> comment<b:else/>
<span id='cm_total'>
<data:post.numComments/>
</span> comments</b:if>
</b:if>
</h4>

------------ sebagian kode yang harus didelete -------------------

<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/>
</a>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>

6. Setelah ketemu, Lalu Paste kode berikut ini diantara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> yang sudah dihapus tadi gantikan dengan kode dibawah..

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<a href='#comment-form' style='float:right; margin-right:5px;color:red;'>+ Create Comment +</a>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> Responses so far.
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=ID-BLOG-ANDA&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>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='http://picturestack.com/296/424/D4XadminuttaH2N.png' title='Administrator' width='20px'/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
</dd>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Leave a comment</a>
</b:if>
</b:if>
</b:if>
</div>

Sehingga Hasil Keseluruhan seperti berikut :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<a href='#comment-form' style='float:right; margin-right:5px;color:red;'>+ Create Comment +</a>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> Responses so far.
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=ID-BLOG-ANDA&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>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='http://picturestack.com/296/424/D4XadminuttaH2N.png' title='Administrator' width='20px'/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
</dd>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Leave a comment</a>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>

NB :>> - Ganti Tulisan ID-BLOG-ANDA dengan ID blog kamu, misal: 3587929819661064232 (untuk mengetahui ID blomu, kamu bisa lihat deretan angka pada address bar pada saat membuka halaman Edit HTML.

http://picturestack.com/688/211/PhKcatshv2.jpg

7. Langkah terakhir Priview dlu, jika tidak terjadi kesalahan, baru deh sobat save template.

Hmm.. mungkin agak rumit yaa gan.. tapi yaa itulah yang utta ketahui, Jika ada yang ingin ditanyakan mengenai trik ini, silahkan berkomentar pada forum dibawah :D

Semoga Tutorial kali ini bermanfaat bagi sobat, dan selamat mencoba!;)

Baca selengkapnya »

Hack Threaded Comments Tutorial Lainnya

Tweet Share Share Share Share Share

CSS Style "Threaded Comments" Dark Shadow Transparent

Unknown 23.24

Assalamu Alaikum Wr.Wb..

Pada kesempatan kali ini saya akan memberikan trik 'CSS Style "Threaded Comments" Dark Shadow Transparent' maksdnya disini kita akan merubah tampilan kotak komentar (Threaded Comments) dengan dengan memberikan Kode CSS sehingga tampilannya lebih menarik, dan sebelum kita mulai membuat'Nya disini saya akan memberikan 2 Mode Style Warna yaitu Merah dan Biru..!!

Style Merah -> Demo Here..

Style Biru -> Demo Here..

Baiklah sebelum kita mulai pastikan sobat sudah mengaktifkan Threaded Comments diblog, jika blum silahkan baca disini...

Nah jika sobat tertarik tuk membuat'Nya silahkan ikuti langkah-langkah berikut :

1.Login blogger.
2.Rancangan, Edit HTML (centang Expand Widget Templates) cari kode ]]></b:skin>
Dan Letakkan kode CSS berikut diatasnya :

Threaded Comments Style MERAH :>>

/* Blogger Threaded Comments Styles Merah */
#comments h4 {background:none repeat scroll 0 0 #D60000;display:inline;font-size:15px;color:#fff;line-height:40px;padding:10px;font-weight:bold;position:relative;}
#comments h4:after{
content:"";
position:absolute;bottom:-10px;left:10px;border-top:10px solid #D60000;border-right:10px solid transparent;width:0;height:0;line-height:0;}
.comments {clear:both;margin:3px 3px 3px 3px;
line-height:1em;width:ancho;color:#999;text-shadow:0 -1px 1px #000;font:normal 15px Terminal Dosis Light;}
.comment-header,.comments .comment .comment-actions.secondary-text a,.comments .continue a,.comment-replies,.comment-content,.PageList li.selected a {
background-color:rgba(0,0,0,.1);border:1px solid #1B1C20;border-top-color:rgba(255,255,255,0.04);
border-bottom-color:rgba(255,255,255,0.01);box-shadow:0 2px 4px rgba(0,0,0,.5);-moz-box-shadow:0 2px 4px rgba(0,0,0,.5);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.5);
transition:all .15s ease-in-out;-moz-transition:all .15s ease-in-out;-webkit-transition:all .15s ease-in-out;transform-origin:50% 1px;-moz-transform-origin:50% 1px;-webkit-transform-origin:50% 1px;}
.comments .comments-content {font-size:14px;margin-bottom:16px;
font-weight:normal;text-align:left;line-height:1.3em;}
.comments .comment .comment-actions.secondary-text a,.comments .continue a
{
display:inline-block;white-space:nowrap;padding:0 1.5em;margin:0.1em;
font:normal 1em/2em PT Sans Narrow, Helvetica;text-decoration:none;
color:#D60000;}
.comments .comment .comment-actions.secondary-text a:hover,.comments .continue a:hover
{background-color:rgba(0,0,0,.3);}
.comments .comment .comment-actions.secondary-text a:active,.comments .continue a:active
{background-color:rgba(0,0,0,.1);}
.comments .comment .comment-actions.secondary-text a:before,.comments .continue a:before
{
background:rgba(0,0,0,.1);float:left;width:1em;text-align:center;font-size:1.5em;padding:0 .2em;
-moz-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
-webkit-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
-moz-border-radius:.15em 0 0 .15em;-webkit-border-radius:.15em 0 0 .15em;border-radius:.15em 0 0 .15em;pointer-events:none;}
.comments .comment .comment-actions.secondary-text a:before
{margin:0 1em 0 -1em;}
.comments .continue a:before
{margin:0 1em 0 -.9em;}
.comments .comment .comment-actions.secondary-text a:before
{content: "\279C";}
.comments .continue a:before {content: "\271A";}
.comments .comments-content .comment-thread ol {
list-style-type:none;padding:0;text-align:none;}
.comments .comments-content .user {font-style:normal;font-weight:bold;color:#444;}
.comments .comments-content .user a {color:#D60000;font-size:14px;font-weight:bold;text-decoration:none;}
.comments .comments-content .icon.blog-author {
width:18px;height:18px;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;box-shadow:0 0 2px #D60000;-moz-box-shadow:0 0 2px #D60000;-webkit-box-shadow:0 0 2px #D60000;border:1px solid #D60000;
background:rgba(0,0,0,.3);display:inline-block;margin:0 0 -4px 6px;}
.comments .comments-content .datetime {
color:#555;float:right;font-size:11px;
text-decoration:none;}
.comments .comments-content .datetime a {
color:#444;}
.comments .comments-content .datetime a:hover {
color:#999;text-decoration:none;}
.comments .comments-content,.comments .comments-content .comment-content {
text-align:justify;margin:0 0 8px;}
.comment-header{margin:0;padding:10px;}
.comments .avatar-image-container {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-gZtbuh_RY18OQMS0j1ZGCQX1FbhHWgR6RZ0m-5YAh9y6-ESCllap-598SEpuc7ttHjkyR2JumxVt06ffXqTF14JAD2-Cva9gIQWY87KAxyNshMU3QxQWZJ0DVbC_Fr7jBxnx9cMw/s1600/default-avatar.png");
background-position:top center;background-repeat:no-repeat;
width:36px;height:36px;margin:0;padding:0;overflow:hidden;
float:left;margin-right:33px;display:block;
border:1px solid #D60000;background-color:rgba(155,155,155,0.50);-moz-box-shadow:0 0 5px #000;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;}
.comments .avatar-image-container:hover,
.comments .avatar-image-container img:hover{
border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;}
.comment-content{padding:10px;}
.comment-replies .comment-content{padding:10px;border-bottom:1px solid rgba(255, 255, 255, 0.04);border-radius:3px;-moz-border-radius:3px;
-webkit-border-radius:3px;}
.comment-block {margin-left:48px;position:relative;float:right:width:300px;}
.comments .thread-expanded .thread-arrow {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}
.comments .thread-collapsed .thread-arrow {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}

/* comment-author */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);}

.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .continue {
cursor: pointer;
}
.comments .comments-content .comment {
margin-bottom:10px;
padding-bottom:8px;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment:first-child {
padding-top:10px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {border:none;height:250px;width:100%;}
.comments .comment-replybox-single {margin-top:5px;margin-left:48px;}
.comments .comment-replybox-thread {margin-top:5px;}
.comments .comments-content .comment-thread:empty {display:none;}
.comments .comments-content .loadmore {cursor:pointer;max-height:3em;margin-top:3em;}
.comments .comments-content .loadmore.loaded {max-height:0px;opacity:0;overflow:hidden;}
.comments .comments-content .loadmore a {display:block;padding:10px 16px;text-align:center;}
.comments .thread-toggle {cursor: pointer;display: inline-block;}
.comments .avatar-image-container img {width:36px;transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;}
.deleted-comment {display:none!important;}

/* comment-form and comment-editor style */
.comment-form, #comment-editor {background-color:rgba(0,0,0,.2);border:1px solid #222;border-top-color:#333;border-bottom-color:#151515;-moz-box-shadow:0 4px 8px rgba(0,0,0,.7);-webkit-box-shadow:0 4px 8px rgba(0,0,0,.7);box-shadow:0 4px 8px rgba(0,0,0,.7);padding:15px;}
.comment-form, #comment-editor{width:95% !important;max-width:95% !important;}
.comment-form p {cursor:help;box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-moz-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-webkit-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);position:relative;border:4px solid rgba(35,35,35,0.40);
padding:10px;font-size:14px;line-height:1.6em;color:#D60000;}
.comment-form p:hover {color:#bbb;background:rgba(15,15,15,0.70);}
.comment-form p::after, .comment-form p::before {top:100%;
border:solid transparent;content:" ";height:0;width:0;position:absolute;
pointer-events:none}
.comment-form p::before {border-top-color:rgba(214,0,0,0.55);border-width:15px;right:10%;margin-right:-26px}
.comment-form p::after {border-top-color:rgba(214,0,0,0.75);border-width:9px;right:10%;margin-right:-20px}
.comment-form a{color:#D60000;}
#comment-editor{opacity:0.4;}
#comment-editor:hover{opacity:2.2;}
#comment-editor, .comment-form p{transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;}

/* counter number merah */
.comments {counter-reset:number;}
.comments .comment {position:relative;}
.comments .comment:after {counter-increment:number;content:counter(number);
display:block;width:35px;height:35px;text-align:center;font:italic normal 18px/35px Times,Serif;color:#eee;position:absolute;top:0;right:0;-webkit-border-radius:100%;
-moz-border-radius:100%;border-radius:100%;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);border:3px solid #ccc;background:rgba(214,0,0,0.55);}
.comments .comment .comment-thread.inline-thread {counter-reset:number;}
.comments .comment .comment-thread.inline-thread .comment:after {font-size:18px;
line-height:30px;width:30px;height:30px;}
.comments .comment:hover:after {background-color:rgba(5,5,5,0.45);border-color:rgba(214,0,0,0.45);color:#D60000;text-shadow:0 0 2px #D60000;}

Threaded Comments Style BIRU :>>

/* Blogger Threaded Comments Styles Biru */
#comments h4 {background:none repeat scroll 0 0 #319BED;display:inline;font-size:15px;color:#fff;line-height:40px;padding:10px;font-weight:bold;position:relative;}
#comments h4:after{
content:"";
position:absolute;bottom:-10px;left:10px;border-top:10px solid #319BED;border-right:10px solid transparent;width:0;height:0;line-height:0;}
.comments {clear:both;margin:3px 3px 3px 3px;
line-height:1em;width:ancho;color:#999;text-shadow:0 -1px 1px #000;font:normal 15px Terminal Dosis Light;}
.comment-header,.comments .comment .comment-actions.secondary-text a,.comments .continue a,.comment-replies,.comment-content,.PageList li.selected a {
background-color:rgba(0,0,0,.1);border:1px solid #1B1C20;border-top-color:rgba(255,255,255,0.04);
border-bottom-color:rgba(255,255,255,0.01);box-shadow:0 2px 4px rgba(0,0,0,.5);-moz-box-shadow:0 2px 4px rgba(0,0,0,.5);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.5);
transition:all .15s ease-in-out;-moz-transition:all .15s ease-in-out;-webkit-transition:all .15s ease-in-out;transform-origin:50% 1px;-moz-transform-origin:50% 1px;-webkit-transform-origin:50% 1px;}
.comments .comments-content {font-size:14px;margin-bottom:16px;
font-weight:normal;text-align:left;line-height:1.3em;}
.comments .comment .comment-actions.secondary-text a,.comments .continue a
{
display:inline-block;white-space:nowrap;padding:0 1.5em;margin:0.1em;
font:normal 1em/2em PT Sans Narrow, Helvetica;text-decoration:none;
color:#319BED;}
.comments .comment .comment-actions.secondary-text a:hover,.comments .continue a:hover
{background-color:rgba(0,0,0,.3);}
.comments .comment .comment-actions.secondary-text a:active,.comments .continue a:active
{background-color:rgba(0,0,0,.1);}
.comments .comment .comment-actions.secondary-text a:before,.comments .continue a:before
{
background:rgba(0,0,0,.1);float:left;width:1em;text-align:center;font-size:1.5em;padding:0 .2em;
-moz-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
-webkit-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
-moz-border-radius:.15em 0 0 .15em;-webkit-border-radius:.15em 0 0 .15em;border-radius:.15em 0 0 .15em;pointer-events:none;}
.comments .comment .comment-actions.secondary-text a:before
{margin:0 1em 0 -1em;}
.comments .continue a:before
{margin:0 1em 0 -.9em;}
.comments .comment .comment-actions.secondary-text a:before
{content: "\279C";}
.comments .continue a:before {content: "\271A";}
.comments .comments-content .comment-thread ol {
list-style-type:none;padding:0;text-align:none;}
.comments .comments-content .user {font-style:normal;font-weight:bold;color:#444;}
.comments .comments-content .user a {color:#319BED;font-size:14px;font-weight:bold;text-decoration:none;}
.comments .comments-content .icon.blog-author {
width:18px;height:18px;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;box-shadow:0 0 2px #319BED;-moz-box-shadow:0 0 2px #319BED;-webkit-box-shadow:0 0 2px #319BED;border:1px solid #319BED;
background:rgba(0,0,0,.3);display:inline-block;margin:0 0 -4px 6px;}
.comments .comments-content .datetime {
color:#555;float:right;font-size:11px;
text-decoration:none;}
.comments .comments-content .datetime a {
color:#444;}
.comments .comments-content .datetime a:hover {
color:#999;text-decoration:none;}
.comments .comments-content,.comments .comments-content .comment-content {
text-align:justify;margin:0 0 8px;}
.comment-header{margin:0;padding:10px;}
.comments .avatar-image-container {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mp-gZtbuh_RY18OQMS0j1ZGCQX1FbhHWgR6RZ0m-5YAh9y6-ESCllap-598SEpuc7ttHjkyR2JumxVt06ffXqTF14JAD2-Cva9gIQWY87KAxyNshMU3QxQWZJ0DVbC_Fr7jBxnx9cMw/s1600/default-avatar.png");
background-position:top center;background-repeat:no-repeat;
width:36px;height:36px;margin:0;padding:0;overflow:hidden;
float:left;margin-right:33px;display:block;
border:1px solid #319BED;background-color:rgba(155,155,155,0.50);-moz-box-shadow:0 0 5px #000;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;}
.comments .avatar-image-container:hover,
.comments .avatar-image-container img:hover{
border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;}
.comment-content{padding:10px;}
.comment-replies .comment-content{padding:10px;border-bottom:1px solid rgba(255, 255, 255, 0.04);border-radius:3px;-moz-border-radius:3px;
-webkit-border-radius:3px;}
.comment-block {margin-left:48px;position:relative;float:right:width:300px;}
.comments .thread-expanded .thread-arrow {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}
.comments .thread-collapsed .thread-arrow {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}

/* comment-author */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);}

.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .continue {
cursor: pointer;
}
.comments .comments-content .comment {
margin-bottom:10px;
padding-bottom:8px;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment:first-child {
padding-top:10px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {border:none;height:250px;width:100%;}
.comments .comment-replybox-single {margin-top:5px;margin-left:48px;}
.comments .comment-replybox-thread {margin-top:5px;}
.comments .comments-content .comment-thread:empty {display:none;}
.comments .comments-content .loadmore {cursor:pointer;max-height:3em;margin-top:3em;}
.comments .comments-content .loadmore.loaded {max-height:0px;opacity:0;overflow:hidden;}
.comments .comments-content .loadmore a {display:block;padding:10px 16px;text-align:center;}
.comments .thread-toggle {cursor: pointer;display: inline-block;}
.comments .avatar-image-container img {width:36px;transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;}
.deleted-comment {display:none!important;}

/* comment-form and comment-editor style */
.comment-form, #comment-editor {background-color:rgba(0,0,0,.2);border:1px solid #222;border-top-color:#333;border-bottom-color:#151515;-moz-box-shadow:0 4px 8px rgba(0,0,0,.7);-webkit-box-shadow:0 4px 8px rgba(0,0,0,.7);box-shadow:0 4px 8px rgba(0,0,0,.7);padding:15px;}
.comment-form, #comment-editor{width:95% !important;max-width:95% !important;}
.comment-form p {cursor:help;box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-moz-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-webkit-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);position:relative;border:4px solid rgba(35,35,35,0.40);
padding:10px;font-size:14px;line-height:1.6em;color:#319BED;}
.comment-form p:hover {color:#bbb;background:rgba(15,15,15,0.70);}
.comment-form p::after, .comment-form p::before {top:100%;
border:solid transparent;content:" ";height:0;width:0;position:absolute;
pointer-events:none}
.comment-form p::before {border-top-color:rgba(45,45,45,0.55);border-width:15px;right:10%;margin-right:-26px}
.comment-form p::after {border-top-color:rgba(49,155,237,0.75);border-width:9px;right:10%;margin-right:-20px}
.comment-form a{color:#319BED;}
#comment-editor{opacity:0.4;}
#comment-editor:hover{opacity:2.2;}
#comment-editor, .comment-form p{transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;}

/* counter number biru */
.comments {counter-reset:number;}
.comments .comment {position:relative;}
.comments .comment:after {counter-increment:number;content:counter(number);
display:block;width:35px;height:35px;text-align:center;font:italic normal 18px/35px Times,Serif;color:#111;position:absolute;top:0;right:0;-webkit-border-radius:100%;
-moz-border-radius:100%;border-radius:100%;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);border:3px solid #222;background:rgba(0,180,255,0.55);}
.comments .comment .comment-thread.inline-thread {counter-reset:number;}
.comments .comment .comment-thread.inline-thread .comment:after {font-size:18px;
line-height:30px;width:30px;height:30px;}
.comments .comment:hover:after {background-color:rgba(5,5,5,0.45);border-color:rgba(0,180,255,0.45);color:#fff;}

3.Selanjutnya cari kode seperti ini :

<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1.5em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:10px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:10px;
}
.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;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
font-size:11px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTEOFumVpfDw4Mt4SIogsVcCV9hyphenhyphenUJEpo7cia0bA3t3YLuLsqkOfG2ttAl17p_hB1FqaaqLDnarq4xtWETxUf7XHxaIycO12o1AX6x8ocy_1YeCP4pGHp9EwtPltWlgYJn9QkLl-XBRVG/s0/avatar.png) no-repeat center;
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>

- Jika sudah ketemu, Sobat perhatikan kode diatas yang berwarna merah dan sampai kode penutup, sobat tinggal hapus semua kode yang berwarna hijau, ingat yang berwarna merah jangan dihapus yah, bisa2 kotak postingan diblog sobat hilang.!!

4. Langkah terakhir Priview dulu, jika tidak terjadi kesalahan, baru sobat bisa save template. dan selesai :D

Baca selengkapnya »

CSS3 Hack Threaded Comments

Tweet Share Share Share Share Share

Mengatasi 'Threaded Comment' Blog Yang Tidak Berfungsi

Unknown 07.31

Assalamu Alaikum Wr.Wb...
Baiklah Pada kesempatan kali ini saya akan mencoba memberikan trik cara 'Mengatasi (Threaded Comment) Yang Tidak Berfungsi', Kasus tidak berfunginya button reply comment di New Blogger Threaded Comment ternyata tak hanya dialami oleh satu atau dua blogger saja. Sangat banyak yang mengeluhkan permasalahan ini, termasuk satu diantaranya 'UT2A-4DOWN'. :D

Jadi munculnya permasalahan gangguan atau disfungsi button reply comment pada New Blogger Threaded Comments sebenarnya terjadi karena proses editing, modifikasi atau penggantian template dengan template baru hasil download. Setelah disfungsi terjadi, sekalipun telah dilakukan pergantian template "default blogger", baik menggunakan template Tata Letak (Layout) ataupun Blogger Designer (Perancang Template) ternyata button reply tetap seperti sedia kala. Kerusakan ini menjadi bersifat permanen dan selalu mengikuti sekalipun template diganti berkali-kali. Mengganti template ternyata bukan mengatasi masalah atau menjadi sebuah solusi. Javascript Threaded Comments-lah yang harus diperbaiki atau diganti.

Dan Berikut Cara Mengatasinya ::
1. Login ke Blogger
2. Pilih Template
3. Klik Edit HTML
4. Jangan lupa Backup dulu template
5. Centang kotak kecil dekat Expand Template Widget
6. Gunakan ctrl+F untuk mencari kode ini : <b:includable id='threaded_comment_js' var='post'>

Untuk lebih lengkapnya seperti ini :

<b:includable id='threaded_comment_js' var='post'>
<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var postId = '<data:post.id/>';
      var feed = '<data:post.commentFeed/>';
      var authorName = '<data:post.author/>';
      var authorUrl = '<data:post.authorUrl/>';
      var blogId = '<data:top.id/>';
      var baseUri = '<data:post.commentBase/>';
      var maxThreadDepth = '<data:post.commentMaxThreadDepth/>';

// <![CDATA[
      feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = feed;
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == authorName
              && comment.author.profileUrl == authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var tok = 'comment-form_';
      var hash = window.location.hash || '';
      var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

      // Configure commenting API:
      var configJso = {
        'maxDepth': maxThreadDepth
      };
      var provider = {
        'id': postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
</script>
</b:includable>

7. Jika Sudah Ketemu, Sobat tinggal hapus semua kode diatas, lalu ganti dengan kode berikut :

<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
</script>
</b:includable>

8. Terakhir Simpan Template, dan selesai..

Nah cukup mudah bukan?heheee,.. yaa mgkn cukup sampai disini tutorial yang saya berikan, jika masih ada masalah, silahkan berkomentar.trims :D

Baca selengkapnya »

Hack Threaded Comments Tutorial Lainnya

Tweet Share Share Share Share Share

Pasang Emotion Yoyo di Kotak Komentar Thread Comment

Unknown 21.24

http://picturestack.com/510/17/CgZut2a4downt95.jpg

Baiklah kali ini saya kembali lagi memberikan tutorial memasang emoticon lucu di kotak komentar (Threaded Comments) yaitu emoticon 'Yoyo', contoh seperti berikut:

:a:

:b:

:c:

:d:

Oia Sebelum Memasang Emotion ini, Pastikan sobat blogger sudah mengaktifkan fitur thread comment blognya. Bagi yang belum memasangnya bisa lihat disini atau di sini...

Nah, jika sobat tertarik memasangnya silahkan ikuti tahap-tahap berikut :
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </body> , Lalu letakkan kode berikut ini di atasnya :

<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/UT_emoticonYoyo.js' type='text/javascript'/>

6. Selanjutnya Copy kode emotion berikut :

<div align='center' style='background:#fff;padding:5px;margin-top:5px;margin-bottom:5px;color:#000;font:bold 14px arial;'>
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta1.gif' width='35'/>
:a
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta2.gif' width='35'/>
:b
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta3.gif' width='35'/>
:c
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta4.gif' width='35'/>
:d
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta5.gif' width='35'/>
:e
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta6.gif' width='35'/>
:f
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta7.gif' width='35'/>
:g
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta8.gif' width='35'/>
:h
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta9.gif' width='35'/>
:i
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta10.gif' width='35'/>
:j
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta11.gif' width='35'/>
:k
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta12.gif' width='35'/>
:l
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta13.gif' width='35'/>
:m
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta14.gif' width='35'/>
:n
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta15.gif' width='35'/>
:o
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta16.gif' width='35'/>
:p
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta17.gif' width='35'/>
:q
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta18.gif' width='35'/>
:r
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta19.gif' width='35'/>
:s
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta20.gif' width='35'/>
:t
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta21.gif' width='35'/>
:u
<img border='0' height='30' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta22.gif' width='45'/>
:v
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta23.gif' width='35'/>
:w
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta24.gif' width='35'/>
:x
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta25.gif' width='35'/>
:y
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta26.gif' width='35'/>
:z
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta27.gif' width='35'/>
:a:
<img border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZrEk5fKxLq1uzSwAdw03-pFTqCIj4a1JqY9QMeDgnbtIe4Md_PJkfRwKObCpbWHn5XrYmfMP2s4hsRnzx8len8YsAi39Y9t5rvwFUqOd4cR8Ul_LIgKjq-gp0ngGqaKMVA99C007JQg/s128/thmonkey.gif' width='45'/>
:b:
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta29.gif' width='35'/>
:c:
<img border='0' height='35' src='http://www.glittermsn.com/wp-content/emoticons-scimmietta30.gif' width='35'/>
:d:
</div>

7. Lalu Temukan Kode dibawah ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>



- Lalu Paste kode yang sudah di copy pada bagian yang sudah saya diberi tanda.

8. Selanjutnya Temukan Lagi Kode Berikut :

<div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

   

- Lalu Paste kode yang sudah di copy pada bagian yang sudah saya diberi tanda.

9. Simpan Template jika sudah selesai dan lihat hasilnya.

Bagi yang merasa ada masalah dengan emotion ini, silahkan sobat tinggalkan keluhan atau masalahnya dengan berkomentar.

NB::>>
-Jika sobat ingin request emoticon untuk kotak komentar, silahkan berkomentar diforum yg tersedia, dan syaratnya hanya memberikan saya almat link emoticon milik sobat, dgn bgt sy bisa memasangnya. :D

BERAGAM EMOTICON AKAN SAYA UPDATE TERUS,. JADI DITUNGGU SAJA POSTINGAN BERIKUTNYA :D

Baca selengkapnya »

Emotions Komentar Hack Threaded Comments

Ngawi Cyber

Breaking News

Politik

Hukum & Kriminal

Seni & Hiburan

Sponsor

Merubah Kotak Replay "Bertingkat" Threaded Comment

Merubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta' Bag.4

CSS Style "Threaded Comments" Dark Shadow Transparent

Mengatasi 'Threaded Comment' Blog Yang Tidak Berfungsi

Pasang Emotion Yoyo di Kotak Komentar Thread Comment

Ngawi Cyber