Cara Membuat Kolom Komentar Keeren

Hallo sobat blogger, kali ini saya akan memberikan tips untuk membuat kolom komentar terlihat lebih elegan, rapi, dan enak dipandang. Sebab kolom komentar bawaan blogger terlihat kurang menarik menurut saya. Untuk desain kotak komentar menurut saya tetap wordpress juaranya, tidak perlu repot2 edit-edit html disana kolom komentarnya sudah terlihat praktis dan rapi.
Sehingga disini akan saya berika tips sesuai judul artikel saya tentang cara membuat kolom komentar keren agar terlihat lebih menarik sehingga akan memicu pengunjung untuk memberi komentar.

Oiaa.. pada tutorial ini juga sudah saya jadikan satu untuk membuat tombol Reply komennya lhoh :)

Sebelumnya, saya sarnkan jernihkan pikiran anda dulu, karena caranya sedikit ribet dan butuh konsentrasi tinggi. hehee..
Langusung saja begini caranya..

1. seperti biasa backup dulu templatenya, buat jaga2 jika gagal melakukan modifikasi.
2. Masuk ke template, lalu pilih edit HTML, kemudian centang pada expand teplate widget
3. Kemudian coppy dan paste kode berikut diatas kode ]]></b:skin> (untuk mempermudah pencarian pencet aja ctrl+F)

/*----------------------------------------------------
          {--------}  Comment {--------}
----------------------------------------------------*/
#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 orange;
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 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRsX7KWe1l7rDAqxHclWLzjmPvCJ8qWpShDyzFR9Scd0F6eqRkEcaAPfP1ii2alYStzY6zBxNymQTcqLbzYTHrXRmVqMXgNooOjYEczuhZLQL5VfXIHE1YFMbk-b6kkMmzVy0WcHqzdnU/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;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
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 {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color:  #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px orange;
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. Lalu cari kode  </body> setelah itu copy paste kode berikut tepat diatasnya kode </body>

KODE POINT 4 DISINI

5. Kemudian cari kode seperti ini

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

disini letak kode baru

</b:includable>

yang berwarna merah tersebut merupakan kode yang diapit oleh klode diatas dan dibawahnya. Ganti tulisan yang berwarna merah dengan kode berikut

KODE POIN 5 DISINI

6. Lalu pada kode poin 5 diatas, anda cari tulisan _BlogID_ (untuk membantu pencarian seperti biasa pencet aja ctrl+F agar muncul kotak search). Setelah ketemu Lalu ganti tulisan _BlogID_ dengan ID Blog anda..

(Lihat Browser, pada address bar)

Contoh : http://www.blogger.com/html?blogID=1441230984567912356

7. Save dan lihat hasilnya.
Nah, sekarang kotak komentar blog Anda sudah lebih menarik.

Jika sampai tahap ke 7 masih belum bisa,, lanjutkan dengan tahap berikutnya :

8. Carai kode seperti dibawah ini : (biasanya kodenya ada 2 atau 4)

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

9. Kemudian hapus semua kode seperti diatas yang ditemukan di template sobat, dan ganti dengan kode berikut

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

10. Nah ..lalu save template. Seharusnya modifikasi komentar ini sudah berhasil. Jika belum perhatikan lagi steps2 diatas dengan teliti

Dari steps diatas, menurutku kesalahan banyak terjadi pada :

• proses copy paste script/kode yang kurang atau belum semuanya tercopy
• pada poin ke-5 untuk mencari kode yang diapit cukup sulit
• pada poin ke-8 tentang penggantian kode, jika kode no.8 ditemukan ada 4, anda juga harus mengganti semua kode no.8 dengan kode yang baru. Dan perhatikan benar2 kode yang akan diganti tsb.
• jika tombol Reply belum berfugsi, mungkin kamu belum mengganti _BlogID_ dengan ID blogger kamu

Semoga berhasil :)

Tweet