Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Recent Comment Avatar

Masih ingat dengan tulisan terdahulu? atau belum baca? Dulu pernah saya tuliskan, ada 8 widget yang sebaiknya ada di blog kita, salah satu diantaranya adalah Recent Comment. Kembali saya kutip dari tulisan terdahulu itu,

Recent comment, yaitu widget yang menampilkan komentar-komentar terbaru dari blog kita. Karena biasanya sebuah blog identik dengan person sehingga tulisannya itu berasal dari pemikirannya dan bisa dikomentari orang lain. Selain itu akan menambah semangat untuk berkomentar dan menghargai komentarnya.

Untuk itu, kali ini juga Belajar Ngeblog di BLOG akan membahas cara membuat Recent Comment yang lebih menarik, mengapa? Karena recent comment yang akan kita buat bisa menampilkan avatar si komentator, kalau yang biasa melihat di blog yang ada di wordpress, ya seperti itulah tampilannya. Jadi akan ada avatar (gambar) nama, dan isi komentar. Tentunya widget ini akan membuat tampilan blog lebih menarik. Langsung saja kita praktekan!

Cara Membuat Recent Comment Avatar.
1. Login ke akun blogger.com
2. Pilih Tata Letak lalu tambahkan Tambah Gadget > HTML/Javascript
3. Kemudian masukan kode berikut ini:

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 50,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/recentcomment.js"></script>
<script type="text/javascript" src="http://kurniasepta.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

4. Sebelum disimpan ganti http://kurniasepta.blogspot.com dengan URL blogmu sendiri. 5 adalah banyaknya komentar yang akan ditampilkan 50 adalah ukuran avatar dan 60 adalah banyaknya karakter komentar yang muncul.
5. Simpan jika sudah selesai.

