Cara Membuat Recent Comment With Avatar Profile

Recent Comments With Avatar - Setiap blogger menginginkan tampilan blog yang menarik dan secantik mungkin. Selain merupakan sebuah kebanggan tersendiri, blog yang menarik juga merupakan salah satu cara untuk membuat pengunjung lebih betah dan senang berkunjung ke blog.

Untuk membuat blog lebih ayu , cara yang paling baik adalah dengan menambahkan beberapa widget menarik pada sidebar blog. Salah satu widget yang menarik yang sebaiknya menghiasi sidebar blog adalah Recent Comments With Avatar.

Tentang Recent Comments with Avatar

Recent comments adalah widget yang akan menampilkan beberapa komentar terakhir di blog. Adapun jumlah komentar yang ditampilkan bisa diatur sesuai keinginan. Dengan adanya Avatar atau foto profil komentator di dekat tulisan komentar, membuat Recent Comments with Avatar ini lebih menarik di bandingkan Recent Commnets biasa yang tidak menampilkan avatar profil komentator.

Sebelum membuat Recent Comments with Avatar ini, sebaiknya anda lihat dulu live demonya di bawah ini agar tidak terkesan membeli kucing dalam karung

• 
  Awalk KandossongSaya hanya turut meramaikan saja karena Kontes SEO laku sangat menarik dan jujur dan mungkin yang terbaik di tahun 2012. Selain itu, google juga tidak melarang kontes dengan key yang tidak terlalu spe…
• 
  Awalk KandossongSemangat YA, menang sepertinya tidak mungkin he he he... niche blog tutorial kok ikut kontes tutorial blog, ini seperti jaka sembung bawa golok ha ha ha...
• 
  Rizal Maulanawah bgus artikelnya gan bisa di cobainformasionlineku22.blogspot.com
• 
  Blogger IndonesiaWah,, master turun gunung nih,,, ngeriy jadinya,,,salam sukses dan salam kenal masbroBlogger Indonesia
• 
  Argie Vadisalsip
• 
  sukristiawan cah jogjasmoga blog gua terkenal dibaca jutaaan pengunjung internet amien ya allah amien
• 
  Belajar SEOtetap semangat kang semoga menang.. amin
• 
  Abbas Buditerima kasih bang :)
• 
  LAKU.COM BELANJA ONLINE GROSIR ECERAN MURAH DAN AMANGreat post sob. Ada info menarik tetang laku.com bisa dapat 5% dan 10% jika mau jadi patner dibisnis ini.
• 
  Awalk KandossongBisa,.. kalau di artikel, tinggal memberi Link dengan warna seperti memberi warna biasa padea tulisan. Kalau maksudnya Link BIRU melulu di blog ini, jawabnnya juga bisa. Tinggal atur di kode template,…
• 
  Amri KurniawanThanks bos infonya..
• 
  purnawan dfdi coba
• 
  purnawan dfMantap gan,,,nice shareGan, bisa ga ya link yg berupa tulisan tampil dalam warna yg kita kehendaki, artinya ga melulu biru?
• 
  Dark Elite TechnologyBerkat Agan Saya Jadi Bisa :D
• 
  Misbah Hidayudah saya coba,, maksih bnyak ya..saya hanya seorang blogger pemulamohon di nilai blog saya yahttp://article-compilation.blogspot.com
• 
  Awalk KandossongBugis she the raft... :D
• 
  Awalk Kandossong1. Lihat pengaturan blog seperti keterangan di artikel2. Lihat apakah ada kode tracking analystics di template.3. Kalau mau yang praktis, gunakan seo doctor untuk analisa seo blog. Artikelnya ada di b…
• 
  Awalk KandossongJangan bercanda mbak.. kok ada template yang ga' pakai kode ??? He he he...
• 
  Aii Roudotullho mas, ko di template saya ga ada kode .gimana dong ??
• 
  Aii Roudotulmas, kalo blog yang udah di track, ciri2 nya gimana sih ??mohon penjelasan nya ya ..makasih sebelumnya ,,,
• 
  Garuk Garuk OnlineSukses ya gan. Semoga berhasil :D
• 
  Laku.com belanja online grosir eceran murah dan amanMembuat breadcrumb di blog di jamin cepat terindex Google. Great post sob
