Trick Computer: Cara Merubah Tampilan Komentar Di Blogger

Nah lo, gimana ada yang berminat

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/AVvXsEiOXgx_pzKNpMekzlM4Or5eKpvPuffG3A_2zBE3upd6ZJX6oB0MmajcQUwv41LCOzRDhGxK1DWLS2yUnxJ2ltkrSnb5-1a5fa-jSrlTfzYcO_OP3gxgngNtuzLHgN_vj_Bf_qoM6cxtQfs/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.......

Trick Computer

Cara Merubah Tampilan Komentar Di Blogger

0 komentar:

Lihat ↓

Mengenai Saya

Followers