Cara Membuat Kotak Komentar Keren Di Blog, Dijamin super keren!!

Cara membuat kotak komentar keren di Blog memang sangat mudah. Kotak komentar keren dapat membuat pengunjung lebih suka dan ingin berkomentar di blog anda.

Kotak komentar yang akan saya bahas kali adalah kotak komentar wordpress untuk blogspot yang memiliki tombol reply dan tombol hapus, disertai juga foto pemberi komentar dan juga tanggal komentar dipublish. Dengan memiliki fasilitas tersebut, kotak komentar akan terlihat sangat keren dan elegant.

Sebelum membahas ke tutorial, sebaiknya lihat terlebih dahulu demo tampilan kotak komentar keren ini...

Jadi, mari kita bahas saja cara membuat kotak komentar keren di blog ini..

Cara Membuat Kotak Komentar Keren Di Blog

Login ke akun blogger anda
Masuk ke menu TEMPLATE
Klik Edit HTML
Cari kode ]]></b:skin>
Silahkan copy kode berikut diatas 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(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/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;
}

Cari kode </body>
Letakkan kode berikut diatas kode </body>

Cari kode <b:includable id='comments' var='post'>, untuk mempermudah silahkan lihat berikut..

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

Kode yang harus anda ganti

</b:includable>

Di bagian teks yang berwarna merah diatas, silahkan ganti dengan kode berikut..

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

Silahkan klik SIMPAN TEMPLATE

Perhatian : Silahkan ganti BlogID diatas yang sudah saya blok kuning dengan kode blogID anda.

Bagaimana Cara Mengetahui BlogID?

Mudah saja, silahkan ikuti langkah-langkah berikut..

Login ke akun blogger anda
Masuk ke menu TEMPLATE
Lihat di bagian URL pada browser

http://www.blogger.com/blogger.g?blogID=7404786441715419210#template/src=dashboard

Yang saya beri warna merah adalah letak kode BlogID blog anda..

OK, silahkan lihat hasilnya.. Jika ada kesulitan, silahkan tanyakan di kotak komentar dibawah. Semoga artikel ini bermanfaat untuk anda..

26 Responses to "Cara Membuat Kotak Komentar Keren Di Blog, Dijamin super keren!!"

Blank Blank20 August 2013 at 08:38
Tak ada perubahan mas brow.
semuanya suda aku ikuti secara detaill..
Ma'ruf Hidayat22 August 2013 at 22:32
@ Blank

