Cara Merubah Tampilan Komentar jadi keren Blogger V1

Bismillah
Komentar merupakan salah satu interaksi pengunjung terhadap Admin yang biasanya bertujuan untuk menyampaikan; masukan, cacian, sanjungan maupun kebingungan.
Tapi apakan sobat terbersit untuk menghias tampilan komentar di blog sobat?, jika belum mungkin tampilan komentar ini akan menginspirasi sobat untuk modifikasi tampilan komentar tersebut, tidak percaya??? lihat gambar dibawah ini

Nah lo, gimana ada yang berminat? ini masih yang part 1 masih ada part 2, untuk yang part 2 nanti nyusul.

Cara Merubah Tampilan Komentar Blogger - V1

Langkah 1

Langkah 2

Gunakan ctrl-f dan letakan kode CSS dibawah ini sebelum kode: ]]></b:skin>

/* Comments ----------------------------------------------- */ #comments h4 { font-size: 18px; font-weight: normal; margin: 20px 0; } .cm_wrap { clear: both; margin-bottom: 10px; float: right; width: 100%; } .cm_head { margin: 0; width:60px; float: left; } .cm_avatar { margin: 0; vertical-align: middle; outline: 1px solid #fff; border: 1px solid #ddd; padding: 3px; background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg); background-position:center; background-repeat:no-repeat; width: 35px; height: 35px; } .cm_avatar_a { margin: 0; vertical-align: middle; border: 1px solid #ddd; padding: 3px; background:#c6e5f7; background-position:center; background-repeat:no-repeat; width: 35px; height: 35px; } .cm_reply { padding-top: 5px; } .cm_reply a { display: inline-block; margin: 0; padding: 1px 6px; border: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; border-radius: 20px 20px 20px 20px; } .cm_reply a:hover { text-decoration: none !important;; background: #ccc;; background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));; background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; } .cm_entry { padding: 16px 16px 0 16px; background: #F7F7F7; overflow: hidden; border-radius: 20px 20px 20px 20px; } .cm_entry_a { padding: 16px 16px 0 16px;background: #F7F7F7; overflow: hidden; border-radius: 20px 20px 20px 20px; } .cm_arrow { display: block; width: 9px; height: 18px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJ4ccwd1vxx2ioUJCay9bWsmdCK2wFvbojatMshDVbimhTGz4L5trYD13beuVmgd56qQjHor7smWz9Edgach-ZAfi0hYgijL6e5uBTdAbf5cl9DJba3jWokav3sbYhuULQ6nPFhJUbKw/s1600/comment-arrow.gif) no-repeat; position: absolute; margin-left: -25px; } .cm_info { margin-bottom: 5px; background-color: #F4F4F4; padding: 5px; } .cm_info_a { margin-bottom: 5px; padding: 5px; border-radius: 20px 20px 20px 20px; } .cm_name { font-family:"Francois One"; font-size: 14px; color: #666666 !important; text-decoration:none; font-weight: 250; float: left; } .cm_name_a { font-size: 14px; color: #666666 !important; text-decoration:none; font-weight: bold; float: left; } .cm_date { font-size: 10px; color: #999; text-decoration:none; float: right; } .cm_date_a { font-family:"Francois One"; font-size: 10px; color: #2D5E7B; text-decoration:none; float: right; padding-top:5px; } .cm_entry p { margin-bottom: 10px; padding: 5px; clear: both; border: thin solid #E6E6E6; background-color: #fff; font-size: 13px; color: #333; word-wrap:break-word; border-radius: 0px 20px 20px 20px; } .cm_entry_a p { margin-bottom: 10px; background: url("http://congdongit.com.vn/images/misc/admin.gif") no-repeat right; padding: 5px; clear: both; border: thin solid #E6E6E6; background-color: #fff; font-size: 13px; color: #333; word-wrap:break-word; border-radius: 0px 20px 20px 20px; } .cm_pagenavi { font-size: 10px; text-transform: uppercase; color: #666; text-shadow: 1px 1px white; font-weight: bold; } .cm_pagenavi a { color: #666; text-decoration: none; padding:10px; } .cm_pagenavi a:hover { text-decoration: underline } .cm_pagenavi span { color: #888; background: white; padding: 4px; border: 1px solid #E0E0E0; }

Langkah 3
Setelah itu letakkan kode dibawah ini diatas kode </body>

<script type="text/javascript"></script>

Langkah 4
Lalu cari kode <b:includable id='comments' var='post'>

<b:includable id='comments' var='post'>
kode yang harus di ganti
</b:includable>

Jadi diantara kode <b:includable id='comments' var='post'> dan </b:includable> ada sebuah kode yang agak relatif panjang dan kode tersebut harus diganti 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='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</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'/>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_head'>
<div class='cm_avatar_a'>
<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=__BlogID__&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:else/>
<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=__BlogID__&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>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_entry_a'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<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>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
<b:else/>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

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

Nah pada kode diatas sobat wajib mengganti tulisan __BlogID__ dengan ID Blog sobat

Langkah 5
Kemudian cari kode seperti dibawah ini

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

Biasanya ada 4 kode yang serupa dengan kode di atas maka dari itu ganti semua kode tersebut dengan kode ini

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

Langkah Terakhir
Klik Simpan Template

karena saya takut dilangkah ke-4 banyak yg ngk tau/kerbngungan ,nah saya kasih kode lengkapnya biar tidak kebingungan

<b:includable id='comments' var='post'>

<b:if cond='data:post.allowComments'>

<h4>

<b:if cond='data:post.numComments == 1'>

1 <data:commentLabel/>:

<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>:

</b:if>

</h4>

<b:if cond='data:post.commentPagingRequired'>

<data:post.commentRangeText/>

</span>

</b:if>

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.favicon'>

</b:if>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

<b:if cond='data:comment.authorUrl'>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<b:if cond='data:comment.isDeleted'>

<b:else/>

<p>

<data:comment.body/>

</p>

</b:if>

</dd>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

</div>

<b:if cond='data:post.commentPagingRequired'>

<data:post.oldestLinkText/>

</a>

<data:post.olderLinkText/>

</a>

<data:post.commentRangeText/>

<data:post.newerLinkText/>

</a>

<data:post.newestLinkText/>

</a>

</span>

</b:if>

<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'>

</b:if>

</p>

</b:if>

<b:if cond='data:showCmtPopup'>

</iframe>

</div>

</b:if>

<b:if cond='data:post.showBacklinks'>

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

</b:if>

</div>

</b:includable>

Untuk kode yang saya blok merah merupakan batas menghapus kodenya.

Semoga bermanfaat, selamat mencoba dan semoga berhasil.......

Navbar

Search This Blog

Wednesday, December 26, 2012