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.. 

Continue Reading...

Add Simple Recent Post Widget

Okey, yuk kita bahas di sini mengkostumisasi blog kita biar terlihat lebih user friendly dan keliatan menarik,
pembahasan kali ini Add Simple Recent Post Widget , gw pengen mengkostumisasi gimana caranya agar post terakhir yang kita tulis bisa ada di widget blogspot kita, like this.

Recent Post Widget

oke guys, yang perlu kalian lakuin adalah sebagai berikut :

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 :

<div id="hlrpsa">
<script src="http://skyhun.byethost7.com/recent_post.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://skyhun.blogspot.com/2013/07/add-simple-recent-post-widget.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://skyhun.blogspot.com" title="Recent Posts Widget">Skyhun Blog</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcFRF4MZ93Fmz9sxYRDQg7uvVcB2W8XFIA_LzUFL_fb7NBB0RSGnuVIvpq-vaYkIYcBLxm_yNdlOrihxj3cX8QygLwtMiDcWVHxLqTAFBAdfSaiuthw0BZLGEm7ec8UH_ttD-4mmZ_DC1/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

4.

• Ganti 5 dengan number post yang ingin di tampilkan. 
• Ganti false to true jika kamu ingin menghilangkan post date.
• Ganti 100 jika kamu ingin menambahkan jumlah karakter pada display.
• Untuk mengganti warna links dan besar ukuran font, ganti yang  text biru (links) dan ungu (font-size)
• Untuk mengganti tulisan style di post, ganti tulisan text hijau (warna) dan orange (font size)
• Ganti tulisan your-blog dengan link url blog yang kamu punya, seperti contoh di bawah ini :

http://www.skyhun.blogspot.com/feeds/posts/default....

Step 5. Save your widget. And that's it.! Enjoy..

Continue Reading...

Mukadimah

Hello guys, wah jadi juga ini blog, walaupun ngerjain nya dengan bercucuran keringat, menghabiskan banyak waktu dan membutuhkan ide, hehe lebay ya..?qeqe
oke lah gak usah kebanyakan cingcong..semoga coretan coretan di blog ini blog bisa menambah wawasan bagi pembaca dan bagi penulis khususnya..

Thanks for Visiting My Blog

enjoy..

Continue Reading...