recent comments
Recent Comments with Avatar for Blogger - Recent comment atau widget komentar terbaru ini saya berinama Recent Comments v.3, masih sama dengan versi sebelumnya masih memunculkan avatar. Script original masih buatan Harish Dasari dan diedit oleh Afandi Kusuma. Pada versi sebelumnya, script yang digunakan yaitu dari Kang Asep Sakahayang.

Yang berbeda pada v.3 ini yaitu clickable area (area yang bisa diklik) bukan hanya pada Nama Komentator, tetapi disekitar avatar, nama, dan isi komentar semuanya clickable. Kelebihan lain v.3 ini yaitu valid HTML5.

Cara pemasangannya sangat mudah, yaitu buat widget baru HTML/JavaScript dan simpan kode ini didalamnya.
<style type="text/css" scoped> 
ul.kangismet_recent{list-style:none;margin:0;padding:0;} 
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px  
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;} 
.kangismet_recent li:hover{border: 1px solid #ddd;}
.kangismet_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px 
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} 
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px} 
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;} 
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Kang Ismet';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>

Kostumisasi


Untuk membuat tampilan berbeda, silahkan edit CSS diatas. Penjelasan script yang bisa dikostumisasi :

numComments = 5 (jumlah komentar yang ditampilkan)
showAvatar = true (false, apabila ingin menyembunyikan avatar)
avatarSize = 35 (ukuran avatar dalam pixel)
roundAvatar = true (avatar bulat)
characters = 40 (jumlah karakter isi komentar)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
adminBlog='Kang Ismet' (nama admin blog, wajib diganti)

Catatan Update :

v.1 - 11.01.2012
  • Released
  • Script by Harish Dasari
v.2 - 14.05.2012
  • Script modified by Asep
  • Removed Admin Comments
v.3 - 15.09.2013
  • Script modified by Afandi Kusuma
  • Expanded clickable area
  • Fixed HTML5 validation issues by Kang Ismet

108 komentar

asikk kang...jadi lebih real yah.

Balas

Kalau saya perhatikan semua tutorial dilengkapi valid HTML5 .. dan tentu ini kabar gembira bagi pencarinya.
Sisindiran kang ah :
Mawa kalapa ka ciburial , mawa bedil kacidamaya
ieu aya tutorial , anu valid HTML5 hehe
Punten sanes bade ngiruhan atanapi ngotoran kolom komentar mung saukur ngiring ngareuah-reuah .... ( maklum kang urang sunda cunihin )

Balas

terakhir liat damzaky ada template... sekarang jadi blogazine lagi :) update ah bro...

Balas

batur nyuhun bapa mawa, sami-sami ka lapang bola
hatur nuhun kana komena, kang ruly jenar nakula
nembe males komen lami mikirna :D

Balas

Pokoknya yang sudah berbau valid HTML5, langsung disikat aja Kang. Hahahaha... Ijin nyoba dulu deh di blog saya yang satunya...

Balas

Wih mantap banget kang ...
Ijin Praktekin ...

Balas

Jadi semakin menarik kotak komentarnya kang Ismet...font tulisannya menarik, pakai jenis apa kang..?

Balas

heebat, coolllll, valid HTML5 again hihihi
sedot tah mang.. :D

Balas

wih keren kang, ane perbarui dulu ah :D

Balas

mantap kang...
kang, di tunggu neh yang tutorial bkin klik ganda buat seleksi

Balas

Tutorial bagus untuk mempercantik blog. Terima kasih, mas.

Balas

Wow Kang Ismet Azib Dah , Foto Nya Tuh Gw Ui......
Jadi Terharu, :) hahahhaaaa

Balas

wah artikel yang menarik kang,, :)
ditunggu kunjungannya kang..
http://indradp-share.blogspot.com/

Balas

nyikatnya pake sabun biar bersih :D

Balas

lupa namanya.. intip aja kodenya :)

Balas

kade sedotana alit teuing :)

Balas

