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/AVvXsEhl0LypHu2H-wlaEHeD9LkGrrmYk2RoRzuxmuuXMsmJ4U_WJ0DzdwlkZSbb0EG48MDUokdQstzQITjZ8YyvNN15Dvt-XITrtTVHYp6dJ_MEVGEJIluDYNqx-9nW2v_4xeFynfg5NrqIG3Q/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/AVvXsEhpYdUICsBauBrfEo57xgJ_bg41jiYoHQx_Odh9jIZJ3bcllJQCSby2Ng3tFWUAj-8BqmDOvdRVoEhvfgYFP5-OGpqZq6tzCpmtUemc0Qyt7aB84meobkai4Pm-yTOEA-FO2C6dzeCEmjs/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 :
- Masih di edit template. Cari <b:includable id='comments' var='post'>
- 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'>.
- 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>
- 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/AVvXsEh8BqHFAHS7S-yY_jMEZhgM7pzZxbLd1Ezj_QgM2e8JYPtTjMG_l-qffixYbrYbFFeuLOfDZjKem4R3VMTUCMz33ive0RWzp9gbZRanuUB3dKMfMaci1Gk6lisagooVenfOfk87Q4cpTtk/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>5. Ganti IDBlog dengan kode ID blog anda yang tertera di adress bar browser anda
<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>
Langkah Ketiga:
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>
Last Words
Bagaimana? sangat mudah sekali bukan? Jika anda mengalamu kesulitan, anda dapat menuliskan komentar dibawah. Isyaallah akan saya balas. Sekian post tentang .Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata dan semoga tulisan ini dapat bermanfaat bagi anda :)
AD-BLOCKER DETECTED!
