Cara Merubah Tampilan Komentar Blogger - Part 1

April 14, 2012

Bismillah
Komentar merupakan salah satu interaksi pengunjung terhadap Admin yang biasanya bertujuan untuk menyampaikan; masukan, cacian, sanjungan maupun kebingungan.
Tapi apakan sobat terbersit untuk menghias tampilan komentar di blog sobat?, jika belum mungkin tampilan komentar ini akan menginspirasi sobat untuk modifikasi tampilan komentar tersebut, tidak percaya??? lihat gambar dibawah ini

Nah lo, gimana ada yang berminat? ini masih yang part 1 masih ada part 2, untuk yang part 2 nanti nyusul.

Cara Merubah Tampilan Komentar Blogger - Part 1

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;
outline: 1px solid #fff;
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_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;
border-radius: 20px 20px 20px 20px;
}
.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 16px 0 16px;
background: #F7F7F7;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
.cm_entry_a {
padding: 16px 16px 0 16px;background: #F7F7F7;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwBqXYOm7b1x2g-tdCGWJ0QyukdUbYtHOrqQwc5tbDo6dyQt2rEnTq_xFfO8SoseZIKfpGCayoJsD-0qoJmcRMuwMI3crVscGb8_OOs8XvytF07la7uDXR-zAQss5_FuevrXPNXVIevM/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
background-color: #F4F4F4;
padding: 5px;

}
.cm_info_a {
margin-bottom: 5px;
padding: 5px;
border-radius: 20px 20px 20px 20px;
}

.cm_name {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;
}
.cm_name_a {
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:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
margin-bottom: 10px;
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #fff;
font-size: 13px;
color: #333;
word-wrap:break-word;
border-radius: 0px 20px 20px 20px;
}
.cm_entry_a p {
margin-bottom: 10px;
background: url("http://congdongit.com.vn/images/misc/admin.gif") no-repeat right;
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #fff;
font-size: 13px;
color: #333;
word-wrap:break-word;
border-radius: 0px 20px 20px 20px;
}
.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;
}

Langkah 3
Setelah itu letakkan kode dibawah ini diatas kode </body>

Langkah 4
Lalu cari kode <b:includable id='comments' var='post'>

<b:includable id='comments' var='post'>
kode yang harus di ganti
</b:includable>

Jadi diantara kode <b:includable id='comments' var='post'> dan </b:includable> 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'>
<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 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'/>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_head'>
<div class='cm_avatar_a'>
<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>
</div>
<b:else/>
<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>
</div>
</b:if>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_entry_a'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<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>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
<b:else/>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

<b:else/>
<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<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>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
<b:else/>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:if>
</div>
</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>
</b:if>
</b:if>
</div>

Nah pada kode diatas sobat wajib mengganti tulisan __BlogID__ dengan ID Blog sobat

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

Karena banyak yang bertanya dan kebingungan pada langkah 4, nah untuk kali ini saya kasih kode lengkapnya biar tidak kebingungan

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

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

<data:post.commentRangeText/>

</span>

</b:if>

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

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

</b:if>

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

<data:comment.authorAvatarImage/>

</b:if>

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

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

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

<b:else/>

<p>

<data:comment.body/>

</p>

</b:if>

</dd>

<data:comment.timestamp/>

</a>

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

</span>

</dd>

</b:loop>

</dl>

</div>

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

<data:post.oldestLinkText/>

</a>

<data:post.olderLinkText/>

</a>

<data:post.commentRangeText/>

<data:post.newerLinkText/>

</a>

<data:post.newestLinkText/>

</a>

</span>

</b:if>

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

</b:if>

</p>

</b:if>

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

</iframe>

</div>

</b:if>

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

Semoga bermanfaat, selamat mencoba dan semoga berhasil

Labels: Blog Design

48 Komentar:

Muhammad Irham said on April 14, 2012 at 1:59 PM

Silahkan Berkomentar...:-q

Fahmi Athailla said on April 14, 2012 at 4:36 PM

nice info om...
tak praktekin dl :D

Muhammad Irham said on April 14, 2012 at 5:09 PM

@Fahmi Setiawanya silahkan di praktekin sob :-q

:)] jangan lupa besok ada Part 2 sob

Unknown said on April 14, 2012 at 5:28 PM

gue nunggu yang part duo aja :))

Muhammad Irham said on April 14, 2012 at 7:39 PM

@Emak Kruz=)) ok siap gan

Wahyu Galih said on April 14, 2012 at 9:57 PM

Contoh Komentar nya seperti yg ini ya ?

Muhammad Irham said on April 15, 2012 at 8:18 AM

@Wahyu Galih Adjibukan sob, diatas kan udah ada previw gambarnyanya

Unknown said on April 25, 2012 at 4:23 AM