sebetulnya sudah ada pada komen2 sebelumnya.. posisinya lupa :)

Balas

artikelnya validasi semua kang hahahay..
ohh yha kang tombol delete komentarnya keliatan semua tuu,,hahahay

Balas

coba cek lagi, ada blogazine yang kubuat baru kok, itu cuma artikel yang di up

Balas

:v hauhauhauhauaaaa
iya donkkkk

Balas

iya nih... sebenernya saya ga suka kaya gini, keliatan semua.. tapi standar blogger yang hanya bisa keliatan admin, error validasi :(

Balas

angger weh abdi mah teu ngarti...

Balas

xixiix.. piraku urang sunda teu ngarti :)

Balas

wkwkwk piraku, jadi kangen masa-masa smp yeuh inget jamana piraku

Balas

punya saya kayanya perlu di upgrade juga nih kang kayanya belum valid HTML5 soalnya, hatur nuhun kang

Balas

Keren euy template anyarna. :D

Balas

artinya ( templatenya bagus ) ya mas saeful? :D

Balas

iya keren templatenya
jadi pengen makek yg kyk gnian,,,
kang share template yg kyk pnyanya kang ismet dunk,,

Balas

halah.. masa baju lagi dipake dipinta :D

Balas

wih bagus kang :), oh iya, ane mau nanya nih, emang iframe itu membuat seo blog turun ?

Balas

kasi ajha kang nanti saya beli yang baru emank ukuranya apa kang L,S,A,B,C, atau LSABC,,? :D

(kidding) :D

Balas

wah anyar deui wae euy templatena, makin mantap pokonamah kang....

Balas

Absen kang Ah.. hehehehe :D

Balas

Langkung simple dan mantap ayeuna kang :-bd

Balas

maaf nie mas hanya pendapat kecil saja, :)
setahu saya Iframe adalah "bingkai" untuk menampilkan webpage lain pada suatu halaman.
kalau pemasangan iframe pada widged blog bisa mengakibatkan SEO BLOG Menurun.
mengapa saya bilang begitu karena menurut saya saat membuat Iframe kita membuat browser kita memuat tambahan halaman web dalam satu tab. Semakin banyak iframe yang kita gunakan, maka semakin banyak pula halaman web yang dibuka secara bersama-sama.
dan proses memuat halaman tersebut tidak akan selesai sebelum semua komponen web page yang kita masukkan dalam iframe itu termuat semua.
dan Kalau waktu muat blog kita terlalu lama, itu bisa berpengaruh pada pengindeksan blog kita

kita bisa mengumpamakan seperti ini, robotnya google sampai di halaman web kita dan berusaha memuat halaman kita, kalau iframe kita berisi website yang berat atau bahkan macet, maka blog kita bisa "kehabisan waktu" dan googlebot harus meninggalkan website kita sebelum menyapu semua link yang ada di dalamnya.
tapi mungkin juga pendapat saya salah mengenai iframe ini mas saya juga tidak banyak mengerti mengenai SEO mungkin kang ismet bisa menambahkannya atau bahkan memberi jawaban lain nanti mas :)

Balas

betul sob.. kata om kompi kaya gitu, dan udah saya buktikan turun hampir 28% di chkme.com

Balas

kengeng mulung ngagoler sisi jalan di gang ojeg di nangerang... wkwkkwkkw

Balas

waduh.. master of kompi nembe bijil, damang socana kang?

Balas

Heheehehe...jadi nambihan lamurna kang hadeueuehh...

Balas

makasih gan IMRON FHATONI dan Kangismet :)
ditunggu artikel selanjutnya :D

Balas

Ijin kapan-kapan pakai font nya yah kang Ismet....
Terima kasih

Balas

Iya Kang, saya nda lupa pake sabun so klin kok... :D

Balas

situ kan pinter utak atik pasti bentar lagi juga ketemu kang caranya hahahay

Balas

ternyata style bisa valid meski di pasang bersamaan dengan script dalam satu widget rahasianya ada pada kode Scoped..joss deck pokoknya ilmu nambah lagi ...kapan waktu buat percobaan ahh..buat demo langsung dalam postingan....dua jempol buat kang ismet