• 
  HAYARDINditerapin dulu yaa tipsnya, semoga berhasil...kalau boleh tahu adminnya bugis apa Yaaa ??? kebetulan saya juga orang bugis,,,,
• 
  Mempercantik Tampilan BlogNice artikel....Lengkap, komplit. Perbanyak lagi artikel yang informatif lainnya
• 
  Awalk KandossongKemungkinan besar agan komen di blog menggunakan komentar luv, jadi agan bisa pasang link karena memang itu tujuan komentar luv. Jika komentar agan menghilang, itu berarti tidak normal. Sayang agan ti…
• 
  Awalk KandossongSaya kurang mengerti maksudnya bro. Jika maksudnya seperti yang di homepage blog ini, berarti mas bro hanya ingin menampilkan judul artikel saja di halaman depan / homepage blog seperti daftar isi yan…
• 
  Awalk KandossongTidak apa apa mas bro.. Pasang kodenya di bawah kode :post.body yang keduaatau di bawah :post-footer yang pertama
• 
  sofyan839bermanfaat skali nih kang...
• 
  OqifMmm...kok di html saya kok ada 4 ya....?
• 
  misterubanThanks gan ilmunya, sanagt bermanfaat.. nanti saya coba dulu gan.. sukses..
• 
  Dani Kusumasip deh..
• 
  bakhtiar ibnu hafidhgimana caranya buat daftar postingan terlihat sederhana seperti di daftar isi?
• 
  bung sanjayaMenarik sekali nih artikelnya, semalam saya blogwalking di beberapa blog yg pakai wordpress,diantaranya langsung di aprove sama yg punya blog, tp ada satu yg membuat koment saya langsung menghilang,ap…
• 
  cik awiBoleh nih untuk di coba tips dari agan...
• 
  OqifTerimakasih atas infonya sangat bermanfaat...^^ sudah saya diterapkan di blog saya : silahkan dicek http://oqif-05.blogspot.com
• 
  reansudah dicoba...n cocok, makasih sobat
• 
  Blog Belajar SEO Internet MarketingTerimakasih banyak mas sudah share tutorialnya. :)
• 
  mas baliWaaaah...mantap abiz gan tutorialnya bg ane yg pendatang baru
• 
  blog pintarmakasih banyak bang atas infonya..bermanfaat banget..
• 
  dea amandamantap..
• 
  Coral reef wonderlandnice info gan , untuk ane udah punya kun di bing , hhehhe :)Mampir ke tempat ane ya gan_salam Blogger_
• 
  ridhwan almarufMemang bermanfaat gan >> http://planet-ridhwan.blogspot.com/
• 
  tentang pendidikanbelajar lagi disini sob, makasih
• 
  tentang pendidikanwahhh lengkap nih
• 
  rico ade mandanasudah saya terapkan dan hasilnya memuaskan terimakasih kak
• 
  Awalk KandossongProgram Afiliasi adalah sebuah bisnis internet dimana kita mendaftar di web afiliasi lalu kita memasang iklannya di blog, tentunya dengan menggunakan link yg telah di berikan web tersebut yg selanjutn…
• 
  Awalk KandossongItu namanya TABBER TAB, search saja di gugel bro...
• 
  Awalk KandossongDaftar isi yg ana ? Maksudnya Related Post ??? Kalau YA, search saja "Cara Membuat Related Post"
• 
  Info 19TQ bro salam kenalll
• 
  Info sayaini yang aku cari...aku sangat gak tw nie...terima kasih ya Panduan Cara melakukan ping blog nya...sangat berguna bagi ku
• 
  Sekayu agencyTQ info nya gan, sangat membantu
• 
  Akbar Budigan kenapa di blog saya gak da tulisan pengaturan dan masuk di pojok kanan
• 
  Vertykeymas bro gmn ne saya pengen buat related post (daftar isi) kayak punya mas bro yang di bawah ntuh ? trims before!
• 
  hendrikalo sudah terindex terlihat lebih keren di pencarian ya sob..mantap deh...
• 
  BAMBANG CARDIOVA.2SDA. Tlg pencerahannya
• 
  Menciptakan 1.000.000 Netpreneur Baru, Gratis Facebook Store di LakuBGT.comMantap sob... Artikelnya Nangkring di baris satu Google Indonesia. Selamat dan sukses sob.
