15 April 2013
Saya kongsikan tutorial untuk ubah style Recent Comments Widget anda judt like mine, nampak lebih menarik dan tersusun.
1. Go to blogger dashboard --> Layout --> Add a Gadget [ Html / JavaScript ].
<style type="text/css">
/*recent comments widget by bloggertricks.biz*/
ul.latest_recent_comments{
list-style:none;
margin:0;
padding:0;
}
.latest_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;
}
.latest_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;
}
.latest_recent_comments li img{
padding:0px;
position:relative;
overflow:hidden;
display:block;
}
.latest_recent_comments li span{
margin-top:4px;color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
.latest_recent_comments span{
display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[ // Recent Comments Settings var numComments = 5, showAvatar = true, avatarSize = 60, roundAvatar = true, characters = 30, showMorelink = true, moreLinktext = "More �", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true;//]]></script>
<script type="text/javascript"
src="https://bloggertricksdotbiz.googlecode.com/svn/js/recent%20comments.js"></script>
<script type="text/javascript" src="http://alamslegacy.blogspot.com//feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=6"></script>
3. Edit numComments in red color if u want more than 5 appear in your blog
4. Replace url with your blog url (highlighted with blue color). Then save.
Now go to your blog and view the official recent comments widget showing recent comments with commentators image rounded.
Enjoy
Assalammualaikum....
ReplyDeleteTerima kasih alamslegacy atas bantuan yang diberikan....
mselim3 dah dapat cara nak tukar template tu....
xper tengah proses ... insaallah kalu berjaya atau tidak pape nanti mselim3 bgtahu...terima kasih bebanyak...u are nice blogger...
mselim3
Waalaikumsalam......ok bro takde hal laah....chaiyuk2 nak tgk jugak blog bro tu yg berwajah baru...thanks atas pujian....sy biasa2 saje
DeleteNak komen kat sini sebab ada nama wan kat situ...kat tgh2 plak tuh...wakkaakak. Anyway, good tutorial for bloggers especially blogspot user. :)
ReplyDeleteha3....saje amik ada muke wan....thanks
ReplyDeletewahhh.. cantik juga kalau icon bulat ni...
ReplyDeletekak mia try la kat blog....mesti comel
DeleteWah..menarik2...jazakallah...
ReplyDelete