Cara Membuat Kolom Komentar Keren

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/AVvXsEgPNmqdybNBYGqdK1o7_njpCBCx3OF8E0Q2Y2p2chhhiW9xY85YUe6VTyrbbuJJOpILxoDvcMjPB0BzJJpql9FA6Tzb10HCehsuBzqralHism6SPrhhxSS6VMyNFcc51ZjoikcJTN5w-mE/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.. NB: tulisan _BlogID_ yg harus diganti ada dua lho yaa..
(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 :)

Comments

  1. ini memperberat loading blog gak om>??

    ReplyDelete
  2. @Irfan pastinya memperberat sob, tp cm sedikit dan pintar2nya kita aja untuk menyiasati itu. Saat membuka blog ini menurutmu berat ga?
    untuk check berat blogmu bisa lihat artikel saya dsini
    http://zamedaku.blogspot.com/2012/04/cara-check-berat-blog.html

    ReplyDelete
  3. siiip gan... thanks infonya... sdh di coba

    ReplyDelete
  4. thank's gan,, keren,, sudah saya pasang.
    mampir di http://cakrawalapengetahuan.blogspot.com/

    ReplyDelete
  5. tapi gan, kenapa kotak komentarnya jadi 2.?

    ReplyDelete
  6. @azharjadi dua gimana? saya dah cek di blog sobat udah bisa terpasang dgn baik.. kotak komentarnya juga gajadi 2 kok.. dah berss tuh :D

    ReplyDelete
  7. mantap gan.. keren postnya.. sangat-sangat membantu..

    ReplyDelete
  8. siip bos ide yg hebat... kunjungi web sy http://www.indomuslim-iffat.blogspot.com/

    ReplyDelete
  9. gan kalau berkomentar tanpa login gmna???

    ReplyDelete
  10. hmm..mungkin maksud kamu berkomentar tanpa memasukkan kode captcha?
    kalau berkomentar tanpa login (login blogger) kamu bisa berkomentar sebagai anonymous atau menggunakan name/url..

    ReplyDelete
  11. sip gan,, udah q coba dan berhasil.. visitback :)

    ReplyDelete
  12. blognya boxarif dihapus tuh pdhal dh cpek2 buat komentar keren diatas hehhee
    buat kotak komentar biasa saja
    Ex: http://adybakom.blogspot.com/

    ReplyDelete
  13. @ady devadevil: terimakasih masukkannya.. cara diatas hanya sekedar variasi saja, urusan mau dipakai atau tidak itu hak pemilik blog tentunya. Menanggapi komentar tentang blog boxarif yang dihapus, tidak ada hubungannya dengan artikel ini. Dan sepengamatan saya blog boxarif yg berada diatas komentar anda masih aktif sampai sekarang, thanks..

    ReplyDelete
  14. bro,aku sudah bisa ,cuman tombol replynya kalo di klik nanti muncul jendela baru yang berisi tulisan NOT FOUND 404 ERROR, gmana trus bro

    ReplyDelete
  15. @brillian : ga baca sampai selesai ya gan? lihat tulisan warna merah paling banyak tentang kesalahan yg mungkin terjadi..
    "jika tombol Reply belum berfugsi, mungkin kamu belum mengganti _BlogID_ dengan ID blogger kamu" (lihat langkah ke-6)

    ReplyDelete
  16. makasih infonya gan..
    bener-bener berguna..
    main-main ya ke blog ane..
    difollow ya ntar di follow balik tq

    ReplyDelete
  17. hahahaha.... terima kasih banyak gan... dari sekian banyak yang saya kunjugi blog aganlah yang scriptnya bisa berhasil di tampleku...
    Dulu aku pake temple simple. tapi karena bosan. aku ganti tample. ehhh... malah fiture balasnya ilang....
    tanks banyak gan...
    kalau sudi agan bisa lihat hasilnya di blog saya...
    http://candrajunie.blogspot.com/

    ReplyDelete
  18. bro kalo pake ini kok " SELALU " komentar saya yang pake anonymous atau name/ URL hilang ini gimana ya cara mengatasinya......???

    ReplyDelete
  19. maaf, maksudnya gimana? kamu membicarakan tentang komentar di blogmu apa di blog ini?

    ReplyDelete
  20. postingan nya kok ribet kali gan ya
    ditunggu kunjungannya balek

    ReplyDelete
  21. gimana lagi sob.. itu ane tulis secara rinci dan detail jd kliatan ribet.. klo ane tulis lebih singkat ntar malah banyak yg bingung dan gagal..
    sbnernya klo dah biasa edit2 gitu gampang kok.. ya semangat blogging aja deh ya :D

    ReplyDelete
  22. yang cara no 5 tu, cara'nya gmna ya sob,,og bngung gua..yang di cari tu kode yng mna..? atas ato bwah..hehe..

    ReplyDelete
  23. Cari kode keduanya bos..
    Pkoknya cri kode yg brada diantara kode trsebut.. Lalu ganti smua kode yg brada diantara 2 kode diatas dengan kode poin 5..
    Smoga bisa dimengerti..

    ReplyDelete
  24. gini mas setiap kali saya pake cara ini berhasil tapi kalo saya bikin komentar baru pake name/url pasti gk muncul yg muncul cuma komentar adminnya aj

    ReplyDelete
  25. oow gitu ya.. saya belom pernah dapat kasus seperti itu, jadi mohon maaf saya kurang mengerti.. kadang script template tidak semuanya sama dan bias berubah dan bisa memengaruhi scipt2 yg baru..

    ReplyDelete
  26. Salam kenal para blogger, thanks info nya.
    mampir ke blog saya yaa ...
    http://sonline2012.blogspot.com
    http://blogsantoso99.blogspot.com
    http://tokosantoso99.blogspot.com

    ReplyDelete
  27. wah ini keren banget sob,, biar terlihat lebih rapi dan menarik... bagus deh perlu dicoba

    ReplyDelete
  28. keren bro... saya udah mencobanya, hanya saja loding nya tambah berat hehe

    ReplyDelete
  29. gan ane kuran ngerti cara merubah blogid minta pencerahanya dong!!

    ReplyDelete
  30. The priandana: lihat langkah no.8 dan 9 ..mungkin kode diatas ada yg kelewat belum diganti dengan kode yg baru

    Anggi Wardani: blog id kamu bisa dilihat di address bar saat kamu buka blogger. address bar tu yg biasanya buat ngetik url itu lhoh.. nanti ada tulisan http://www.blogger.com/blogger.g?blogID=727573548245599****#blablaa..

    ReplyDelete
  31. waahh ini yg saya cari2 gan... thanks ya gan... udah saya coba di blog saya dan sukses... :D

    jgn lupa kunjungan nya :D
    http://artangeblog.blogspot.com

    ReplyDelete
  32. Waw,, keren blognya..
    I'll try..
    jadi nambah ilmu nih,
    Sukses ya buat blognya..


    Keep Sharing

    ReplyDelete
  33. asyik berhasil, makasih banyak bos. jadi tambah enak dilihat :D

    salam sukses yah ...

    ReplyDelete
  34. makasih atas infonya silahkan berkunjung ke blog semoga dapat pencerahan http://mimbarazhar.blogspot.com

    ReplyDelete
  35. gan, html punya ane kok diatasnya gimana jadi?

    ReplyDelete
  36. Gan Kok W Coba Pas

    Code Ini

    disini letak kode baru



    Yg Ada..

    Kok Saya LIat Di Bawah Gak Ada code ini ..

    MoHOn KeteraNagn LanJUtNya Gan..

    ReplyDelete
  37. sob, kok gak bisa di save ya?, di kasih peringatan ma Blogger.com gini "The widget with id "Blog1" cannot contain element: "div". A widget can only contain b:includable elements."
    mohon bantuannya sob.
    trim's sob.

    ReplyDelete
  38. Punya ane juga masih susah gan, mohon pencerahannya, kalo bisa dibuat sedetail mungkin (berserta foto). serta jika ada bahsa yang sulit di tulis tebal biar lebih enak gan, mohon pencerahannya yagan, gagal terus dari tadi. makasih gan


    Kunjungi Kami: Sosio Prores

    ReplyDelete
  39. Thanks Gan. Tapi cara merubah warnanya gimana nih? say newbie>

    ReplyDelete
  40. terima kasih artikelnya... mantap banget mas...tapi warna-warnanya masih bisa diubahkan gan....?

    ReplyDelete

Post a Comment

Silakan tinggalkan komentar Anda mengenai artikel ini. Terimakasih