90 komentar untuk "Membuat Recent Comment Avatar"

  1. kunjungan gan,
    kali aja berkenan mampir balik ;))

    BalasHapus
  2. Dulu saya pernah coba pasang kode seperti ini pada blog saya yg masih pake template bawaan blogger.com. Setelah saya ganti template dari Mas Oom, setiap saya mau tambahkan widget yg mengandung javascript di sidebar kiri blog saya, maka widget yg ada di footer langsung bergeser ke atas dan menutupi halamn artikel di blogq. Saya kurang tau apa masalahnya. Mudah2an saya bisa pake kode di atas pada blog saya yg lain. jadi, ijin copy aja dulu ya mas Admin...

    BalasHapus
  3. hehehe..... Kunjungan siang

    BalasHapus
  4. gimana cara membuat blog biar ga keseluruhan artikel kita keliatan di awal orang buka blog kita, seperti blog kamu ini keren jadinya, cuma judul dan ringkasan awal blog nya aja yang kebuka. please bantu donk.

    BalasHapus
  5. Malem blogger blogspot. Ane blogger mywapblog.com (mobile), saya mau ajak anda dan seluruh blogger blogspot untuk menyaksikan kontes CSS, yaitu lomba design theme untuk template MWB. tapi hanya bisa di saksikan melalui handphone, dg browser opmin 4 sampai 6. Jangan lupa ajak blogger lainnya. Salam kumpak dunia blogging. Visit my blog Www.bahalap.mwb.im untuk menyaksikan kontes CSS

    BalasHapus
  6. Apa" aja sich yg harus kita pahami trlebih dahulu sebelum kita mempunyai blog..
    Saya ini pemula dari segala pemula,jd mohon bimbingan dari para senior..
    :)

    BalasHapus
  7. kalau mau buat tanpa komentar admin gimana sob ????

    BalasHapus
  8. thanks gan sdh saya coba di blog saya..
    silahkan kunjungi http://catatan-piper-comex.blogspot.com

    BalasHapus
  9. numpang nyimak infonya sob, sanagt menarik untuk dicoba.

    BalasHapus
  10. =========================================
    berbagi Kata Kata Motivasi cuy
    Hidup ini penuh pilihan. Semakin baik keputusan yang kamu pilih semakin baik juga kamu dalam mengendalikan kehidupanmu.
    =========================================

    semoga dapat di terima :D

    BalasHapus
  11. makasih mas atas infonya.sekalian nambah ilmu lagi di sunia blogger.. :D
    Makasih :D

    BalasHapus
  12. trimakasih telah berbagi,,, tips n tutorial blognya oke-oke.

    BalasHapus
  13. makasih infonya, happy blogging

    BalasHapus
  14. ##################################
    nice....
    follow my blog
    everytimeisshare.blogspot.com/

    BLOG MAKE OUR COUNTRY SMART
    please comment :)
    ##################################

    BalasHapus
  15. kalo bisa kasih gambar nya gan.:)

    BalasHapus
  16. Wah,.. sangat membantu dan bagus sekali hasilnya (^,^).b

    Follow My Blog dan tukaran link dengan menjalin persahabatan :D

    http://noterian.blogspot.com/

    BalasHapus
  17. makasi gan....infonya ...ijinn sedot ya

    BalasHapus
  18. makasih banyak ya gan sudah mau berbagi ilmunya

    BalasHapus
  19. Mkasih nih informasixa salam kenal gan...

    BalasHapus
  20. Sangat berguna nih informasinya salam kenal gan moga sukses trus....

    BalasHapus
  21. trima kasih gan infonya..sangat berguna saya sudah psang di blog aku..

    BalasHapus
  22. keren gan infonya,, makasihhh banyakkk

    BalasHapus
  23. mas untuk membuat label berputar kaya di atas itu gimana mas, makasih

    BalasHapus
  24. Ok,,,makasih, keren tutorialnya

    BalasHapus
  25. Mylostsaga22.blogspot.com

    BalasHapus
  26. Thanks Sob., Sangat Bermanfaat.. :)

    BalasHapus
  27. Widget Recent Comment yang apik, dapat menampilkan wajah si pemberi komentar. Salam blogger persahabatan

    BalasHapus
  28. Tips-trik yang menarik, terima kasih telah sudi berbagi

    BalasHapus
  29. follow yha blog gua, udah tag follow tu blog anda...hhee..terima kasih.. www.putragerald.co.cc

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

    BalasHapus
  31. makasih mas, cara recent commentnya,

    BalasHapus
  32. info bagus sobaat .. :D

    http://dyan-seller.blogspot.com

    BalasHapus
  33. maksih banyak gan atas infonya
    salam kenal aja buat semuanaya...
    http://anfilem.blogspot.com/

    BalasHapus
  34. makasih gan, langsung ngefek nih :) kunjungan baliknya yah gan :D

    BalasHapus
  35. nha.. ni dia nih yg sya cari2.. . langsung sya coba ya gan :)..

    BalasHapus
  36. makasih gan information nya
    kunjungan balik ya gan + follow please

    BalasHapus
  37. @Share With Agung Talaga: aq tau ini, saya juga pernahh,, klo kya gtu sob krna templatenya sndri coba ajh gnti template yang lain,,,,

    by
    http://ahmadbjblogs.blogspot.com/

    BalasHapus
  38. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  39. maaf kak
    sory kak menu ini namanya apa kak
    Beranda| Wordpress| Multiply| Posterous| Tumblr| Twitter| Facebook| Plurk| Koprol| Pinterest| Google+| Kompasiana| kurniasepta.com| SD|

    dan caranya buat kayak gitu gimana kak,,
    thankzz

    BalasHapus
  40. ada baiknya Anda cantumin sumbernya...itu punya Mas Kholis (johnytemplate.googlecode.com..../recentcomment.js) atau Mas bisa menyimpan script di google code sendiri karena script2 yg punya Mas Kholis sendiri juga sering kena banned yg menyebabkan widget kadang nggak berfungsi....salam persahabatan!

    BalasHapus
  41. saya ga nongol gan :(
    http://ubuntu-roy.blogspot.com

    BalasHapus
  42. sekedar informasi:hati-hati terhadap blog.http://datadvd.blogspot.com.blog ini menipu para pembeli termasuk saya..katanya menjual barang tapi tidak ada sama sekali...sampaikan semua ya untuk para blogger.ini biodatanya:namaya JAMIAN.rekening mandiri:1390004181016. rekening bca:4221238235

    BalasHapus
  43. kok gx bisa ya om ,,,,
    ini kan http://christino00.blogspot.com/ template-nya apa gx bisa di set seperti artickel ini, mohon pencerahan he,,hee,,,

    BalasHapus
  44. makasih ya mas tutornya sangat membantu kapan - kapan main ke blogkku . oh ya itu harus yang koment temen ya baru nongol ;))

    BalasHapus
  45. Minta Visit+Follownya Ya




    www.1sfgate.blogspot.com =))

    BalasHapus
  46. kebetulan nih kalau blog punayku udah gx perlu dipasang soalnya bawaan templatenya sudah ada,,heee

    BalasHapus
  47. Numpang tanya dulu,mas.
    Kalau recent komennya bisa bergerak keatas dan kebawah ini, harus tambah apa lagi ya, mas?

    Makasih sebelum untuk sharing bagusnya.

    BalasHapus
  48. ikut nimak informasinya gan salam kenal/.,.,.,.,;)

    BalasHapus
  49. btw Scriptnya bikin load jd berat g ya sob?

    BalasHapus
  50. wah mantep ni kayaknya gan. :D
    ane izin coba di blog ane ya gan.

    don't forget to visit back. :)]

    best regards.
    www.galaxy-ilmu.com

    BalasHapus
  51. Tutorial yang menarik,salam kenal dan sukses selalu:)

    BalasHapus
  52. makasih, tutor ini yang sedang ane cari

    BalasHapus
  53. buy taking sides ebook http://audiobooksplanet.co.uk/de/Sport/c1070/?page=3 fashion ebook free [url=http://audiobooksplanet.co.uk/Chemical-Biophysics-Quantitative-Analysis-of-Cellular-Systems/p116542/]the master cleanser ebook[/url] the accidential vampire ebook

    BalasHapus
  54. how much does a ebook cost http://audiobooksworld.co.uk/Martin-Garrecht/m83975/ well of ascension ebook [url=http://audiobooksworld.co.uk/La-profecia-2013-Historia-Literatura-Universal-Spanish-Edition/p212571/]free best seller ebook downloads[/url] the time traveler's wife ebook

    BalasHapus
  55. jadi seperti itu ya agar avatar bisa terpasang di blogspot
    terima kasih tutorialnya, keren sekali..

    BalasHapus
  56. thanks,, it usefully ..

    BalasHapus
  57. mas mau tanya donng , tau gak cara buat recent coment fb di blog
    ?

    BalasHapus
  58. Terimakasih banyak atas informasinya..!
    salam kenal dan semoga sukses...

    BalasHapus
  59. mantab-mantab,........ pantas dicoba

    BalasHapus
  60. blog blog model begini nih yang perlu dibaca. sangat mendidik apalagi buat orang2 macam ane yang baru belajar html buat ngeblog. mantap gan. trims ilmunya.

    BalasHapus
  61. Trims infonya mas, dicoba dulu :)

    BalasHapus

Berlangganan via Email