Artikel, Trick & Tips, Tutorial, Download: Cara Membuat Kotak Komentar Keren Di Blog

Cara membuat kotak komentar keren di Blog memang sangat mudah. Kotak komentar keren dapat membuat pengunjung lebih suka dan ingin berkomentar di blog anda.

Kotak komentar yang akan saya bahas kali adalah kotak komentar wordpress untuk blogspot yang memiliki tombol reply dan tombol hapus, disertai juga foto pemberi komentar dan juga tanggal komentar dipublish. Dengan memiliki fasilitas tersebut, kotak komentar akan terlihat sangat keren dan elegant.

Sebelum membahas ke tutorial, sebaiknya lihat terlebih dahulu demo tampilan kotak komentar keren ini...

Jadi, mari kita bahas saja cara membuat kotak komentar keren di blog ini..

Cara Membuat Kotak Komentar Keren Di Blog

Login ke akun blogger anda
Masuk ke menu TEMPLATE
Klik Edit HTML
Cari kode ]]></b:skin>
Silahkan copy kode berikut diatas kode ]]></b:skin>


#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-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
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: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN-_ab9OhH37j7z4A4uXh0U_xj1FTTFRUzc16YePN7sRthZ8N2OnonOxoSaULbvaBTapCGlPIxGSH-u1P89B5VP2XTbpS9PtoXDyErtaprsy1Zb62ayu5vT7MXfTvZH7vKqLF2Zi8oQEk/s1600/comment-arrow.gif) 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;
}

Cari kode </body>
Letakkan kode berikut diatas kode </body>

Cari kode <b:includable id='comments' var='post'>, untuk mempermudah silahkan lihat berikut..

<b:includable id='comments' var='post'>

Kode yang harus anda ganti

</b:includable>

Di bagian teks yang berwarna merah diatas, silahkan ganti dengan kode berikut..

<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=154513103004606848&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>
</div>

Silahkan klik SIMPAN TEMPLATE

Perhatian : Silahkan ganti BlogID diatas yang sudah saya blok kuning dengan kode blogID anda.

Bagaimana Cara Mengetahui BlogID?

Mudah saja, silahkan ikuti langkah-langkah berikut..

Login ke akun blogger anda
Masuk ke menu TEMPLATE
Lihat di bagian URL pada browser

http://www.blogger.com/blogger.g?blogID=7404786441715419210#template/src=dashboard

Yang saya beri warna merah adalah letak kode BlogID blog anda..

OK, silahkan lihat hasilnya.. Jika ada kesulitan, silahkan tanyakan di kotak komentar dibawah. Semoga artikel ini bermanfaat untuk anda..

Artikel, Trick & Tips, Tutorial, Download

Menu

Cara Membuat Kotak Komentar Keren Di Blog - Dijamin super keren!!

Cara Membuat Kotak Komentar Keren Di Blog

Bagaimana Cara Mengetahui BlogID?