Merubah Tampilan Komentar Standar Menjadi Keren

Oke, jika anda tertarik.. Berikut step-stepnya:

Langkah Pertama :

Masuk ke akun Blogger anda
Masuk ke Template > Edit HTML
Cari kode ]]></b:skin> dan simpan kode dibawah tepat diatasnya

/* 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;
border: 1px solid #DDD;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJjRJYjV4JsyhVBxQRRWm6aw3Atvh2bP9ZzwGL6Yo6qM-p1iLBx3HNd5iidd6GmtlQUAXtsOkDJU5Od_OT33KmWgk5D7SlplFPVwMbmqyXJQZQIejP0zTlowz4e7hXL3plOPEx28X6YQE/s1600/takdikenal.jpg) center 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;
}
.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: #fcfcfc;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1WRsS9jpmuosYtSr1MN1DRiOHFmHili4Dtu1Cm7jVxs0nISwXAt-2QHbDu0Zvz8HafEBLYCl5KfrV-7wQ4gWMYbSOjfseUB_dMDF2ryUnKd3_o-nMV8q8nNikoCxf9-3AvYNoLh3DXFY/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_name_a {
font-family:"Comic Sans MS", cursive;
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:"Comic Sans MS", cursive;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.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;
}
/* Comment Admin */
.comment-body-author {
font-family:"Comic Sans MS", cursive;
font-weight: 300;
}

Anda juga dapat menyimpannya dengan cara menghapus / replace kode Comment bawaan blog anda dengan kode diatas

Langkah Kedua :

1. Masih di edit template. Cari <b:includable id='comments' var='post'>

2. Di halaman edit Template yang baru, anda akan melihat tanda panah kecil disebelah kiri lembar edit template. Klik tanda panah tersebut dan akan muncul isi dari <b:includable id='comments' var='post'>.

3. Disitu akan ada ending dari kode <b:includable id='comments' var='post'> yang berupa </b:includable>. Nah, sekarang hapus semua kode yang berada diantara kode <b:includable id='comments' var='post'> dan </b:includable>

4. Setelah terhapus. Masukan kode dibawah ini diantara kedua kode tadi

<div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments > 0'><a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a> <b:if cond='data:post.numComments == 1'> <span id='cm_total'>1</span> <data:commentLabelPlural/> <b:else/> <span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/> </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'/> <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=IDBlog&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 cond='data:comment.author == data:post.author'> <dd class='cm_entry'> <span class='cm_arrow'/> <div class='cm_info_a'> <div class='cm_name_a'> <b:if cond='data:comment.authorUrl'> <img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh803oXsp2NBmddPqyRqF4hjmvTN4E6PIIz37jTANnzI9IKuUuHlF4QHSURxFSb8FjX_f1JFg5EhCl1UD4U8PD4iyGz7bFuwBBVEAJ5rjoR08bU6eAJvSKLcLNH6KQIjo2F4gbQW4t8y98/s1600/adminstar.png' title='Admin' width='20px'/> <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_a'> <data:comment.timestamp/> <b:include data='comment' name='commentDeleteIcon'/> </div> <div class='clear'/> </div> <div class='comment-body-author'> <p><data:comment.body/></p> </div> </dd> <b:else/> <dd class='cm_entry'> <span class='cm_arrow'/> <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> <span style='text-align:center; font-size:9px; color:#C0C0C0;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span> </dd> </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>

5. Ganti IDBlog dengan kode ID blog anda yang tertera di adress bar browser anda

Langkah Ketiga:

1. Cari kode seperti ini :

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

Ganti dengan kode ini :

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

Langkah Keempat (memasang script emoticon) :

Setelah itu taruh kode dibawah ini tepat diatas kode </body>

<b:if cond='data:blog.pageType == "item"'><script src='http://koderator.googlecode.com/files/comment.js' type='text/javascript'/><script src='http://koderator.googlecode.com/files/emoticon_wp2.js' type='text/javascript'/></b:if>

Langkah Kelima (memasang emoticon di atas komentar) :

Simpan kode dibawah ini tepat dibawah kode <b:if cond='data:post.embedCommentForm'>

<div style='width:550px;text-align: center;border: 1px solid #ccc;padding: 2px 2px;margin-top: 15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'> <b><img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/70bff581.gif' width='30'/>:)) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/069.gif' width='30'/>;))<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_104_.gif' width='30'/>;;) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_113_.gif' width='30'/>:D <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4412144b.gif' width='30'/>;) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_101_.gif' width='30'/>:p <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/33c4b951.gif' width='30'/>:(( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_059_.gif' width='30'/>:) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/875328cc.gif' width='30'/>:( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/6f428754.gif' width='30'/>:X <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_087_.gif' width='30'/>=((<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/e111de78.gif' width='30'/>:-o <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/efb50fe2.gif' width='30'/>:-/ <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_106_.gif' width='30'/>:-* <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/023.gif' width='30'/>:| <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/5c745924.gif' width='30'/>8-} <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/037.gif' width='31'/>:)] <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/042.gif' width='30'/>~x( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/87a4e689.gif' width='30'/>:-t <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/047352f3.gif' width='30'/>b-(<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_116_.gif' width='30'/>:-L <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4d6161fd.gif' width='30'/>x( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/d5f02ecd.gif' width='30'/>:-q <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/071.gif' width='30'/>=)) </b> </div>

Yang di Blok Biru merupakan lebar wadah emoticon, jadi sesuaikanlah dengan lebar blog anda.

0 komentar:

Posting Komentar

Berkomentarlah :

1.Dengan kata-kata yang sopan
2.Tidak menaruh link aktif ataupun non aktif
3.No spam, no sara, and no porn
4.Tidak promosi blog
5.Komentar yang tidak sesuai dengan isi konten akan langsung saya hapus
6.Komentar yang bagus akan saya publish dan saya beri komentar balik