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(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;
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>
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 :)

9 Responses to "Cara Membuat Kolom Komentar Keeren"

  1. wah ada nama ane di gambar :D
    siip,, mantap tutornya gan...

    ada tutor ga sob,, menambahkan fitur balas di blog,, soalnya di blog komentar ane ga ada klik balas,, :)

    visit back y

    ReplyDelete
  2. Waw emang Di klick Reaply Gx respown.?
    atau apa
    kalo pas di klick gx respown itu _BlogID_ Ny

    Coba cari _BlogID_

    Misalkan _BlogID_ Ini di hapus terus ganti Blog id anda > 1094706405249701000< kalo ini Blog id saya

    untuk mendapatkan Kode blog id di edit html lalu liat di bagian URL Edit HTML anda

    Misal > http://www.blogger.com/html?blogID=1094706405249701000&tpl=true

    Lalu di ambil kode > 1094706405249701000<

    ReplyDelete
  3. ane blogger hape gan, menarik or tdknya kolom komentar. Tetep aja komentar di blogspot bikin bete. Apalagi plus adminnya over protect gag nyadar blognya cuman blog gratisan :D

    ReplyDelete

- Jika Berkomentar , Berkomentarlah Dengan Sopan Dan Baik
- Pakai Pilihan Anonymous jika Anda Tidak Mempunyai Blog.

- Di Larang Menautkan Link Secara Langsung
- Di Larang Politics Dalam Bentuk Apapun
- Di Larang Spam

MOHON MAAF JIKA COMENT ANDA TIDAK SAYA JAWAB KARENA SAYA TIDAK ONLINE 24 JAM DIKARENAKAN BANYAK URUSAN DI DUNIA NYATA.