Cara Membuat Recent Comment With Avatar di Blogspot

Enggak jauh berbeda dengan tutorial sebelumnya tentang cara membuat Recent Comment bergerak, kali ini pun aku kembali share tentang cara pembuatan recent comment atau komentar terakhir yang lengkap dengan avatar. Dan seperti yang aku sebutkan diatas, kali ini terdapat perbedaan dari segi penampilannya, dimana pada recent comment kali ini akan menampilkan avatar atau foto profil si pemberi komentar. Ok, seperti apakah dan bagai manakah cara pembuatan serta hasil akhirnya? Mari kita mulai saja.

Bismillaahirrohmannirrohiim... 

Cara Membuat Recent Comment with Avatar di Blogspot

Login kedalam dasbor blog

Pilih tata letak

Pilih tambah/add a gadget

Pilih HTML

Copy paste kode di bawah ini kedalam gadget HTML

<div style="overflow:auto;width:300px;">
<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: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://ceritangeblog.googlecode.com/files/Recent%20coments%20avatar.js"></script>
<script type="text/javascript" src="http://namabloganda.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=9999"></script>
</div>

Keterangan: ubahlah alamat url blog yang berwarna merah atau yang bertuliskanhttp://namabloganda.blogspot.com dengan alamat url blog sobat masing-masing. Untuk mengatur lebar dan tinggi ,serta berapa jumlah komentar yang ingin ditampilkan, silahkan untuk merubah tiap-tiap nomer yang sengaja aku cetak tebal dan aku warnai dengan warna biru dalam kode script diatas tersebut.

Terakhir pilih simpan gadget dan selesai.

Recent comment with avatar sekarang sudah terpasang dalam sidebar blog sobat, very nice.!! Penampilannya kurang lebih akann terlihat persis seperti dalam gambar di bawah iini.

Demikiann saja tutorial lanjutan tentang cara membuat recent comment with avatar di blogspot, aku ucapkan selamat mencoba dan Insya Allah kita jumpa lagi dalamm kesempatan yang lain. Bye-bye....

Sumber: http://cerita-ngeblog.blogspot.com/2013/07/cara-membuat-recent-comment-with-avatar.html