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

• 
  ABas NADSahabat Super! cara set Facebook store kah yang anda maksudkan? Anda bisa pelajari dengan mengikuti langkah - langkah mudah di LakuBGT.com. Salam super. Terimakasih sudah berkunjung.
• 
  Super AffiliasiTerima kasih saya sangat senang memperoleh tip yang membantu bisnis online hanya saja saya belum begitu paham cara setupnya mohon bantuannya .
• 
  ABas NADWelcome Super! maksud anda menghasilakan uang dari PTC? Kalau cara menghasilkan uang dari PTC itu bisa dibilang mudah. Anda bisa pelajarinya di Kerja Online di artikel di atas. Caranya juga di jelaska…
• 
  Super AffiliasiMaksih Informasinya bloggerbugis,mau tanya lagi nibagaiman jika saya ptc ,mohon detilnya maklum masih kosong ni,dan bagaimana caranya?
• 
  Awalk KandossongSaat berkunjung di YATIM KARBALA, kode google analysticsnya saya lihat sudah terpasang
• 
  Awalk KandossongItu namanya TABBERTAB. Search saja di gugel, soalnya sy belum sempat buat artikelnya
• 
  Awalk KandossongMenghapusnya jangan di halaman yang terbuka di tab baru setelah kik SRC, tapi hapusnya pada template, artikel, atau widget blog ( tergantung lokasi broken link ). Tab baru yg terbuka setelah klik SCR …
• 
  Berita Dan Informasi Tergaul TerkiniTerima kasih gan untuk tutorialnya , sangat bermanfaat sekali dan berhasil gan.
• 
  ISP Companyinformasi nya bagus gan, keep posting yaa. smoga slalu bermanfaat bagi orang lain
• 
  Limit Postmantab brayy coba yahh
• 
  Deden SudianaCara yg di samping kanan gimana mas bro..yang ada tulisan COMENT SITE INFO LABEL dan Populer..maksih mas bro di tunggu infonya.
• 
  Belajar dan BerbagiMantap deh info nyasalam blogger www.lintas-media.com
• 
  YATIM KARBALAaduh aku ko eror terus yah, pas mau pasang kode HTML nya...kenapa yah mas..tolong dong dibantu...
• 
  YATIM KARBALAaduh aku mako mau pasang eror terus yah, kenapa sih...penjelsannya dong...
• 
  Andy Borneokalau udah ditemukan terus cara ngapusnya gimana daeng.. koq gak bs dihapus..?
• 
  ali FebriyantoYang dicari pas bener ada disini, Langsung coba, Makasih gan atas info yang diberikan cuma-cuma
• 
  Layla TSFWah keren.Makasi infonya :)
• 
  Berbagi BersamaMakasih banyak bro . . . ..moga moga aja blog ane lekas terindeks dengan baik dan ada di halaman utama search engine.sekali lagi thanks.
• 
  adminterima kasih atas infonya mantepsalam sukses http://gunung-air.com(peralatan Rumah tangga)
• 
  sofyan839wah....bermanfaat skali nih infonya....terutama buat ane yg mash terbilang sangat baru d dlm dunia blogging....mksh sob....boleh dicoba nih...
• 
  Menciptakan 1.000.000 Netpreneur BaruInformasi yang super lengkap.
• 
  Menciptakan 1.000.000 Netpreneur BaruTutorialnya sempurna dan lengkap. Thank ifonya sob
• 
  obat tradisional hiv aidsinfo yang sangat kren boleh ni dicoba ....??
• 
  agen obat alamiwah gan saya baru tau ni ... kren gan ..
• 
  Myth DuniaTerima kasih banyak infonya,,Kunjungan balik ya gan,, ;)
• 
  unes36.blogspot.comSaya akan mencoba dulu kalau ada kesulitan mau tanya lagi ya, jangan segan2 menjawab. Maklum pemula.
• 
  yudhacomunity.blogspot.comsip keren banget tutorial nya kk...nicekalau ada waktu luang mohon mampir ke blog saya ya kk www.yudhacomunity.blogspot.com
• 
  firmanu swantarasalam kenal juga gan, pertamax dah
• 
  Darmawan Saputraterima kasih banyak atas artikelnya
• 
  obat kuat pria - pelangsingwah, mksih bos.infonyaudah ane coba langsungslam kenal aja bos, kunjungi balik kami y ???
• 
  Andika Nur Setyatrik nya sukser bro, makasih yaKunjungan dan komen balik ya www.bolainfo.net
• 
  MadjongkeMAkasih infonya sob. Langsung ke tkp
• 
  Iklan Internet Murah Efektif Berkualitas IndonesiaTutorilnya sempurna untuk mensubmit artikel saya. Thank sob sharingnya.