• 
  Awalk KandossongAmien.. Terima kasih doanya
• 
  Awalk KandossongPastikan alamat email tujuan sudah benar. Pastikan koneksi tidak terputus. Kalau keduanya OK, Reload halaman dengan menkan tombol F5 di keyboard lalu coba kirim ulang
• 
  Awalk KandossongAne juga bikin blog bar. 1 minggu sudah terindeks tanpa di daftar, kalau blog ente.. saya kira waktu yang di butuhkan kurang lebih sama, asal rajin update
• 
  Awalk KandossongLumayan sih.. tapi kalau penggunaan wajar, loading blog tidak beitu teasa. Kalau semua di beri marquee, blog tidak akan berhenti Loading :D
• 
  hendrikalo pake marquee ini apa tidak menambah berat loading blog sob,,?
• 
  ASIABET188 AGEN BOLA SBOBET TERPERCAYAKeren gan, thanks ya atas infonya ^_^
• 
  Menciptakan 1.000.000 Netpreneur Baru, Gratis Facebook Store di LakuBGT.comDengan berkat program LakuBGT.com, akan semakin banyak Netpreneur baru yang akan lahir di Indonesia ya sob.. Salam sukses.
• 
  Gratis Download SoftwareGan, ane baru buat blog kira-kira di index google paling cepet kapan ya?
• 
  warung bacaoke punya nih infonya gan...thank yah..hehehe
• 
  miftacooltapi kalo masalahnya tidak bisa mengirim email(gagal terkirim) via hotmail kenapa ya?untuk menerima bisatolong penjelasannya gan
• 
  miftacoolkalo masalahnya tidak bisa kirim email lewat hotmail(gagal terkirim) kenapa ya?tapi untuk menerima bisa mohon penjelasannya gan
• 
  Teguh Sinulinggamas, recent comment punya saya nggak muncul...!gimana nih?
• 
  Francisco XavierTrima kasih Mas sangat Bermanfaat Sekali. salam Kenal....
• 
  Francisco XavierTrima kasih mas...sudah saya coba..tutorialnya sangat Detail...bermamfaat sekali bagi sy blog Pemula. Sukses Selalu untuk Anda
• 
  Dee MoiselleHaduuuu, makasii ^^
• 
  sepuluhribu.comWAH......SUngguh luar biasa tutorial anda mas bro, bermanfaat buat bloger pemula seperti saya. terima kasih banyak mas bro, semoga berkah ilmu yang anda berikan.
• 
  Teguh Sinulinggathanks atas infonya. keren-keren tutorialnyabtw, cara bikin menu tab view seperti blog ini gimana ya?
• 
  Andax89.blogspot.commakasih sob..ternyata ga terlalu susah ya..hehehe
• 
  efliandamantap sob..bisa d coba ni..
• 
  GROSIR KAOSWah keren gan izin copas ea
• 
  kisworoenggak jadi diblog gua
• 
  sarmanpsagalaSeep Gan, Thanks Sharenya, keep share
• 
  Sammakasi banyak infonya sob..sy juga mau coba tabbertab..thx
• 
  kasmirterima kasi mega gen...
• 
  kasmirmatteru 'u'peraktekkan..makasih mega gen...
• 
  Menciptakan 1.000.000 Netpreneur BaruInfonya mantap sob.. :D
• 
  Assunnah Mediaseonya bnr2 sangar.. langsung mejeng di halaman pertama
• 
  Robby Cobbynz Sreamomakasi mas bro ....
• 
  Cadis HangoluanMakasih mas tutorialnya..
• 
  belajarasik nih,,tambah seo friendly kalo ada breadcrumbsnya hehehe thanks atas tutorialnya sob...
• 
  Sandi NugrohoMantap banget nih bisa di coba gan. makasi infonya gan.
• 
  Debby MokonkGan cara membuat rating seperti dibawah artikel tuh gmn?
• 
  PAithanks..
• 
  Motor matic injeksi irit harga murahMio J emang rajanya matic..
• 
  gali potensiterimaksih infony, sangaat membantu,oh ya, kalau ad waktu berkunjunglh ke my blog http://riskyes2.blogspot.com
• 
  To Ugieizin coba ya sob...thanks
