Untuk sobat yg ingin hasil karya.nya terpampang di blog ini ..!!! silahkan krim ke e-mail kami : Umisbahul76@yahoo.co.id atau isi buku tamu atau dengan " kontak by YM ( yahoo! messenger ) ".Terima Kasih

1/19/2013

cara memasang widget recent comments blog



 Pada kesempatan kali ini saya ingin berbagi lebih dulu cara memasang widget blog yang apik berikut.
Recent Comments With Avatar 2
Ya… widget recent comments atau widget komentar terbaru. Sebagaimana widget blogger yang lain yang memiliki banyak versi ataupun modifikasi maka widget recent comments ini juga merupakan versi kesekian kalinya disamping widget serupa yang pernah saya posting. Perbedaaan widget ini dengan pendahulunya, widget recents comment ini dilengkapi dengan avatar atau pic profil komentator dan bisa dimodifikasi lagi dengan penambahan CSS rounded pada avatar.
Baiklah berikut tutorial step by step cara memasang widget recents comments with avatar seperti pada tampilan image diatas.


1. Loggin ke blog anda

2. Pada dasbor >> Pilih Tata Letak >> Add Gadget >> HTML/JavaScript

3. Copy kode berikut dan paste kedalam kolom HTML/JavaScript:
<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://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar.js"></script>
<script type="text/javascript" src="http://www.tipstrikblogging.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
<small><div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/09/pasang-widget-recent-comments-dengan.html" target="_blank" title="Widget Recent Comment">Get This Widget</a></div></small></div>
Sebelum anda save perhatikan kode diatas yang berwarna biru
width:300px; (sesuaikan dengan lebar, supaya mudah ubah saja jadi 100%) 
numComments (jumlah komentar yang ingin ditampilkan) 
avatarSize (ukuran avatar atau gambar profil) 
characters (jumlah kata pada komentar yang ingin ditampilkan)
URL feed comment blog ini ganti dengan blog anda!
4. Klik simpan/ save.

Demikian tutorial membuat recent comment with avatar pada blog. Semoga bermanfaat!

Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
YOUR ADSENSE CODE GOES HERE

0 komentar:

FOLLOWERS

 

About Me

Anda Pengunjung Ke

Translate

| Blog ELMILA © 2013. All Rights Reserved | Template Style by My Blogger Tricks .com | Design by Misbahul Ulum | Back To Top |