Saya sudah coba di blog saya yang lain, dan teman-teman lainnya juga sudah coba dan berhasil. Mungkin anda salah melakukannya.. Atau mungkin anda belum menghapus kotak komentar yang dulu?
Mbok Jamu Paling Ayu5 September 2013 at 01:44
Ada gak gan tutorial memasang kotak komentar Facebook di blog? Ane masih bingung cara masangnya gmn. :(
Ma'ruf Hidayat5 September 2013 at 04:35
@ Mbok Jamu

Nanti akan saya publish di blog ini.
Unknown18 September 2013 at 05:01
gan pas saya coba hilang kotak komentar blog saya gan tolong bantuannya....!
Ma'ruf Hidayat18 September 2013 at 05:13
@ Sakawal

Maaf, hilang kotak komentarnya maksudnya bagaimana?
Unknown23 September 2013 at 02:48
ternyata template saya nggak cocok gan tapi stelh saya ganti dengan template yang baru berhasil gan
Unknown24 September 2013 at 00:43
gan saya scrool ke bwah kan ikut tanda panahnya bergerak dan pas saya balas muncul window baru
Ma'ruf Hidayat24 September 2013 at 04:13
@ Saka

Ya memang seperti itu, windows baru itu muncul kalau di klik tombol reply.. Semoga bermanfaat..
Admin27 September 2013 at 23:07
Yang Terakhir Di Taruh Dimana ? id='comments' var='post'>
Javier Renaldi7 October 2013 at 03:54
saya mau nanya..
yg di tulisan berwarna merah yg di ganti apanya ya?
Ma'ruf Hidayat7 October 2013 at 03:55
@ Javier

Silahkan ganti teks warna merah..

< b:includable id='comments' var='post'>
Kode warna merah yang harus anda ganti
< /b:includable>
Unknown10 October 2013 at 01:56
TEMPLATE ERROR: Invalid data reference post.allowComments: No dictionary named: 'post' in: ['blog', 'skin', 'view']
kalo kluar kaya gtu di blogspotnya , gmn caranya ya bro ? mohon solusi
Unknown12 October 2013 at 04:52
masa saya ga bisa sih ? ada yang salah aau gmana ya ? waktu saya simpan template ada tulisan merah bgini "Kesalahan saat mengurai XML, baris 2384, kolom 36: XML document structures must start and end within the same entity."
Ma'ruf Hidayat12 October 2013 at 05:28
@ Untuk semua

Bagi yang masih gagal dalam memasangnya, nanti saya akan melakukan test ulang. Jika ternyata saya gagal juga, nanti saya akan mengganti dengan model kotak komentar keren yang lain.. Thanks
Obat susah menelan2 December 2013 at 19:23
Saya ucapkan terimakasih banyak atas informasi 2 yang telah anda sampaikan nya kepada kami,, kami akan selalu menyimak informasi informasi yang anda sampaikan.
Unique16 December 2013 at 18:28
Error parsing XML, line 1399, column 3: The element type "b:widget" must be terminated by the matching end-tag ""

muncul notif seperti diatas, mohon petunjuknya
Singgih23 December 2013 at 22:15
Alhamdulillah berhasil di blog saya http://singgihmcr.blogspot.com/ . terimakasih gan. Saya tinggal sedikit merubah agar komentar admin dengan pengunjung berbeda jarak. (Komentar admin menjorok ke dalam). Tutorial di atas jika di ikuti akan rata jarak antar kotak komentarnya. tpi meskipun demikian sudah bagus kok. top gan
Unknown28 December 2013 at 22:56
gan maksudnya gimana sih yang terakhir yang ganti teks yang berwarna merah diatas itu teks merah yang mana??
Ma'ruf Hidayat29 December 2013 at 02:12
@ Glenn

Misalnya gini, silahkan cari kode di blog anda, kemudian sorot kebawah hingga menemukan penutupnya yaitu , dan kode diantara 2 kode tersebut adalah yang diilustrasikan sebagai "Kode yang harus anda ganti".. Mudah-mudahan anda mengerti..
arhakim5 January 2014 at 22:29
kotak komentar nya gak muncul gan , apa saya salah masukin kode html nya? lkalo mau seperti semulain gimana ?
Ma'ruf Hidayat6 January 2014 at 04:58
@ Arif

Kalau sudah ikuti cara diatas dengan benar, pasti muncul, mungkin anda salah naruh kode.. Kalau mau seperti semula ya kembalikan apa yang tadi anda ganti atau tambah.. :D
Unknown4 August 2014 at 20:58
This comment has been removed by the author.
Spesialis Asuransi Kendaraan14 August 2014 at 17:52
Muncul text ginian di blog saya :

Kesalahan saat mengurai XML, baris 1640, kolom 3: The element type "b:widget" must be terminated by the matching end-tag "".

komentar yg ada ilang , kolom komentar jg ilang
Ma'ruf Hidayat14 August 2014 at 22:30
@ Berak

Mungkin kode b:widget nya blum ada penutupnya, coba dikasih penutup dulu :D
Unknown19 August 2014 at 07:53
maaf min numpang komen tentang tutor memasang reply komentar.
saya udah pasang, semuanya udah bener ga ada yang error tapi tetep ga muncul gitu2 mulu.

# Saya akan coba merespon komentar baru secepatnya.
# Harap berkomentar dengan bahasa baku tanpa singkatan.
# Komentar promosi, spam, dan komentar satu kalimat yang tidak bermutu akan saya hapus langsung.
# Jangan menggunakan nama pengomentar dengan nama yang berbau porno, judi, dan yang negatif lainnya.
# Setiap komentar akan dimoderasi secara manual sebelum muncul.