cara membuat widget recent comments dengan avatar 2013

 
widget ricent coment adalah sebuah widget yang dipasang pada kolom tataletak tetapi widget ini juga bisa dipasang pada edit html pada blog anda widget ini berfungsi sebagai penampil dari koment penggunjung sebelum di tampilkan pada blog anda
dan kelebihan oleh widget ini adalah style ,keren karna efek yg ditampilkan adalah avatar bulat
dan pada kesempatan kali ini kita akan membuat widget tersebut,tentunya dengan cara yang sangat mudah untuk anda,walaupun anda adalah pemula dalam dunia blogger ini.

baiklah kita mulai cara pembuatan widget ini

1,sebelum nya anda harus login dulu dalam bloger anda,
2.setelah anda masuk ke dalam blog anda silahkan anda masuk ke halaman tata letak kemudian anda klik tambah gadget,cari tambah html
3.setelah itu anda masukan  kode html yg ada di bawah ini

<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 = 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="https://daftar-javascript-kami.googlecode.com/files/Recent%20Comments.js"></script>
<script type="text/javascript" src="http://cabeijo28.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
<div style="text-align:center">
<span style="float:left;font:italic 10px Arial, Sans-Serif; color:#3D3D3D;"><a target="_blank" href="http://your-belajarblog.blogspot.com/2013/03/cara-membuat-widget-recent-comments.html">.:Get Widget:.</a></span>
</div>
keterangan yg perlu anda ingat
bahwa tulisan yg berwarna kuning di atas adalah menentukan jumlah kolom komentar yg akan anda tampilkan
bahwa tulisan yg berwarna hijau di atas adalah menentukan  gambar url avatar anda ukuran (80x80)
dan tulisan yg berwarna merah anda ganti dengan url blog anda

nah demikian lah sedikit tutorial yg bisa saya bagikan dengan anda semogga bisa bermanfaat buat anda semua


0 komentar:

Posting Komentar