Cara Membuat Widget Recent Comments dengan Avatar di Blog

Widget Recent Comments adalah widget yang menampilkan komentar terkahir yang masuk. Widget ini sangat bermanfaat bagi pengunjung untuk mengetahui komentar terakhir yang masuk. Ini juga bisa menjadi alternatif bagi Anda yang ingin cek komentar tanpa harus masuk ke akun blogger Anda.


Cara Membuat Recent Comments Widget dengan Avatar di Blogger
1. Buat widget baru HTML/JavaScript
2. Simpan kode dibawah ini pada widget, berikan judul terserah anda.
<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 http://cidoshare.blogspot.com
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 30,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://mzaini30.github.io/library/js/rcwa.js"></script>
<script type="text/javascript" src="http://cidoshare.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
3. Perhatikan kode diatas, kode yang berwarna merah bisa disesuaikan dengan selera Anda :
numComments  = 5, (jumlah komentar yang ditampilkan)
showAvatar  = true,
avatarSize  = 30, (ukuran avatar dalam pixel)

roundAvatar = true,
characters  = 30, (jumlah karakter yang ditampilkan)
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", (url avatar)
hideCredits = true;
4. Ganti cidoshare.blogspot.com dengan blog Anda, ganti max-results=5, sesuai jumlah komentar yang ditampilkan.
5. Simpan.

Demikian tutorial Cara Membuat Widget Recent Comments dengan Avatar di Blog ini bisa membantu mempercantik blog anda. Semoga bermanfaat

Reaksi:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser