Cara Membuat Recent Comment Dengan Profil /Avatar

Recent Coment Adalah widget yang akan menampilkan beberapa komentar terakhir di blog kita.Dengan adanya recent comment ini memudahkan kita ...


Recent Coment Adalah widget yang akan menampilkan beberapa komentar terakhir di blog kita.Dengan adanya recent comment ini memudahkan kita untuk mengetahui teman  yang sudah komentar di artikel kita tanpa takut terlewatkan untuk kita balas,.

Widget ini sangat membantu bagi kita yang tidak menggunakan moderator komen, karena tanpa mengecek moderator komen kita sudah dapat mengetahui siapa saja yang baru saja kometar di artikel kita,karena komentar yang baru akan tampil di bagian atas.

Disini saya akan memberikan cara membuat recent comment yang menggunakan gambar kita atau profil avatar.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.

Oke langsung saja,Caranya sangat mudah,ikuti langkah-langkah berikut;

  • Tambahkan gadget baru.
  • Pilih widget yang HTML/java script.
  • Masukan script yang ada di bawah.
  • Save dan selesai.



<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/harysuka/top-comentar/Recent_Comments.js?attredirects=0&d=1"></script>
<script type="text/javascript" src="http://harysukasuka.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script>


Jika sobat mau,kode untuk membuat recent coment dengan gambar ini masih bisa di edit kembali.Silahkan sobat edit kode yang berwarna BIRU 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,sobat bisa gunakan halaman ini "cara membuat 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://harysukasuka.blogspot.com dengan URL / alamat blog anda agar widget Recent Comments yang ada di blog anda tidak menanmpikan komentar yang ada di blog saya 
Itu dia sobat,cara membuat recent coment dengan menggunakan gambar / avatar.
Bagaimana.? Apakah sobat tertarik..??

COMMENTS

BLOGGER: 6
Loading...

Ads 970x90

Nama

allianz,1,andro textile,1,android,6,asmara,1,asuransi,1,award,3,berita,45,bisnis,4,cap kaki tiga,1,commonwealth,2,daftar isi,5,decoder,1,download,15,efek blog,5,elektronik,2,entertainment,3,facebook,18,family,3,flora dan fauna,7,gadet,1,galuh,8,google,17,google adsense,2,google plus,24,hiburan,28,HostingPangeran,1,hotel murah,1,ICAN Education,1,iddetik.com,1,iklan,1,jadwal timnas,1,jasa,1,keindahan alam,2,keluarga,1,kesehatan,1,klasemen,6,komputer,2,kontes,22,kuliner,3,lain-lain,52,Margahayuland 42 tahun membangun,1,maruyungsari,9,olahraga,35,otomotif,9,paket wisata,1,pengalaman,2,persib,2,profil,2,puisi,2,religi,25,review produk,2,sambut brazil,2,seluler,2,software,1,superwash,1,tutorial dan trik blog,74,twitter,4,video,3,widget,1,wisata,5,youtube,11,
ltr
item
BLOG MASHARI: Cara Membuat Recent Comment Dengan Profil /Avatar
Cara Membuat Recent Comment Dengan Profil /Avatar
http://4.bp.blogspot.com/-ZezrPeT5tFA/UPaM9-m8ySI/AAAAAAAAAmk/qjG3Hyq2SrY/s320/recent.png
http://4.bp.blogspot.com/-ZezrPeT5tFA/UPaM9-m8ySI/AAAAAAAAAmk/qjG3Hyq2SrY/s72-c/recent.png
BLOG MASHARI
https://harysukasuka.blogspot.com/2013/01/cara-membuat-recent-comment-dengan.html
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/2013/01/cara-membuat-recent-comment-dengan.html
true
1510860441598238899
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy