Labels

Tuesday, 6 November 2012

Cara Membuat kotak Komentar Keren di tahun 2013

JelekOke - Kali ini saya ingin membuat postingan pesanan teman saya, ia ingin membuat tampilan komentar blog nya lebih menarik, mungkin tampilan komentar saya menarik menurut beliau, makanya beliau bertanya kepada saya, Ok saya akan membuat postingan Cara membuat Tampilan Komentar Lebih menarik dan pasti nya Cantik. Tanpa basa basi langsung saja ke cara pembuatan nya
Ini Priview nya





  • Login ke akun blogger dan masuk ke Edit HTML

  • Untuk berjaga-jaga, ada  baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak
    terduga, nanti yang nyesal kan kita juga kalau ada apa-apa… hehehe
  • Siapkan mental anda, jangan sampai salah langkah, karena salah satu titik script aja maka akan bahaya… (nakut2 in aja :P)


  • Centang "Expand Widget HTML" ( bila perlu )

 Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin> 



/*------------- START jelekoke.blogspot.com Threaded Comments  -------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions 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;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue 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;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

/*------------- End jelekoke.blogspot.com Blogger Threaded Comments  -------------*/

  • Kemudian simpan dan lihat hasilnya….! Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe :P #LOL



nah biar tampilan nya menjadi lebih menarik seperti Thread komentar saya, anda bisa tambah code CSS berikut, letakkan  di bawah ]]></b:skin> 


<style type='text/css'>
         
