Mbak Dhani Aja Deh: Cara Mengubah Komentar di Blogger

Selama ini ane bingung, gimana tuh cara bikin pos komentar yang baik trus banyak pengunjung..
Ane coba browshing di google dah.. Alhamdulillah ane nemuin blognya sahabat blogger yang keren deh..
Ane share disin ya.. Moga aja bisa manfaat buat agan-agan semua.. Amin..
Tampilan pos komentarnya ntar kayak gini gan..

Trus, bentuk awal buat ngeposting komentar kayak gini nih tampialnnya gan..

Klo agan mau nyoba ngasih komentar, silakan deh gan.. dibawah udah ane sediain, wadah buat komentar agan-agan semua.. ada tulisan Poskan Komentar kayak yang ane lingkarin .. trus tulis komentar di kotak yang ane kasih anak panah di atas tuh gan..

Diantara agan-agan pasti ada yang penasaran, gimana tuh bikinnya..

nih.. ane kasih tau..

Cara Merubah Tampilan Komentar Blogger

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"

Langkah 2
Gunakan ctrl-f dan letakan kode CSS dibawah ini sebelum kode: ]]></b:skin>

/* 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/AVvXsEj8AAR3i8TQHR7Ap0gvZNXS0Fm-Vi4lioLZpJsV6CnVFuMxNt1kPpPO-3sViGcuXao1vcreZJd4o3GQVN5fAdajeEUGTax8PvtccOW1s9qXCKJS1AHg76fWNuotPS4Ob2gbAKYEyIY3ITI/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/AVvXsEj7YYb28Yq03ntVfErvbYXQrHMN3KCgh3P8k8YC0lLlRaKov4KVGQ9qu9h_4wWfLCKgRXI9uToSYHOxtOQViHK6_KlRTRYygIoCxNgK-5Zx3iRKFCWTtgB66kQFEluc5T3L-fI4prlF_PE/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;
}

Langkah 3

Setelah itu taruh kode dibawah ini 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 4

Langkah ini merupakan langkah penerapan Emoticon, jika sobat tidak ingin memasang emoticon pada komentar sobat maka hiraukanlah langkah ini.

Cari kode <h4 id='comment-post-message'><data:postCommentMsg/></h4>
dan letakkan kode berikut dibawahnya

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

Yang di Blok Biru merupakan lebar wadah emoticon, jadi sesuaikanlah dengan lebar blog sobat

Langkah 5

Lalu cari kode

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

<div class='comments' id='comments'>

<a name='comments'/>

<b:if cond='data:post.allowComments'>

<h4>

<b:if cond='data:post.numComments == 1'>

1 <data:commentLabel/>:

<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>:

</b:if>

</h4>

<b:if cond='data:post.commentPagingRequired'>

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>

 

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>

 

<data:post.commentRangeText/>

 

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>

 

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>

</span>

</b:if>

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p>

<data:comment.body/>

</p>

</b:if>

</dd>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

</div>

<b:if cond='data:post.commentPagingRequired'>

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>

<data:post.oldestLinkText/>

</a>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>

<data:post.olderLinkText/>

</a>

 

<data:post.commentRangeText/>

 

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>

<data:post.newerLinkText/>

</a>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:post.newestLinkText/>

</a>

</span>

</b:if>

<p class='comment-footer'>

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

</p>

</b:if>

<b:if cond='data:showCmtPopup'>

<div id='comment-popup'>

<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>

</iframe>

</div>

</b:if>

<div id='backlinks-container'>

<div expr:id='data:widget.instanceId + "_backlinks-container"'>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

</b:includable>

Untuk kode yang saya blok merah merupakan batas menghapus kodenya.

Ingat !!! Setiap template mungkin beda kode

Jadi diantara kode dan ada sebuah kode yang agak relatif panjang dan kode tersebut harus diganti 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'>

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

</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=__BlogID__&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>

<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'>

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

<p><data:comment.body/></p>

<span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>

</dd>

</b:if>

</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>

</div>

Hal ini sangat penting, pada langkah 5 cari tulisan __BlogID__ dan ganti tulisan tersebut dengan BlogID sobat

Langkah 6

Kemudian cari kode seperti dibawah ini

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

Biasanya ada 4 kode yang serupa dengan kode di atas, maka dari itu ganti semua kode tersebut dengan kode ini

<b:include data='post' name='comments'/>

langkah Terakhir
Klik Simpan Template

Update..!!!

sumber : http://koderator.blogspot.com/2012/04/cara-merubah-tampilan-komentar-blogger_15.html

+ sahabat + 6 sahabat

Unknown

9 Januari 2013 pukul 12.00

aq di kongkon coment karo sing nduwe blog ;;)

Terimakasih Unknown atas Komentarnya di Cara Mengubah Komentar di Blogger - Ngasih Coment

Kusuma Wardhani Mas'udah

9 Januari 2013 pukul 17.48

@aghuzt harrie hehe..terpaksa banget ceritanya nih.. =((

9 Januari 2013 pukul 22.28

mau coment ciyus nih.
secara SEO judulnya cemen banget yak.:-t
kalo cara coment mah smua uda pda ngerti. :|
trus kalo bisa comentnya yang pake ajax dunk byar gak reload2 mulu. 8-}