Cara Menciptakan Widget Komentar Avatar Di Blog

Cara Membuat Widget Komentar Avatar di Blog

Widget komentar yang diletakkan di sidebar atau di Footer, terkadang menjadi motivasi bagi pengunjung blog kita untuk menawarkan komentar alasannya ialah komentar mereka plus foto mereka eksklusif terpampang di widget komentator. Lho... Foto atau gambar dari komentator kok sanggup terpampang di widget komentar? Karena Widget Komentar ini ialah Recent Comments Widget with Avatar (Widget Komentar yang menampilkan Avatar).

Tidak sedikit blog atau situs yang memasang widget komentar dengan avatar ini, alasannya ialah selain bermanfaat buat blog sanggup juga memperindah tampilan blog. 


1. Loggin ke blogger --> Tata Letak -->Tambah Gadget --> HTML/Javascript
2. Copy arahan di bawah ini:


<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_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;}
.tb_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;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<p style="display:none;">Recent Comments Widget with Avatar by <a href="https://edu.paperplane-tm.site/">Judul Blog</a></p>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments  = 5,
showAvatar  = true,
avatarSize  = 60,
roundAvatar = true,
characters  = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://tutorialblogspot.googlecode.com/files/recentcommentavatar.js"></script>
<script type="text/javascript" src="https://edu.paperplane-tm.site/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>


3. Simpan


Catatan:

- Ganti goresan pena warna biru dengan jumlah komentar yang ingin Anda tampilkan
- Ganti goresan pena warna merah dengan URL blog sobat, kemudian simpan Widget
- Jika teman blogger memasang komentar Google Plus, maka widget Komentar Avatar ini TIDAK BISA di pasang di blog sobat. 


Semoga bermanfaat...