Cara memasang tombol reply komentar pada blog

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Berikut adalah tutorial untuk menampilkan tombol reply pada komentar di blog selain itu juga dilengkapi dengan tampilan komentar akan menjadi lebih cantik dan menarik, berikut tutorial untuk menampilkan tombol reply komentar dan mempercantik kotak komentar pada blog.

1. Masuk ke dashboard -> Desain-> Edit HTML
2. Klik pada "Expand Template Widget"
3. Cari "Ctrl + F" dan menemukan ]]></b:skin>. Letakkan kode di bawah ini sebelum 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: white;

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(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) 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;

}

4. Kemudian letakkan kode dibawah ini sebelum :

5. Langkah terakhir adalah untuk mencari kode berikut:

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

baris kode yang Anda harus diganti

</ B: includable>

... dan ganti baris kode antara yang includable dengan kode dibawah ini:

<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=ID BLOG&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>

PENTING: Ganti tulisan warna merah dengan nomor ID BLOG anda sendiri.

Simpan template dan lihat hasilnya.

1. Good Girl
2. D'MASIF -sudah perih ini
3. Haney Bunny Sweety-G-String.mp3
4. ARMADA-Mau Dibawa Kemana.mp3
5. Ayang Ayangku.mp3
6. Tak Semestinya Kita Berpisah (TSKB).mp3
7. When The Children Cry - White Lion.mp3

HUGGENG|CYBER

Selasa, 25 Oktober 2011

0 Cara memasang tombol reply komentar pada blog

0 komentar:

Catatan HUGGENG|CYBER

Sekilas Tentang Admin

Follow HUGGENG|CYBER

.

Telusuri

Label

Daftar Isi

Total Pengunjung

Disqus for HUGGENG|CYBER

Trending Topic

Followers

Translate

Test Footer

Test Footer 1

Information

Recent Posts

Tentang Saya

Postingan Populer