membuat kotak komentar keren blogspot

by Iffat Andriano - 10/04/2012

Cara Membuat Kotak Komentar keren dan elegant di Blog.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 blog saya, ya di bawah postingan ini

langsung saja tampa basa-basi, langsung iffat blogger 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/AVvXsEhaUhHbvob0W_RM3-hqzOFZR2serUjkGBTELcj-8nAnYMhoFaLSCpcoTg8CyXVFa9grnpbOuE6qpn0NmxGhMetjS443aCbm1ixg4A6y3XwelHUiZPwysCMbnWxIUXacFdnP_4f3oQIdixI/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 merah 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=1426758324012966946&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>

Jangan lupa: ganti ID BLOG yang telah saya tandai warna kuning dengan ID Blog milik sobat. Jika kesulitan untuk mendapatkannya, silahkan untuk memperhatikan gambar berikut

tanda warna kuning itu , ambil di halaman sobat,, ganti angka yang tadi berwarna kuning dalam script dengan code yang baru anda ambil dari url

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 :)

0 comments

Untuk menyisipkan kode pendek, gunakan ... KODE ...
Untuk menyisipkan kode panjang, gunakan ... KODE ...
Untuk menyisipkan gambar, gunakan ... URL GAMBAR ...

Rules :
-DONT SPAM
-DONT FLOOD
-DONT PORNO
-DILARANG NGEMIS/MINTA TEMPLATE IFFAT BLOGGER
-DILARANG BERKOMENTAR DENGAN KATA AGAN.
-BILA ANDA INGIN MENDAPATAKAN INFO YANG TERUPDATE GAME PC DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN DAN BERETIKA
-FOLLOW BLOG INI MAKA SAYA AKAN FOLLBACK

Iffat BLogger

membuat kotak komentar keren blogspot

0 comments

Yang Udah Mampir

About

LET’S BE FRIENDS

Kritik Dan Saran

Follow My Blog

Iffat BLogger

membuat kotak komentar keren blogspot

You May Also Like

0 comments

Yang Udah Mampir

About

LET’S BE FRIENDS

Kritik Dan Saran

Follow My Blog