Threaded Comments Elegant Blogspot

Threaded Comments Elegant Blogspot - Threaded Comments atau komentar bertingkat memang sedang menjadi hot topik untuk merubah tampilan default komentar blogspot. Modifikasi Threated comment pun mulai bermunculan, sahingga banyak pilihan untuk dicoaba. Salah 1 nya seperti gambar diatas. Jika sobat blogger tertarik, silahkan ikuti cara membuat Threaded Comments Elegant Blogspot dibawah ini :

Langkah-langkah : Cara membuat Threaded Comments Elegant Blogspot

Langkah 1
Login ke Dasbor sobat.

Langkah 2

Pilih Rancangan > Edit HTML > jangan lupa centang Expand Widget Template.

(Download Template Sobat terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan)

Langkah 3

Cari kode </b:skin> (Gunakan CTRL+F untuk mencarinya)

Langkah 4

Letakkan kode dibawah ini tepat diatas kode </b:skin>

.comment-wrap {clear: both;margin-bottom: 10px;float: right;width: 100%;}
.comment-head {margin: 0;width: 70px;float: left;}
.comment-avatar {margin: 0; float: left; vertical-align: middle;border: 1px solid #DDD;padding: 3px;background: white;width: 35px;height: 35px;}
.comment-reply {padding-top: 5px;}
.comment-reply a {
float:left;
border-top: 1px solid #828282;
background: #303436;
background: -webkit-gradient(linear, left top, left bottom, from(#636566), to(#303436));
background: -moz-linear-gradient(top, #636566, #303436);
padding: 5.5px 11px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 15px;
text-decoration: none;
vertical-align: middle;
}
.comment-reply a:hover {border-top-color: #494d4f;
background: #494d4f;
color: #ccc;}
.comment-entry
{
position: relative;
width: 100%;
margin-bottom: 40px;
margin-left: 65px;
background: #ddd;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2em 1.5em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
}
.comment-entry:before, .comment-entry:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.comment-entry:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.comment-arrow {display: block;width: 9px;height: 18px;background: url(http://2.bp.blogspot.com/-ZptHUP9mfW0/Tu-rQm3zoUI/AAAAAAAABTs/pyXUaMMWJgU/s1600/comment-arrow.gif) no-repeat;position: absolute;margin-left: -25px;}
.comment-info {margin-bottom: 5px;}
.comment-name {font-weight: bold;font-size: 14px;float: left;}
.comment-date {font-size: 12px;float: right;font-style: italic;color: #000; }
.comment-entry p {margin: 0;font-size: 15px;color: #666; margin-bottom: 10px; line-height:170%; }
.comment-pagenavi {font-size: 10px;text-transform: uppercase;color: #666;text-shadow: 1px 1px white;font-weight: bold;}
.comment-pagenavi a {color: #666;text-decoration: none;padding:10px;}
.comment-pagenavi a:hover {text-decoration: underline;}
.comment-pagenavi span {color: #888;background: white;padding: 4px;border: 1px solid #E0E0E0;}
.comment-delete (display: block;)

Langkah 5
Cari kode <b:includable id='comments' var='post'> Sampai </b:includable>

Langkah 6
Ganti semua kode diantara kode diatas dengan kode dibawah ini :

<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='comment-total'>1</span> comment
<b:else/>
<span id='comment-total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>

<div id='comment-reply_css'></div>

<div class='comment-pagenavi' id='comment-page'></div>

<div id='comment-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='comment-wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='comment-head'>
<div class='comment-avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='comment-reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=8912498603889145817&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>
<div class='comment-entry'>
<span class='comment-arrow'></span>
<div class='comment-info'>
<div class='comment-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='comment-date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='comment-pagenavi' id='comment-page_copy'></div>
<script type="text/JavaScript">
</script>
<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'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>

Simpan dan Lihat hasilnya

Jika langkah-langkah di atas diikuti dengan benar, maka hasilnya akan terlihat. Jangan Lupa untuk hapus kode css komentar default.

Selamat mencoba Happy blogging

Cara Menghapus Blog Secara Permanen | INFO PC

Kamis, 09 Februari 2012

Threaded Comments Elegant Blogspot

Tidak ada komentar:

Posting Komentar