Membuat Widget Recent Comments dengan Avatar untuk Blogger

Widget Recent Comments dengan avatar memberikan tampilan interaktif dan menarik pada blog Anda, sehingga pengunjung dapat melihat komentar terbaru yang disertai dengan gambar avatar dari pengomentar. Untuk menambahkannya di Blogger, Anda dapat mengikuti langkah-langkah berikut.

1. Buat widget baru HTML/JavaScript
2. Simpan kode dibawah ini pada widget

<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  = 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://cdn.jsdelivr.net/gh/H48U/inBlogCode@master/recentcomntcode.js"></script>
<script type="text/javascript" src="https://inblogcode.org/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

3. Perhatikan kode diatas, kode yang berwarna biru bisa disesuaikan dengan keinginan Anda :
• numComments = 5, (jumlah komentar yang ditampilkan)
• avatarSize = 30, (ukuran avatar dalam pixel)
• characters = 30, (jumlah karakter yang ditampilkan)
4. Ganti inblogcode.org dengan blog Anda, ganti max-results=5, sesuai jumlah komentar yang ditampilkan.
5. Simpan.

✖

Bagikan:

• Bagikan melalui Facebook Bagikan melalui Twitter Bagikan melalui Pinterest Bagikan melalui Whatsapp Bagikan melalui Linkedin Bagikan melalui Telegram

Subscribe Our Newsletter