• 
  ilmu Dunia dan Akhiratke TKP.. hahahamakasih infonya boss
• 
  hendrobaru tau ternyata ada add on seo doctor, jd nya g usah pke plugin easy wp seo lg ya,heheh thanks infonya ya gan..
• 
  ade jamalterima kasih infonya, salam kenal ya :) http://moviestreaminfo.blogspot.com
• 
  budiTerima kasih banyak atas info dan linknya. lebih mempermudah dan hemat eaktu tentunya.
• 
  Motor Matic injeksi Irit harga MurahDicoba dulu kang! thank buat tutorialnya.
• 
  Dizba DXMakasih INfonya mas bro :DKeep Sharinghttp://d4share.blogspot.com
• 
  awancholletmantap nih...izin praktek dulu gan...
• 
  Infoinfo UnikMantab gan ^_^ ,, Sukses selalu deh buat kontesnya ^_^

Get This Widget

Apabila Live demo bermasalah, anda bisa melihat screenshot gambarnya berikut ini :

Gambar 1 : Recent Comments With Avatar

Anda tertarik untuk memasang dan menambahkan widget Komentar Terakhir yang ada foto profil komentatornya di blog anda ? Simak tutorialnya berikut ini :

Recent Comments Avatar Profile

Menambahkan widget Komentar Terakhir dengan avatar profil ini sangat mudah. Tidak diperlukan mengedit kode HTML template dan hanya 1 kali Copy Paste kode. Anda cukup melakukan beberapa hal berikut ini :

• Add Gadget / Widget baru
• Pilih widget HTML Java Script
• Masukkan kode Recent Comments Avatar Profil
• Simpan
• Selesai...

Berikut kode Recent Comment with Avatar :

<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;">
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_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;}
    .w2b_recent_comments li .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;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_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  = 100,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 200,
 defaultAvatar  = "",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
<script type="text/javascript" src="http://www.bloggerbugis.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script>

<div style="font-size:10px; padding:3px;margin-bottom:5px;float:right"><a
href="http://www.bloggerbugis.com/2012/05/recent-comment-komentar-avatar.html" target="_blank"> Get This Widget</a></div>
</div>

Jika anda belum tahu cara menambahkan widget baru ke dalam blog, klik "Cara Menambahkan Widget".

Kode untuk membuat Recent Comments With Avatar di atas masih bisa di edit. Silahkan edit kode yang berwarna MERAH agar tampilannya sesuai dengan yang anda inginkan.

• 250px adalah tinggi kotak Recent Comments. Ganti 250 dengan angka yang lebih jika anda ingin membuat kotak yang lebih tinggi atau sebaliknaya asala jangan menghilangkan kode px 
• fff adalah kode untuk background kotak. fff adalah kode warna putih. Apabila ingin mengganti background kotak Recent Comments dengan warna lain, ganti fff dengan kode warna yang anda inginkan. Untuk melihat kode warna, klik "Tools untuk melihat kode warna".
• 100 adalah jumlah komentar yang akan di tampilkan di dalam kotak Recent Komentar. Ganti 100 dengan angka yang lebih besar atau lebih kecil sesuai keinginan anda.
• true yang pertama adalah kode untuk menampilan Gambar Avatar profile. Jika ingin menghilangkan Foto Profil / Avatar, ganti true dengan false
• 30 adalah ukuran / besar foto profil. Sama seperti sebelumnya, ganti 30 dengan angka yang anda inginkan
• true yang kedua adalah kode untuk membuat foto profil komentator berbentuk bundar. Ganti true dengan false jika anda ingi membuat avatar profil berbentuk kotak
• 200 adalah jumlah karakter / huruf komentar yang akan di tampilkan. Silahkan ganti angkanya sesuai dengan yang anda inginkan.
• Ini adalah bagian yang paling penting. Ganti http://www.bloggerbugis.com dengan URL / alamat blog anda agar widget Recent Comments yang ada di blog anda tidak menanmpikan komentar yang ada di blog saya

Kode paling bawah ( kode yang terpisah ) adalah kode credit BLOGGERBUGIS. Jika anda tidak menghapus kodenya, saya ucapkan terima kasih.

Semoga tutorial "Cara membuat Recent Comments With Avatar" ini bermanfaat.
Happy blogging.....