Tutorial ini saya dapat dari beberapa sumber, dan pada posting saya yaitu cara membuat komentar blogspot seperti wordpress sudah saya sebutkan satu persatu sumbernya disana, dan saya salin ulang kesini dengan maksud hanya ingin berbagi / sharing saja kepada sobat blogger supaya mempunyai tampilan kotak komentar seperti wordpress ini.
Karena template hack seperti ini memerlukan banyak penghapusan pada bagian - bagian penting blog, saran saya adalah untuk back-up template dulu, jika belum tau caranya silahkan baca posting saya yang ini : Cara aman mengedit template blog.
Baiklah langsung saja kita kepada cara membuat nya.
Login blogger, masuk ke rancangan . Edit HTML, centang Expand template widget dan temukan kode ]]></b:skin> lalu paste kode ini di atasnya:
- /* Main Comment
- -----------------------------------------------*/
- #comments h4 {
- font-size: 24px;
- font-weight: normal;
- margin: 20px 0;
- }
- .cm_wrap {
- clear: both;
- margin-bottom: 10px;
- float: right;
- width: 100%;
- }
- .cm_head {
- margin: 0;
- width: 70px;
- float: left;
- }
- .cm_avatar {
- margin: 0;
- vertical-align: middle;
- border: 1px solid #DDD;
- padding: 3px;
- background: white;
- 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;
- }
- .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;
- background: #F7F7F7;
- border: 1px solid #E4E4E4;
- overflow: hidden;
- }
- .cm_arrow {
- display: block;
- width: 9px;
- height: 18px;
- background: url(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) no-repeat;
- position: absolute;
- margin-left: -25px;
- }
- .cm_info {
- margin-bottom: 5px;
- }
- .cm_name {
- font-weight: bold;
- font-size: 12px;
- float: left;
- }
- .cm_date {
- font-size: 10px;
- float: right;
- font-style: italic;
- color: #CCC;
- }
- .cm_entry p {
- margin: 0;
- font-size: 13px;
- color: #666;
- }
- .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;
- }
CAUTION : Setelah anda paste kode diatas, anda juga harus menghapus section css comments di blog anda. biasanya mempunyai kode awalan seperti ini #comments
Selanjutnya cari kode </body> dan paste kode ini tepat di atasnya:
<script src='http://caraonline.googlecode.com/files/caraonline.blogspot.com.js' type='text/javascript'/>
Sekali lagi saya ingatkan untuk back-up template anda sebelum terjadi hal-hal yang di inginkan.
Baca baik-baik langkah terkhir ini, cari kode <b:includable id='comments' var='post'> dan hapus kode di bawahnya sampai menemukan kode </b:includable> yang kira-kira terletak diatas kode <div id='backlinks-container'> atau dekat dengan <div id='sidebar-wrapper'> ( ini struktur kode di blog saya ya ). kode yang di hapus ini adalah kode HTML untuk komentar. dan ganti seluruh kode yang di hapus tadi dengan kode di bawah 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>
<div class='cm_pagenavi' id='cm_page'></div>
<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=478857210420619544&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='cm_entry'>
<span class='cm_arrow'></span>
<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>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'></div>
<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>
NB: Ganti blog ID yang saya tandai dengan warna merah.
Save template dan lihat hasilnya.
Semoga berhasil :)
Jika anda masih belum juga berhasil atau ingin memberi warna yang berbeda pada komentar seperti wordpress ini, silahkan baca posting saya yang yang sudah saya sebutkan diatas tadi berjudul Cara membuat komentar blogspot seperti wordpress, dari sana mungkin anda akan mendapatkan pencerahan dari para ahlinya langsung.
Selamat mencoba dan semoga impian anda mempunyai
komentar admin seperti di
