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(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.. 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 :)
Jangan lupa di share ya :)

Artikel Terkait:

49 komentar:

Irfan said...

ini memperberat loading blog gak om>??

Zameda Igga said...

@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

Fauzie said...

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

azhar said...

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

azhar said...

tapi gan, kenapa kotak komentarnya jadi 2.?

Zameda Igga said...

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

Blog Berbagi said...

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

Zameda Igga said...

@Blog Berbagi sipp.. udah bisa kan bro? :)

Ryri ( Ryanto ) S.kom, Esq tr, Ch, Cht said...

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

debbie irlando manurung said...

gan kalau berkomentar tanpa login gmna???

Zameda Igga said...

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

boxarif said...

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

ady davedevil said...

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

Zameda Igga said...

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

brillian said...

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

Zameda Igga said...

@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)

INFOKU-UPDATE.COM said...

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

Candra Blogger said...

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/

panrita said...

mantappp cinggg

Limit Post said...

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

Zameda Igga said...

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

Andi Nova said...

postingan nya kok ribet kali gan ya
ditunggu kunjungannya balek

Zameda Igga said...

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

putra gerrald said...

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

Zameda Igga said...

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

Limit Post said...

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

Zameda Igga said...

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

edi santoso said...

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

hendri said...

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

Ardian Tokotua said...

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

AnimeKu.Indo said...

thankz infonya

The priandana said...

gan kok komentarnya ada 2 sich ?

Anggi Wardani said...

gan ane kuran ngerti cara merubah blogid minta pencerahanya dong!!

Zameda Igga said...

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

rudi aienny said...

thanks Om , sedot

Arta said...

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

venzbu said...

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


Keep Sharing

triwarsana parang said...

nice post saja

isnaidi bangka said...

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

salam sukses yah ...

Nurul Ahmad said...

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

Arif Ramadhani said...

gan, html punya ane kok diatasnya gimana jadi?

Alfaputra solo said...

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

Semut Lewat said...

ku coba dulu gan

Angga Pratama said...

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.

sosio progres said...

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

Miftah Nurul haq said...

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

muhammad isra said...

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

jasa desain rumah di banjarmasin said...

thanks gan

jasa desain rumah minimalis said...

thanks gan..good artikel

Post a Comment - Kembali ke Konten

Silakan tinggalkan komentar Anda mengenai artikel ini. Terimakasih

Related Posts Plugin for WordPress, Blogger...
 

HiStats Info