• 
  GlamFatherwow, manfaat banget nih gan..makasih.. :D
• 
  Budidaya Jamurterima kasih tutorialnya gansangat bermanfaat
• 
  Awalk KandossongItu artinya blog agan tidak terindeks mesin pencari. Sebaiknya biarkan pengaturan robot.txt tetap default ( STANDARD )
• 
  Awalk Kandossong1. H1 tag adalah judul Blog. Seharusnya judul blog sudah ada sejak membuat blog, tapi keterangan ini mengatakan TIDAK ADA JUDUL BLOG.2. H2 tag hampir sama dengan H1, h2 adalah judul masing masing widg…
• 
  Awalk KandossongSepertinya tidak :D Tutoria ini hanya untuk search engine google
• 
  Awalk KandossongAmien
• 
  Awalk KandossongSaya juga kurang tahu mas bro, soalnya ga' pernah tes :DSecara logika, blogspot seharusnya lebih cepat terindeks google karena blogspot bikinan google.Kalau menurut saya pribadi, keduanya bersaama…
• 
  yudhacomunity.blogspot.commas kok saya gak ada bendera mewah,hijau atau kuning nya ?? tanda kurang (garis penghubung dengan background merah kira2 itu bagai mana ya ?? bagus, lumayan, tidak bagus atau gimana ??? saya cek ada 3…
• 
  Rasito de Rastasaya sudah memasang SEO Doctor di blog saya. yang muncul bendera merah, keterangannya You have no H1 tags dan 2 H2 found before/without H1 (pages). Kira-kira bagaimana mengatasinya? saya masih pemula,…
• 
  Rasito de RastaTutorialnya langsung saya terapkan di blog saya dengan sedikit modifikasi, dan berhasil. Terima kasih...http://blogteika.blogspot.com/
• 
  vertise blog tipssukses terus gan, oea ane mau minta pendapat nih sukur-sukur admin mau memberikan jawaban yang bisa membantu, jadi begini ane mau nanya menurut admin blog yang cepat terindex blog yang mana, blogspot …
• 
  Awalk KandossongAgar breadcrumbs terindeks klik DISINI
• 
  sekedar wawasantrus agar bradcrumbs-nya bisa terindex di google pencarian itu gimana sob...mohon jawabannya,,,thanks
• 
  Keretaminiku.Com Produsen Kereta Mini Mainan Di IndonesiaInfo bermanfaat nih. Kalau selain blog dari blogger bagaimana?
• 
  Menciptakan 1.000.000 Netpreneur Baru, Gratis Facebook Store di LakuBGT.comInformasinya sangat bermanfaat. saya bisa melakukannya dengan tidak ada kendala. tutorialnya full mas bro.. Thank bro.. :D
• 
  AnonymousThanks buat infonya mas,, sukses slalu ya!
• 
  blogger remajamakasih mas, langsung ke tkp deh
• 
  ryan hidayatthank easlma ni gua coba dri web lainnya gagalrupanya dsni yg berhasilhttp://ryanhydayat.blogspot.comblog dofolowblog walking
• 
  lebayiya betul .. tergantung adminnya saja . pintar2 milih komentar yang baik :D
• 
  Anonymoushaa
• 
  Awalk KandossongCara membuat linknya kan sudah dijelaskan di tutorial diatas,,,.... mau link yg bagaimana lagi bro ???
• 
  Awalk KandossongKode widget gamapang sekali didaptkan bro... tinggal search di google = cara membuat ..............Ganti ...... dengan nama widget yg km inginkan
• 
  misterubannice info gan,..
• 
  Admin Sururpreneurruuaarrr biasa tipsnya, makasih bnget..
• 
  Admin Sururpreneurtutorialnya uda ane pake sob, dan hasilnya lumayan bagus, trims yo..
• 
  facewomanterima kasih,artikelnya sungguh berbobot
• 
  melia168nah tutorial yg ini baru cocok...sekian lama nyoba cara lain tetap ga' bisa. trims banyak..smoga barokah
• 
  Apa Saja Adaboss untuk mendapatkan kode widget gimana hehehe maaf baru belajar
• 
  i Postmantabh gan hehehehehehe
• 
  Awalk KandossongPosisi entri berubah ubah ??? Maksudnya apa ya ??? Kalau maksudnya 2 Kolom di halaman artikel ( Singlepost )3 kolom di halaman depan ( homepage ), itu menggunakan if condition. Tidak ada tutorialnya d…
• 
  Blog KeperawatanTerima kasih sahabat atas berbagi pengetahuannya ini sahabat..sangat embantu bagi saya yang sedang banyak belajar
• 
  share gameGw mau nanya.cara ngebuat posisi entri itu berubah-ubah gmana,?
• 
  share gameBagus euy..
• 
  tik tokbaru nemu tutor yg ginian..makasih banged Mas,sukses slalu buat Mas ya !
• 
  tik tokga da salahnya dicoba nih..makasih Kang tutorialnya
• 
  Aspar69mantap gan infonya...sudah ane praktekkan, ane tunggu kunjungan baliknya...
• 
  Awalk KandossongKAlau di HP, kayaknya harus pakai tampilan lama blogspot, soalnya Tampilan baru ga' didukung oleh OPMIN symbian saya :D. Kalau cara editnya sama saja mas bro
• 
  Awalk KandossongUntuk link download, Super Afiliasi bisa baca panduan membuat Link di KLIK DISINI. Kalau untuk link download, File yang mau di download harus di upload dulu di file hosting seperti ZIDDU, google site…
• 
  RamziUntuk search engine lain apa juga akan terindex ya ?
• 
  RamziKebetulan template blog yang aku pake nggak ada, langsung tutorialnya aku coba sobthanks :)
