Cara Membuat Widget Komentar Beserta Avatar

Oleh:   Farabi   |   22:02

Bagikan Tweet Share Email

Nadifa.id - Hi semuanya, selamat liburan yahh hari ini hahaha. Okayy Widget Komentar adalah Widget yang menampilkan komentar terbaru di halaman depan blog anda. Widget ini selain untuk menampilkan komen terbaru, Widget ini juga menampilkan Avatar komentarnya. Sebagai contohnya seperti di bawah ini.

Baca Juga : Kabar Duka dari Google Adsense

Tertarik untuk nyobain nih Widget? Ikutin aja tutor di bawah untuk lebih lanjut

1. Login terlebih dahulu ke dashboard Blogger anda

2. Masuk ke Tata Letak -> Tambah Gadget -> HTML/Javascript

3. Lalu masukkan script di bawah ini

<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="http://gemar-html.googlecode.com/svn/trunk/js/widget-komentar-terbaru-dengan-avatar-bulat.js"></script>
    <script type="text/javascript" src="http://www.nadifa.id/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

4. Sebelum di save, ganti "http://www.nadifa.id/" dengan url blog anda dan bila ada ingin menampilkan jumlah komen yang lebih banyak silahkan ganti pada bagian "max-results=5"
5. Save/Publikasikan

Sekian mungkin yang bisa saya sampaikan, bila masih ada yang belum mengerti silahkan tinggalkan komentar di bawah :)