Cara Membuat Recent Comment Dengan Avatar di Blog

Cara Membuat Recent Comment Dengan Avatar di Blog - Pada kesempatan kali ini saya akan memberikan tutorial membuat recent comment dengan avatar di blog. Recent Comment berfungsi untuk menampilkan komentar terakhir pada blog kita. Biasanya recent comment ini terletak pada sidebar blog. Pada tutorial ini saya menggunakan fitur widget dari blogger,jadi kita nantinya tidak perlu edit html. Baiklah,berikut saya sajikan beberapa cara membuat widget recent comment dengan avatar di blog.

Pertama-tama buka blogger >> layout >> klik tambah widget/add a wiget

Lalu akan muncul sebuah popup dan sedikit scroll kebawah dan klik "HTML/Javascript"

Bila sudah, silahkan sobat pastekan kode berikut pada text box(yang bawah).


<style type="text/css">
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px 
!important;padding: 0 0 6px 0 !important;display: block;clear: 
both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments 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;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments 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  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWIXZl3bcWp_9-mHX1D_sVMI-5T1CFeMn2ENIegIry1HxnDvw0vcuAcT2n1qwHVmrvKaol6AgMdBSMxZ9Ry-CEFcE2LPAbc-oLyZBwvxUpLXX2J1YTHaVyBoYkug_kIXnd_sY3WCCOalmb/s1600/default-avatar.jpg",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" 
src="http://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]recent-comments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div
 style="font-size: 10px; float: right; margin-top: -15px">Get this 
<a 
href="http://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html"
 rel="nofollow" >Recent Comments Widget</a></div>

Note:
- Silahkan ganti angka 5 pada numComments dengan jumlah komentar yang akan sobat tampilkan
- Ganti link gambar berikut dengan gambar yang akan sobat jadikan avatar Anonymous

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWIXZl3bcWp_9-mHX1D_sVMI-5T1CFeMn2ENIegIry1HxnDvw0vcuAcT2n1qwHVmrvKaol6AgMdBSMxZ9Ry-CEFcE2LPAbc-oLyZBwvxUpLXX2J1YTHaVyBoYkug_kIXnd_sY3WCCOalmb/s1600/default-avatar.jpg

- Untuk mengganti ukuran avatar,silahkan ganti angka 60 pada avatarSize
- Untuk mengubah avatar menjadi persegi,silahkan hapus css .avatarround

Jika sudah silahkan klik tombol "Simpan"/"Save" dan lihat hasilnya pada blog sobat.

Diatas adalah beberapa cara yang bisa sobat lakukan untuk membuat recent comment dengan avatar di blog. Cukup sampai disini dulu artikel "Cara Membuat Recent Comment Dengan Avatar di Blog". Bila sobat mengalami kesulitan dalam hal ini jangan sungkan untuk bertanya lewat komentar ya. ^_^

Source : http://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html

Blogzebub

"Jadilah manusia yang haus akan ilmu dan jangan pernah merasa puas dengan ilmu yang di dapat"

Blogzebub

Cara Membuat Recent Comment Dengan Avatar di Blog

Blogzebub

Artikel Terkait

2 komentar