JavaScript Recent Comment/Komentar Terbaru dengan CSS

widget recent comment

Untuk membuat widget recent comment dengan tampilan yang luar biasa ganteng seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:

<style type="text/css">
#komentar {
  font:normal normal 11px/normal Tahoma,Verdana,Arial,Sans-Serif;
  background-color:#597624;
  margin:0;
  padding:10px;
  color:black;
  border:4px solid #597624;
  -webkit-box-shadow:inset 0 0 2px black;
  -moz-box-shadow:inset 0 0 2px black;
  box-shadow:inset 0 0 2px black;
}

#komentar ul {
  margin:0;
  padding:0;
  border-top:1px solid #455F20;
  border-bottom:1px solid #799D1A;
}

#komentar ul li {
  border-top:1px solid #799D1A;
  border-bottom:1px solid #455F20;
  padding:3px 0;
  list-style:none;
}

#komentar ul li b a,
#komentar ul li b a:link,
#komentar ul li b a:visited,
#komentar ul li b {
  color:#D7E5FD;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}

#komentar ul li b:before {
  content:url(http://3.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);
  margin:0 4px 0 0;
  display:inline-block;
  *display:inline;
  vertical-align:middle;
}
</style>
<script type="text/javascript">
var jmlkomentar = 14,
    jmlkarakter = 200,
    home_page = "http://nama_blog.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/blogger-rc-comments.js" type="text/javascript"></script>

Tentukan jumlah komentar yang akan ditampilkan pada jmlkomentar dan jumlah karakter pada jmlkarakter. Ganti kode yang Saya beri tanda dengan alamat blogmu sendiri.
Klik Simpan dan lihat hasilnya:

Lihat Demo

32 Komentar

  • Unknown

    besok-besok kalo ganti template coba ahh , , :)

  • Piyen

    thanks tutorialnya... keren dah....

  • Lentera Langit

    aq pake ya bro..., gk tau napa recent komen sy yg lama tiba2 yg bekerja., thx yaa. :)

  • Thomi Jasir

    kk saya pingin punya widget komentar kaya kk gimana caranya

  • Taufik Nurrohman

    @thomi jasir Ini widget hasil modifikasi dari widget recent-comment buatan MS-Potilas. Konfigurasinya memang cukup rumit, tapi kalau mau mencoba bisa mencoba mengunjungi halaman ini: http://yabtb.blogspot.com/2011/11/return-of-better-recent-comments-gadget.html

  • Unknown

    ini gimana cara ngatasin nya gan ? nama nya kegeser ke samping kiri...

  • Taufik Nurrohman

    @Hayley Sdnan

    #komentar ul li {
    padding:5px 20px !important;
    }
  • Unknown

  • Ijal Fauzi

    Wah, ngga bekerja sama sekali mas taufik, ngga ada yang ditampilkan malah 7:(

  • Taufik Nurrohman

    @Ijal Fauzi Pasti itu karena feed postingnya dimatikan. Aktifkan dulu feed-nya supaya widget ini bisa bekerja.

    • Surga Kenari

      punya saya kok nge dirrect yah mas?

      jadikanpinter.blogspot.com/p/the-genius-user.html

      mengaktifkan feed posting dimana yaa?

      • Taufik Nurrohman

        Sudah Saya edit script-nya.

        • Surga Kenari

          Masih nge dirrect mas,

          jadikanpinter.blogspot.com/p/the-genius-user.html

          ada solusi mass ?

          • Taufik Nurrohman

            Bukannya ke-redirect, cuma scriptnya saja yang bikin rusak halaman. Mungkin karena nama-nama komentatornya yang aneh-aneh :\

            • Surga Kenari

              wew kok bs gtu ya T_T

              sedih juga...

              trs ga bs dong saya pasang yg ini ?

  • Ijal Fauzi

    @Taufik Nurrohman Wahaha salah mas, pertama sih saya perhatiin detilnya, terus nyoba tutornya mas Dede juga, sama-sama ngga bisa. Ternyata............... permission nya aku tutup :D

  • IDAM BASHORI

    beberapa hari ini saya mencari artikel tentang bagaimana cara memasang scroll otomatis pada semua artikel blog tapi saya tidak menemukannya. tolong donk mas kasih solusi,,,,,,,,,,,,,,

  • Unknown

    bang, kok saya menggunakan widget ini hanya tampil bila ada komentarnya saja, kalau kaga ada komentar malah kaga muncul :(

    oia, saya taruh javascriptnya di halaman komentar/postingan. atau lebih tepatnya dibawah kode
    <b:includable id='threaded_comments' var='post'>

    http://gaptek32.blogspot.com/

    duh maaf nih bang ngerepotin :D

    • Taufik Nurrohman

      Taruh dua kali. Di bawah <b:includable id='threaded_comments' var='post'> dan <b:includable id='comments' var='post'>

      • Unknown

        wah makasih bang atas jawabannya. Banyak pelajaran yang saya dapet dari bang taufik :)

  • Unknown

    mas,kue warnane bisa di ubah rha? warnane ireng biru mas, kaya http://sekaratmutlak.blogspot.com/2012/03/elegant-black-daftar-isi-blogger.html#.UXjub6Kmjuw loh,mumet aku rha bisa kon pas warnane... :'(

  • Unknown

    oh yha mas,ben ng jero komentar kaya blogmu prime carane??? thanks \o/

  • Tricahyo Abadi

    Script source di atas apa boleh kita hosting sendiri Mas?
    Kata Mas Kolis blog lebih ringan bila script2 kita hosting di direktori kita sendiri.
    Tapi kenapa beberapa teman yang menghosting script seperti Maskolis banyak dibanned? Apakah itu karena melanggar sesuatu? :\
    Saya bertanya2 mengenai itu. Terima kasih atas jawabannya. :-bd

  • Tricahyo Abadi

    Mas Tov. Saya sudah pakai widget ini lama. Tiba-tiba saya lihat hari ini halaman blog saya jadi kacau. Saya restre template tetap. Akhirnya widget recent post ini saya copot ternyata bau balik. Saya pasang lagi ancur lagi. mengapa bisa begitu Mas Tovic?

    • Taufik Nurrohman

      “Tiba-tiba”. Berarti dulunya tidak. Ini diluar jangkauan Saya :'(

  • Imron Fhatoni

    selamat malam mas taufik maaf saya kalau pertanyaan saya tidak berhubungan dengan topik
    kemaren saya memsang daftar member aktif diblog saya mau bertanya sama mas taufik bagaimana cara agak komentar author tidak tampil pada member aktif tersebut mohon pencerahannya mas...

    • dhanyn10

      cari kode seperti ini:
      excludeUsers
      arti dari kode tersebut adalah pengecualian komentator yang ditayangkan
      masukkan nama kamu sesuai identitas pada akun blogger

  • Unknown

    Komentar ini telah dihapus oleh pengarang.

  • Unknown

    Mas, saya mau nanya. widget di atas kan saya taruh dibawah postingan seperti pd gambar.

    pertanyaan saya, kok widget tsb muncul jika postingan kita ada yang berkomentar saja ya ? jadi postingan yg gak ada komentarnya widget tsb nggak muncul. please cek ya aldhinya.blogspot.com. coba perbedakan antara post yang berkomentar dgn yang tidak. Pinginnya kan muncul di semua post gitu. thanks. ^_^

  • Unknown

    Nggak bisa tampil kang koment nya :)

  • Bob Marley

    Pengen buat widget kategori kayaq gini mas taufik dengan html/javascript, buat saya masukin kedalam tab view di footer blog saya :'( http://harmansh.blogspot.co.id/

Komentar telah ditutup.