Wednesday, July 24, 2013

Add Recent Comments With Avatar Widget

hey guys, apa kabar nya nih..? semoga masih dalam keadaan sehat wal-afiat ya.. Aamiin, oke sebelum nya gw dah share mengenai Add Simple Post Widget di pembahasan sebelumnya, sekarang yuk kita bahas mengenai abangnya (lah kok ke abang..?haha) yang gak jauh berbeda fungsinya untuk mempercantik blog kita. Gak usah kelaaman deh sesuai judul Add Recent Comments With Avatar Widget yang akan gw bahas, seperti gambar di bawah ini :

Add Recent Comments With Avatar Widget


yang harus kalian lakuin adalah sebagai berikut :

1.  1. Login ke akun blogspot, kemudian klik Layout dan klik Add a Gadget  link

Add A Gadget


2. Kemudian akan muncul pop up window, scroll ke bawah kemudian pilih HTML/JavaScript

Add HTML/JavaScript

3. select dan copy paste kode 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="http://skyhun.byethost7.com/recent_comments.js"></script>
<script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

4.  
  •  Ganti 5 dengan number comments yang ingin di tampilkan seperti di bawah ini :
numComments  = 5

and

 &max-results=5 
  • Untuk mengganti anonymous avatar ganti kode link yang anda punya di bawah ini :  
 http://www.gravatar.com/avatar/?d=mm 
  •   Ganti 60 size avatar dengan size yang anda inginkan.
  • Ganti tulisan your-blog dengan link url blog yang kamu punya, seperti contoh di bawah ini :
http://www.skyhun.blogspot.com/feeds/comments/default.... 
Step 5. Save your widget. And that's it.! Enjoy.. 

0 comments:

Post a Comment

 

Subscribe to our Newsletter

Contact our Support

Email us: Support@skyhun.blogspot.com

Our Team Memebers