Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Membuat Widget Recent Comments plus Avatar

Membuat Widget Recent Comments plus Avatar - Recent Comments adalah cara untuk menampilkan komentar-komentar terbaru dari para pengunjung blog kita. Biasanya dipasang pada widget. Yang Sinahu Coding share kali ini bukan hanya cara untuk menampilkan recent comments, tapi juga dilengkapi dengan gambar avatar yang akan membuat tampilan blog kamu tampak lebih profesional.

Untuk blog yang belum dimodifikasi, masih menggunakan template bawaan atau template lain, biasanya untuk memeriksa komentar terbaru harus login dulu ke blogger dan memeriksanya di daftar postingan.

Kan agak ribet tuh kalau harus login dulu. Nah, dengan menggunakan fungsi recent comments ini, kamu bisa memonitoring komentar-komentar baru yang masuk tanpa perlu login terlebih dahulu. Cukup dengan mengakses url blog kita.

Membuat Widget Recent Comments plus Avatar


Cara Membuat Widget Recent Comments plus Gambar Avatar



1. Login ke Blogger
2. Tambahkan gadget pada mode HTML/JavaScript
3. Masukkan kode di bawah ini

<style type="text/css">
    ul.sinahu_recent_comments{list-style:none;margin:0;padding:0;}
    .sinahu_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;}
    .sinahu_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;}
    .sinahu_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .sinahu_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 11px;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  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=20,
 adminBlog='Sinahu Coding';
//]]>
</script>
<script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwanau.js"></script>
<script type="text/javascript" src="http://sinahu-coding.blogspot.com/feeds/comments/default?alt=json&callback=sinahu_recent_comments&&max-results=20"></script>

3. Simpan

Keterangan di bawah ini bisa diganti dan dirubah sesuai selera:

  • numComments  = 5, (jumlah komentar yang ditampilkan)
  • showAvatar  = true,
  • avatarSize  = 30, (ukuran gambar avatar dalam pixel)
  • roundAvatar = true,
  • characters  = 40, (jumlah karakter yang ditampilkan)
  • defaultAvatar  = " http://www.gravatar.com/avatar/?d=mm", (url gambar avatar)
  • hideCredits = true;
  • maxfeeds=20, (feed yang di load, samakan dengan max-results)
  • adminBlog='Sinahu Coding'; (nama tampilan admin)

4. Ganti sinahu-coding.blogspot.com dengan alamat blog kamu
5. Simpan

Bagaimana konco sinahu? Mudah kan? Selamat berkreasi dan sekian postingan sinahu coding kali ini tentang Membuat Widget Recent Comments plus Avatar. 



0 Komentar untuk "Membuat Widget Recent Comments plus Avatar"

Back To Top