Langsung ke konten utama

Membuat Widget Recent Comments dengan Avatar untuk Blogger

Gambar

Messages
0
Points
+3220

Reputation: 0%

New #1
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
  3. 
    <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>
    
  4. 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)
  5. Ganti inblogcode.org dengan blog Anda, ganti max-results=5, sesuai jumlah komentar yang ditampilkan.
  6. Simpan.
0

Reviews

Give your rating
Back to top Back to bottom