/*Start Modif kotak Komentar*/
.comments .comments-content .icon.blog-author{
background-repeat:no-repeat;background-image:url(http://img2.blogblog.com/img/icon18_edit_allbkg.gif);
}
.comments .comments-content .datetime a{float:right;
}
.comments .comments-content .comment:last-child,.comments .comments-content .comment-thread ol li{font:14px Verdana;color:#fff;background:rgba(0,0,0,.5);padding:5px;margin:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 0 0 30px #fff;-moz-box-shadow:inset 0 0 30px #fff;-webkit-box-shadow:inset 0 0 30px #fff;
}
.comment-actions a{
background:#dad6cf;-moz-border-radius:2px;border-radius:2px;-webkit-border-radius:2px;font:12px Verdana;padding:4px;margin:5px;height:16px;border:1px solid #c1c1c1;
}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{
text-decoration:none;background:#ab9e9e;border:1px solid #5AB1E2;
}
.avatar-image-container{
-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;border:4px inset #000;
}
.comments .continue a{display:inline-block;border:1px solid #C4C4C4;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#000;font:14px Verdana;color:#fff;padding:2px 8px;margin-right:10px;
}
.deleted-comment{color:gray;font-style:italic;
}
/*End Modif kotak Komentar*/
</style>

OK selesai, coba lihat bagaimana tampilan komentar anda…!
Jangan Lupa tinggalkan Komentar sobat2 ya...!

165 komentar:

  1. Mantap....http://musliadi-adhy.blogspot.com/

    ReplyDelete
    Replies
    1. josss,,
      visit back me blog
      http://daniarmurdi.blogspot.com/

      Delete
    2. nice ,,,
      Visit Back bro ...
      www.softwarephreaker.blogspot.com

      Delete
    3. kereeen tapi panjang kayak uler sob.. gak bisa disingkat ya? takut memperlambat blog nih.. http://minoolshop.blogspot.com

      Delete
    4. ditunggu kunbalnya

      http://hitech540.blogspot.com

      Delete
  2. Maknyus mas,
    kunjungan balik nya mas hehehe http://yogie-share.blogspot.com/

    ReplyDelete
  3. haha mampir juga ke blog gw ya storyoftheinsect.blogspot.com

    ReplyDelete
  4. edit html tuh dimana tempatnya sob,saya kurang ngerti?

    ReplyDelete
  5. dah saya coba kok masih gak bisa ya??

    ReplyDelete
  6. itu ko ada dua bagian? yg dimasukin kodenya yg atas apa yg bawah? mhon bantuannya :)

    ReplyDelete
  7. Puyeng gan...kodenya panjang banget.. yuk kunjungi blog dofollow saya aja. Insya Allah pagerank 2.hehe

    ReplyDelete
  8. saya coba, yang muncul begini " Lebih dari satu widget ditemukan dengan id: HTML2. ID Widget seharusnya unik.
    Error 500 "

    ReplyDelete
  9. makasih gan.., kunjungi balik ya kumpulan sofware http://decka12.blogspot.com/

    ReplyDelete
  10. kunjung balik gan..
    airlandzz.blogspot.com

    ReplyDelete
  11. Udah aku coba gan tapi kok tampilannya gak berubah , gimana dong bagi ilmunya , trims

    ReplyDelete
    Replies
    1. buktinya aku bisa gan. mungkin ga lengkap copynya..

      Delete
  12. gan edit html nya itu kita cari di template kan .yg sekarang

    ReplyDelete
  13. Thanks gan Kolomnya keren baget,,
    sangat bermanfaat bagi anee..
    Jangan lupa kunjungannya yahh gann
    http://Fahrie97.blogspot.com

    ReplyDelete
  14. mantap gan ,, berhasilll ... THANKS yaa

    ReplyDelete
  15. Replies
    1. saya mau nanya ko kalau dipasang kode yang kedua,di atas halaman muncul gambar ( --> )yag di dalam kurung kenapa ya.

      Delete
  16. makasih bang infonya,,,
    kalau da waktu tengok blog ane dan minta kritiknya coz'nya newbie.

    ReplyDelete
  17. berkunjung sob,sambil menyimak.terima kasih tutorialnya.

    ReplyDelete
  18. kata /*------------- START jelekoke.blogspot.com Threaded Comments -------------*/ dicopy juga nggak gan?

    ReplyDelete
    Replies
    1. iya gann .. itu penting soalnya.. tanpa itu gak muncull..

      Delete
  19. wah, keren artikelya gan. jangan lupa mampir ke http://adeputra-pkp.blogspot.com



    #Salam Blogger

    ReplyDelete
  20. Sudah selesai di edit :D makash ya tutornya

    ReplyDelete
  21. Keren sob..!
    Thank's for information..?

    ReplyDelete
  22. mak nyosssssssssss..................



    sukses 100%

    ReplyDelete
  23. makasih tutornya gan,tapi sayangnya kurang cocok di blog ane,
    tolong kunjungan baliknya gan
    www.mbahgahol.blogspot.com
    follow aja nnti saya followbalik blog agan

    ReplyDelete
  24. Boleh ni dicoba....Jangan lpa Kunbal n komen balik ya gan ke http://rahman-ciblog.blogspot.com

    ReplyDelete
  25. punya saya ngga berhasil gan tidak ada perubahan

    ReplyDelete
  26. Manteep gan, udah ane patenkan di blog.thanks berat atas share tips_nya

    ReplyDelete
    Replies
    1. Punya saya juga tdk ada perubahan...

      Delete
    2. makasih juga.. yg ga bisa, coba diliat lagi tutornya

      Delete
  27. kok nggk bisa ya....?
    padahal udah gwe coba..

    ReplyDelete
  28. mantap gan
    tak tunggu kunjungannya di
    http://nashi-onpi.blogspot.com

    ReplyDelete
  29. Wah menarik sekali ya jadinya.

    ReplyDelete
  30. Wahahaha nyari'a malesss soal'a bnyak bgt

    ReplyDelete
  31. Mantep gan, berhasil ^_^
    Arigattao gozaimasu :)
    Kalau ada waktu, mampir yah ke blog ane :
    www.harrypahlawan11.blogspot.com

    Oh iya ditunggu follow baliknya (jika berkenan) ;)

    ReplyDelete
  32. ana coba dulu ya gan,,
    thank infonya...

    ReplyDelete
  33. Berhasil sih gan, tapi anehnya kok pas dihapus kodenya (mau balikin ke kotak komentar standar), kok malah kacau yah dan gak bisa balik ke asal lagi? Kenapa yah gan?
    Soalnya template ane hitam jadi kalo ada tulisan yang sebenarnya hitam warnanya jadi putih, begitupun sebaliknya, sehingga tulisan putih di bawah kotak komentar dan di menu tab komentar jadi gak terbaca, mohon pencerahannya gan :)
    Harrypahlawan11.blogspot.com

    ReplyDelete
    Replies
    1. harus install tempplate lagi kalo mau balik gann.. emang gitu jadinya..

      Delete
  34. Replies
    1. bisa aja.. aku aja udah buktiin.. baca dengan jelass dehh tutornya..

      Delete
  35. trims guns,, alhamdulillah sangat menarik sekli ni artikelnya,, trims yea tas ilmunya sobb,, trims bangett :)
    oa,, salam sejahtra dari www.tanggaislam.blogspot.com yea sobat :)
    salammm

    ReplyDelete
  36. mantap gan langsung comot... tunggu kunbalnya... :)

    ReplyDelete
  37. kode ]]> di html gw kok gc ada sob...
    . ada saran gc

    ReplyDelete
    Replies
    1. pasti ada kalau anda pakai template yang dari blogger.. tapi jika ambil dari luar, kadang ada, kadang gak ada karn uda di edit sama yang buat template..

      Delete
  38. gak berani nyoba nih
    takuur ma gertakanmu :)

    ReplyDelete
  39. template gw kok gak bisa di edit y sob.
    jdi gw nggak bisa contreng itu

    ReplyDelete
  40. sudah saya cobatidak bisa, malah pas saya bukak alamat htmlnya ada di atas blog ..

    ReplyDelete
  41. wah bisa gan :D visit blog saya http://ywkakaka.blogspot.com/

    terimakasih

    ReplyDelete
  42. mas saya udah pake cara di atas, tapi kok ktak koment nya gak muncul?
    emang si gak ada yang komen. trus supaya muncul harus ada yang komen ya mas?

    ReplyDelete
    Replies
    1. iya coba dikomentari sendiri aja bro..

      Delete
  43. Tq...sudah menggunakannya..:)

    ReplyDelete
    Replies
    1. terima kasih bro. moga bermanfaat.

      Delete
  44. gan? gimana merubah warna fontnya?

    ReplyDelete
    Replies
    1. cari kode #FFFFFF trus ganti dengan #000000 (belum aku coba, tapi, coba aja dulu)

      Delete
  45. Sory gan ,,, numpang nanya ni ,,, coba deqh mampir keblog saya dulu http://sellalusetia.blogspot.com
    Di blog saya yang itu kan entri atau postingan'a ada 3 tuh
    kalo masang kode komentar kaya yq diatas bisa gx gan !!! soal'a udh beberapa kode buat kotak komentar udh dijajal ,,, tapi selalu gagal !!!
    tolong bantuannya yah gan ???
    Makasih !!!

    ReplyDelete
    Replies
    1. apa kah pakai template asli, atau flash..??

      Delete
  46. Di blog aku juga gak jalan mas bro

    http://duniablog99.blogspot.com

    ReplyDelete
  47. Mantab gan......

    visit back yaaaa :-)

    http://matt-hiday.blogspot.com

    ReplyDelete
  48. back ya http://bolaries.blogspot.com

    ReplyDelete
  49. udah dicari-cari tapi gak ketemu kode ]]>
    ada yang bisa bantu gak?

    ReplyDelete
    Replies
    1. kamu pakek template download apa asli dari blogger?

      Delete
  50. bagusan aslinya yang tanpa tambahan css yg katanya lebih keren :D . btw good job kang , ane berhasil

    ReplyDelete
  51. apa mungkin blm ada komentarnya kaliya...?

    ReplyDelete
  52. kenapa gagal terus ya ? -.- udah berkali-kali dicoba jadinya malah muncul di background tulisan yang di copy

    ReplyDelete
  53. blogqu tidak bisa di tekan publikasikan trus gmana caranya

    ReplyDelete
  54. blog sya memiliki tampilan baru pada HTML nya bgaimana cara mencarinya...

    ReplyDelete
  55. JUDEGGGG.....

    Sini Mampirr Ke Blog'q http://myinfo4you-blogger.blogspot.com/

    ReplyDelete
  56. I like it....www.kampunginggrisunicef.com

    ReplyDelete
  57. makasih gan :D
    akbaragas.blogspot.com

    ReplyDelete
    Replies
    1. kok gk bisa gan

      Salam blogger >> Tercacau.blogspot.com

      Delete
    2. Thanks Ya Gan Moga Di berkati Datanglah Ke Web Saya Ok Saya Tunggu Berkomentarlah Supaya Tahu Bahwa Anda Mengunjungi Blog Saya Ok www.madeamerta.co.vu

      Delete
  58. Makasi atas tutorial dan tipsnya mas..
    Salam Kenal Dody Saduyasa

    ReplyDelete
  59. mampir ke blog saya gan.....

    http://www.eyang-pedia.blogspot.com

    ReplyDelete
  60. waaaah, bisa! keren, keren
    makasiih ya.. :D

    ReplyDelete
  61. bisa bang,kereeen ) makasih :) kunjungi balik http://about-me27.blogspot.com
    jangan lupa beri komentar :)

    ReplyDelete
  62. Tampilan kotak komentarnya keren,tadinya mau saya terapkan di blog saya juga.Ternyata template blog saya ngak support dengan kode yang disampaikan diatas.

    ReplyDelete
  63. Saya tunggu kedatangannya! http://najar-shinobi.blogspot.com/

    ReplyDelete
  64. haloo... makasih ya untuk arahanya ,,, sungguh membantu,,, terus buat ispirasi yang lain ya biar banyak kegunaanya,,,, ,,,, ,,,

    ReplyDelete
  65. Thanks :)

    http://infinitydesign3.blogspot.com/

    ReplyDelete
  66. luar biasa joss gan.....http://timservis.blogspot.com

    ReplyDelete
  67. Kunjungi juga gan http://hidayrusuikoden.blogspot.com/

    ReplyDelete
  68. oke jg gan . . .
    bisa dicoba . .
    skalian mampir ke blog ane:
    online-news-jobs.blogspot.com
    :)

    ReplyDelete
  69. Sudah ane coba gan, langsung cespleng, main ke blogku ya? terima kasih.

    ReplyDelete
  70. Gan ko ane ga muncul kotak komentar kaya agan ya?? mohon bantuannya gan saya masih newbie di blog :D

    ReplyDelete
  71. terimakasih kawan atas tipsnya, salam kenal saya orang baru di BLOGGER. mohon bantuannya :D

    ReplyDelete
  72. terima kasih kawan infonya, sangat membantu....

    ReplyDelete
  73. mantab gan ,, saya coba kok tidak bisa bisa kang mas,, mohon pencerahanya mksh

    ReplyDelete
  74. keren gan... maaf ijin ane pake yah

    ReplyDelete
  75. keren..

    mampir saudara di blog sederhana saya
    http://anasyapialhikmah.blogspot.com/

    ReplyDelete
  76. gan, cari kode nya kok kgk ade ye di blog gw? mohon bantuanya

    ReplyDelete
  77. gan, kodenya kok kgk ada di blog ge ye? mohon bantuanya

    ReplyDelete
  78. keren nih kolom komennya, makasih yah infonya...!!!

    ReplyDelete
  79. Harus dicoba nih, thanks untuk postingannya
    Tlong kunjungi juga tukang-survei.blogspot.com ya? yang mau tuker2an link juga bisa. Thanks

    ReplyDelete
  80. mantap visit my blog juga http://kangmasucup.blogspot.com

    ReplyDelete
  81. thanks gan infonya, mampir juga ya ke http://baihaqisuhaeri.blogspot.com :) kalau mau tau cara menyembuhkan penyakit dan yang lainnya. :)

    ReplyDelete
  82. keren artikelnya..... terima kasih tutorialnya.. mantap....

    ditunggu kunjungan untuk semua teman di:

    http://miniblogger28.blogspot.com

    ReplyDelete
  83. thanks buat infonya, sangat bermanfaat http://goo.gl/0kClbV

    ReplyDelete
  84. thanks buat infonya, sangat bermanfaat http://goo.gl/OHwgnY

    ReplyDelete
  85. berhasil gan. tapi yang mau comment jadi kebuka tab baru. caranya supaya ga perlu buka tab baru buat comment gmn yah? BTW makasih.
    Kalo ada waktu main ke
    rifalnurkholiq.blogspot.com

    ReplyDelete
  86. Boss.. Ane udah coba nih.. Berhasil sih..

    Cuma warna tulisan 'pengirim' dan 'tanggal'nya kq jadi warna putih ya.. Jadi gak keliatan, soalnya backgroundnya juga warnanya abu-abu putih gitu..
    Sedangkan kalo ngeliat punya ente nih, warna tulisan 'pengirim'nya biru, warna tulisan 'tanggal'nya hijau..

    Kalau mau diubah, harus gimana ya boss? Mohon pencerahannya ya..

    Makasih ya sebelumnya..

    ReplyDelete

Terimakasih telah berkunjung.. Silahkan meninggalkan komentar :)