- Pertama login ke blog kamu > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
- Cari kode CSS Comment yang lama, kalau CSS punya Kamu Klik sih seperti dibawah ini.
#comments h4 {
color:#666666;
font-weight:normal;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
font-size:14px;
text-transform:none;
}
#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}#comments-block .comment-author{background:#e0dede;border-top:1px solid #ddd;margin:.5em 0;padding-left:0px;color:#111}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-body{padding-left:0px;color:#333}#comments-block .comment-footer{padding-left:0px;margin:.25em 0 2em;line-height:1.5em;font-size:9px;border-top:1px solid #ddd}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:justify;margin:0 1em .75em;padding-left:5px;border-left:3px solid #f0f0f0}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic; color:gray}.owner-Body{padding-left:0px;color:#333}.owner-Body p{text-align:justify;margin:0 1em .75em;padding-left:5px;background:#f5f5f5;border-left:3px solid #ddd}
#blog-pager-newer-link {
float:left;
}
Tapi yaa biasanya tiap template berbeda-beda bukan ? Jadi yaa kamu cari sendiri kode CSS komentar kamu versi template blog kamu - Kamu hapus semua kode CSS komentar yang lama versi template blog kamu, lalu kamu copy kode dibawah diatas kode ]]> (untuk menemukan kode yang dicari kamu tinggal CTR + F, lalu masukan kode yang ingin dicari.)
#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,#eee),color-stop(1,#ccc)); ; background:-moz-linear-gradient(center top,#eee 20%,#ccc 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} - Setelah itu kamu cari kode </body>, setelah itu pastekan kode dibawah diatas kode </body>
- Kemudian kamu cari kode <b:includable id='comments' var='post'> , Hapus kode antara kode <b:includable id='comments' var='post'>sampai dengan </b:includable> (kode yang berwarna biruyang harus didelete)
Contoh :
<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> - 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'>
<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=ID BLOG KAMU&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=450,height=450"); 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>
</div>
- Sehingga hasilnya Jadi 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'>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=ID BLOG KAMU&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=450,height=450"); 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>
</div>
</b:includable>
Keterangan:
- Ganti Tulisan ID BLOG KAMU dengan ID blog kamu, misal: 3867899460670236687 (untuk mengetahui ID blomu, kamu bisa lihat deretan angka pada address bar pada saat membuka halaman Edit HTML.
- Kalau sudah selesai semua, kamu klik Save, Lalu lihat hasilnya deh ^^
sumber: http://kamu-klik.blogspot.com
No comments:
Post a Comment