membuat kotak komentar keren

Beberapa waktu yang lalu tepat ketika saya sedih melihat kotak komentar saya yang ga menarik.. saya search di google cara-caranya dan saya mendapat kannya.. yang terbaik simple dan menarik..

semenjak saya memakai kotak komentar seperti ini.. langsung banyak sekali yang menanyakan caranya.. makanya gema share sekarang..
Penasaran bagaimana hasilnya?
Silahkan lihat di bawah ini :

langsung saja tampa basa-basi, langsung gema share aja dah:

1. Silahkan login ke Blogger anda

2. Klik "design" atau "rancangan"

3. Jangan lupa untuk mencentang kotak "expand widget templates"

4. Silahkan untuk meletakkan kode CSS berikut di atas 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/AVvXsEiT4YYL934S6kkgZtrwTQAww8-rgM65sNVBeK_3V-9C1bAvTAaByZeAStuRBZaoSoN3pZmikm40Twh6U-6XX7AUqswZdAv6a_SexpkeszfCZhGDwNzI_c1p204ys1c8E2Wu4TdyH4sbslo/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;
}

5. Letakkan script berikut di atas kode tag </body>

perhatikan kode berikut...cari kode <b:includable id='comments' var='post'> untuk memper mudah

<b:includable id='comments' var='post'>
Kode yang harus sobat ganti...
</b:includable>

lalu, ganti kode warna biru dengan:

<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=1822109849466087591&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>

Keterangan :

ganti kode 1822109849466087591 dengan ID Blog Anda ....

Selesai deh... gimana berhasil.. klo masih gagal tenang, dengan cara ini pasti langsung berhasil
cari kode tsb:

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

lalu timpa kode tsb dengan ini <b:include data='post' name='comments'/>
sukses kan.. aslinya cape buat postingan ini.. tolong di hargai ya :)

2 komentar

Click here for komentar

Oktariandi

13/10/12 8:15 PM ×

wow! menurutku sih ribet, ada yg lebih mudah gak?

Balas

admin

kamar-rofie

28/4/13 2:35 PM ×

ribet gan

Komentar yang menyertakan iklan, atau titip link, akan dimasukan ke Folder SPAM.

Untuk pertanyaan di luar Topik Artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas). Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

^_^

=)D

|o|

@@,

;)

:-bd

:-d

:ng

Terima kasih sudah berkomentar