Thursday, January 15, 2015

Cara Membuat Recent Comment dengan Avatar di Blog

Recent Comment merupakan widget blog yang berfungsi untuk menampilkan komentar-komentar terbaru dalam sebuah blog. Widget ini lumayan penting untuk dipasang di blog, karena untuk memberitahukan kepada pengunjung blog kita mengenai komentar-komentar terbaru yang masuk atau dikirimkan ke postingan blog kita.


Recent Comment dengan Avatar

Widget Recent Comment ini disertai dengan Avatar atau Foto Profil agar dapat mengenali sosok seseorang yang mengirimkan atau mempublikasikan komentar tersebut. Untuk cara memasangnya, sobat dapat simak uraiannya dibawah ini.

Berikut langkah-langkahnya:

1. Login ke Akun Blogger.
2. Masuk ke Dasbor Blog, pilih Tata Letak > Tambahkan Gadget.
3. Klik HTML/JavaScript lalu salin dan letakkan kode dibawah ini ke dalamnya.

<style type="text/css">
    ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
    .sakahayang_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;}
    .sakahayang_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;}
    .sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .sakahayang_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  = 100,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=100,
 adminBlog='Muhammad harish Abdurrahim';
//]]>
</script>
<script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwanau.js"></script>
<script type="text/javascript" src="http://puloblog.blogspot.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&&max-results=100"></script>

Keterangan:
  • numComments = 5 (Banyaknya komentar yang ditampilkan)
  • avatarSize = 30 (Ukuran Avatar/Profil Komentar)
  • characters = 100 (Jumlah karakter komentar yang ditampilkan)
  • adminBlog='Muhammad harish Abdurrahim' (Ganti dengan Nama kamu)
  • http://puloblog.blogspot.com (Ganti dengan URL Blog kamu)
4. Langkah terakhir jangan lupa klik Simpan.

Nah, demikianlah tutorial blogger singkat untuk kesempatan hari ini, semoga cara ini dapat bermanfaat untuk sobat blogger semua.
Sekian, terima kasih.
Disqus Comments