• 
  Iva Noermanteb bgt artikelnya...
• 
  Iva Noermanteb bgt artikelnya,,
• 
  cjwah, saya coba ya.. makasih artikel nya..
• 
  hidayahaku belajar banyak dari web... mkasih banyak....ditunggu kunjungan baliknya....
• 
  Super AffiliasiSalam Bloger,Saat datang di Bloggerbugis.com tentang Cara Membuat Breadcrumbs Terindeks saya sangat senang karena dapat belajar banyak.Konten-konten artikel yang lainyapun luar biasa banyak manfaatnya…
• 
  Iklan Internet Murah Efektif Berkualitas IndonesiaSaya berhasil membuat text iklan berjalan. hasilnya sempurna sob. Thank to share.
• 
  Iklan Internet Murah Efektif Berkualitas IndonesiaLangkah ini sangat mudah, dan saya berhasil membuat beberapa gadget seerti ini. Nice share.. salam sukses sob.. :D
• 
  sarang krototerimakasih gan. saya akan coba kurangi link eksternalnya.
• 
  Darmawan Saputrathx info yg sangat bermanfaat ini :)#Semoga sehat selalu
• 
  akangsuryathanks bos, sudah dilaksanakan perintahnya, thanks ya !! suksek selalu
• 
  muara boughlamtapi kalau di hp gimana gan, ea ane kalau edit template, suka erooor terus, masalahnya pengetahuan tentang kode html kurang gan
• 
  Awalk KandossongPermasalahannya ada pada blog yang dikomentari. Yang bisa mengatasinya ya.. admin blog itu sendiri
• 
  vertisekalau saya setiap akan memberikan komentar di blog teman saya, kenapa ea setiap saya Cape-cape nulis komentar,pas saya klik selesai, dan loading kan tuh di hp nya pas selesai loadih eh di kotak koment…
• 
  Cucunguk Rieutwow makasih mas, bener-bener langsung terindex nih.. good job!
• 
  aa SolahTerimakasih gan..
• 
  Irvan Virgianmakasih bro infonya :) sangat membantu
• 
  JefrySetelah mengaktifkan versi dasbor yang baru agak kerepotan dan untungnya dibantu oleh postingan ini, terima kasih
• 
  JefryTerima kasih atas ulasannya, saya jadi punya gambaran bagaimana memberikan komentar yang baik di blog semua sahabat blogger dan semoga komentar2 saya tidak masuk dalam kategori spamSukses selalu buat …
• 
  Adidaengkayak saya kenal ini yg punya blog, dimana yaa?mungkin di skitar Banta-Bantaeng....
• 
  Awalk KandossongIndonesia tidak perlu dipilih karena saat membuka formulir pendaftaran, country INDONESIA yang langsung terpilih. Jika ternyata bahasa lain, mungkin setting IP adress kompi kamu yg sudah di setting ma…
• 
  Mahar DiansyahMakasih bos...akhirnya kepasang juga kode google ane..thanks bro....
• 
  lenyko' pilihan indonesianya d' ada?
• 
  lenyko' da' ad pilihan indonesi di sna?
• 
  denny abywah mantap banget nich infonya,, ditunggu kunjungan baliknya ya sob..
• 
  Belajar NgeBlogWaah kenapa mesti dihapus postingan lama, khan bisa di edit atau di update isi artikel nya... Siiip mau cek posisi artikel blog dulu.
• 
  Zulham-9179berhasil gan.....
• 
  Farid Wajdi Kardbriwah, maksih infonya gan... sangat bermanfaat! :)

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>

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.
• 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..... 


Credit : http://www.bloggerbugis.com/2012/05/recent-comment-komentar-avatar.html