gan, ko saya ada script yang gak ada, gimana dong ?? :((

Muhammad Irham said on April 25, 2012 at 2:37 PM

@Lutfi Ramadhanscript yang mana?, pada langkah berapa?

zewDsignet™ said on April 26, 2012 at 10:29 AM

Pusing ya bang`pda langkah 4 itu saya kurang paham..!! yg hrus di hapus ampe berapa code nya takut" code yang ga ada sangkut pautnya kena edit.... :(

Muhammad Irham said on April 26, 2012 at 3:59 PM

@Lunatic`Artjangan langsung edit gan, lebih baik di backup dulu kalau takut kenapa" dengan template agan(download template lengkap).

Anonymous said on April 28, 2012 at 3:07 PM

kk knp gk sama persis kya yag ini ahk....
"(Post a Comment" nya beda

Muhammad Irham said on April 28, 2012 at 6:57 PM

@kuringedanyang komen ini ane pake font dari google, kalo maksud agan model komentarnya yang beda berarti salah milih tutor, yang bener tutornya yang ini Cara Merubah Tampilan Komentar Blogger - Part 2

TheElement4Zero said on May 3, 2012 at 5:54 PM

gan gue bingung di yang langkah ke 5

Muhammad Irham said on May 4, 2012 at 2:17 PM

@TheElement4Zero coba sobat cari kode awalnya aja, karena ngak mungkin kalo cari kode lewat ctrl f terus dipaste kan semua, kemudian kalau sudah ketemu lihat kodenya dan di cocokkan kalau udah tinggal replace aja kodenya

Info Toko Surya62 said on May 6, 2012 at 11:28 PM

mantab Bos, tapi mumet

yandh said on June 1, 2012 at 1:42 PM

wahh ini yang saya cari2 gan..
ijin nyimak gan.. moga bisa diblog saya.. :D

Rebutan Rumah Gratis Semudah 1-2-3 said on June 4, 2012 at 10:04 PM

mksh ya,, berkunjung balik ya N jgn lupa tinggalin komentarnya dsini http://www.laskarcerita.com/2011/09/cerita-di-balik-12-lambang-zodiak.html

Limit Komputer said on June 5, 2012 at 12:44 PM

Ane bookmark dlu bru ane cba nnti ...

Jefry said on June 10, 2012 at 7:25 AM

Trims atas ulasannya, saya akan coba praktekkan di blogspot2 saya
sukses terus ya..

Doflamingo said on June 12, 2012 at 6:43 PM

Salam Kenal Om,kalo kita mau merubah isi buku tamu kita dengan coment dari hasil postingan kita Gimana Om???
Mohon bantuannya,trima kasih sebelumnya
http://agazsantiago.blogspot.com

Muhammad Irham said on June 13, 2012 at 4:58 AM

@Christiano Nino kayaknya ngak bisa, setahuku harus manual

JOENET said on June 14, 2012 at 4:49 PM

coba dulu ahhh

Hgs informasi said on June 16, 2012 at 1:13 PM

gan koq fotonya gk ada aku punya :(

Muhammad Irham said on June 16, 2012 at 2:05 PM

@Hamdan kalau komentar yg lama memang ngk ada fotonya gan, tapi kalo baru ntar kluar scr otomatis

Hgs informasi said on June 16, 2012 at 2:29 PM

kan aku sudah coba gan ...pake CSSnya agan punya tapi fotonya gk ada ,., mohon gan bantunnya :)

admin said on June 17, 2012 at 1:49 PM

gk ad perubahan ,,, nich silahkan berkunjung terima kasih http://adybakom.blogspot.com
mau coba part II thanks infonya

hasanphoto.blog said on June 21, 2012 at 8:35 PM

emot onion nya gag bs d blog ane gan :((

Anonymous said on June 25, 2012 at 5:49 PM

:-/ saya gak berhasil kk code gak ada di blog saya,.. mohon sulusi nya

Blogger Pemula said on July 8, 2012 at 1:50 PM

wah sob sudah ane praktekkan tutorial di atas, dan berhasil 100% tanpa kegagalan hehe :D terimakasih ya sob atas ilmunya... saya juga sudah follow blog sobat :)

agen obat said on July 10, 2012 at 2:37 PM

pusing juga gan kodenya banyak .....

Obat HIV AIDS said on July 10, 2012 at 2:39 PM

sangat menarik sekali infonya, buat para bloger yang lain .....

Cassanova In The Hoy~ said on July 13, 2012 at 8:37 PM

Thank's Sobat , sangat bermanfaat , sukses selalu bagi sobat .

berbagibung.blogspot.com

Obat terkena hiv aids said on August 3, 2012 at 11:23 AM

boleh juga buat di coba, mantap ....

id-herbal said on August 3, 2012 at 11:25 AM

sangat bermanfaat sekali infonya, sukses selalu gan ...

Unknown said on September 4, 2012 at 6:18 PM

This comment has been removed by the author.

Unknown said on September 4, 2012 at 6:20 PM

gan maksudnya langkah ke 5 itu
semua code di Hapus lalu di ganti sama yang agan suruh..

Unknown said on September 5, 2012 at 2:13 PM

gan mau tanya... kok pas saya mw reply orang lain nya kok not found si ya>>>?? tolong dong penjelasannya....

irvan kun blogz said on September 19, 2012 at 6:47 PM

makasih ya infonya,,

zzax said on September 20, 2012 at 12:07 PM

kalo cuma mau ganti font di form komentar gimana? aku uda coba gagal semua,

Bagas said on September 30, 2012 at 10:59 AM

Sudah saya coba, Gan !

Terima Kasih infonya

http://smadia.blogspot.com

Revoluzine said on October 22, 2012 at 2:39 PM

bisa kasih vidio ya engga??

Reno said on November 6, 2012 at 10:55 AM

thanks ya bro... saya copy script-nya

compressor said on December 6, 2012 at 10:23 PM

mumet baca script program nya

Artikel Blogger said on January 18, 2013 at 11:39 PM

Makasih Banget Gan Info nya,

Work 100% :D

Vpie ◥TwekzLibz◤ MahaDhifa said on January 26, 2013 at 8:08 PM

.. bagus juga nich ..

Hasan GMC said on October 4, 2013 at 11:01 AM

Manthap. Part 2 udah saya pasang di blog, masih nunggu part 3 dan seterusnya,.. biar nampak ga numpang di warna blog,.. usul yang transparant dong,.. makasih Sob.

Unknown said on January 17, 2014 at 3:40 PM

bang blog saya post komentarnya mode gpluscoment cara rubahnya gi mana ? ada yang tau gk agan?

koderator

Cara Merubah Tampilan Komentar Blogger - Part 1

April 14, 2012

48 Komentar:

Post a Comment