Di tutorial kali ini, saya akan membagikan cara bagaimana menampilkan pemberi komentar blog kamu tetapi dengan terlihat avatarnya. Ya kira-kira tampilannya seperti gambar diatas. Langsung saja, ke tutorialnya oke :
1. Masuk ke Blogger.com
2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript --> Masukkan kode HTML/Javascript di bawah ini kedalam kotak HTML/Javascript
<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: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<p style="display:none;">Widget By<a href="http://hzndi.blogspot.com/">Tutorial Blog</a></p>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://NAMA-BLOG-KAMU.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
NOTE :
- numComments = 5, adalah jumlah komentar yang akan ditampilkan
- Ganti http://NAMA-BLOG-KAMU.blogspot.com dengan alamat web/blog kamu.
ooo jd tetap kliatan profile pict nya ya.. hmm
ReplyDeleteho'oh silakan dicoba neng NF :p
DeleteWah keren deh kalau begitu. Nanti saya coba deh kalau banner gede di blog q sudah gak ada.
ReplyDeleteloh kenapa ga dicoba sekarang aja hehe
Deletethanks bgt nich sob langsung ane praktekkan di blog ane,
ReplyDeletelihat aja dah ane pasang,,
trimakasih bnyak ya sob, sangat bermanfaat,,,
oke sobat sama2 makasih yah sudah datang
Deletecantik euy.. tapi sepertinya coock untuk template yang besar2.. :)
ReplyDeleteyang kecil2 juga cucok gan :D
DeleteWahh manteb nihh sob :)
ReplyDeletehehe iyah dong :D
Deletemakasih bang
ReplyDelete