Balas

betul kang.. itu yang namanya Boolean

Balas

beuuu, kapiheulaan euy...
mun apal kitu dipulung ku ana....

Balas

Thanks Kang Ismet..
Keren nih

Balas

Saya ini penikmat form komentarnya kang ismet :D

Balas

Keren akang nih , ditunggu artikel selanjutnya y :v

Balas

makasih kang, dah ane terapkan di blog

Balas

Kang Ismet sudah saya coba tutorial yang ini, tapi tetep nggak jadi, di mohon Solusinya kang, Thanks
http://1.bp.blogspot.com/-bsCIlxtqB0E/UlRZbHjBLpI/AAAAAAAABzA/mEFV5yIkbLk/s1600/Error.jpg

Balas

thanks, berguna banget nih!!


JOS998.BLOGSPOT.COM

Balas

Kasep pisan artikel na Kang weess..!!!!

Balas

siip nambah ilmu kang,MAKASIH DAN MANTAP KANG,Hehehehehe

Balas

kang gimana sih cara membuat recent comment seperti kang ismet? . mohon bantuannya !!!!!!!!

Balas

Tutorial yang sangat bagus, bisa dicoba.
Salam sukses:)

Balas

kang ismetnya lg sibuk kali... saya coba jawab aja.. pake tinyscrollbar coba cari di mbah google engine...

Balas

sorry diralat.. salah jawab...

Balas

Saya guna widget ini.. nampak cantik di blog.. mahu guna google plus noti macam di blog ni malas edit..hehehe thanks.. banyak informasi di blog ini, kesemuanya awesome..!

Balas

bagi pengguna yang belum menggunakan versi sebelum2nya apakah bisa langsung menggunakan cara yang telah disebutkan diatas?

Balas

Mantep kang ismet, bagus recent comentnya :D

Balas

kang, ko' recent comment saya gak muncul ?

Balas

blog agan udah ane follow..mohon like balik ya..heheh:)
http://duniadgrafis.blogspot.com

Balas

kang kalau munculin tanggal dan waktu komentarnya gimana tuh..?

Balas

saya pingin nambah aplikasi spt diatas, tp ada nggak ya yg bentuk avatarnya tidak membulat..?

Balas

artikelna sae kang
ngiring diajar didie nya kang

Balas

mantap kang... langsung pake..

Balas

Ijin Copas, dikasih sumber kok ^_^

Balas

kasep siga saya oge teu tah?

Balas

kang yang muncul kok cuma komentar member, komentar adminnya kok gak tampil ya

Balas

maksih kang.... udah share ini yang pas ane cari-cari....
mau nyoba dulu...

Balas

work gan, makin seo deh blog saya =D

bang-irham.blogspot.com

Balas

sedot heula ah sakedik , punten .. :D

Balas

Telah dicoba kang ismet :D

Balas

keren kang widget comments nya thnks ya di tumggu kunjungan baliknya http://jebret-cerot.blogspot.com/

Balas

keren kang widget comments nya thnks ya di tumggu kunjungan baliknya http://jebret-cerot.blogspot.com/

Balas

Thanks yah kang... :) bermanfaat banget..

Balas

langsung hajar tkp dch kang :)

Balas

Mantep kang ... salam kenal dari saya :)

Balas

wauwww baru tau ada blog per PR4 hebat bener :)

Balas

mohon ijin gan....turnuhun

Balas

saya ingin komentarnya kaya kang ismet ada diatas ..
reques iya...

Balas

mantap kang, ubek2 kode lama nemu yang dicari..

Balas

ini kok yang keluar komentar di blog kang ismet ya ?? kok yang keluar bukan komentar di blog saya ?? :/

Balas

kang kenapa di saya tiba-tiba ilang gimana cara bikinya. saya kopy balik ko tetep g bisa ya

Balas

Poskan Komentar


×
Chat