Cara Membuat Widget Populer Post Dengan Animasi

Sobat.. pada postingan saya mengenai tutorial blog kali ini, saya akan sharing ke sobat semuanya mengenai cara Membuat Widget Popular Post dengan Animasi pada blogspot, postingan ini untuk terus melengkapi postingan-postingan saya  sebelumnya mengenai tutorial blog guna mempercantik tampilan blog. Gambar dibawah ini adalah contoh Widget Popular Post dengan Animasi. 

Baiklah sob… tanpa panjang lebar lagi, kita langsung saja ke tutorialnya.

1. Silakan sobat login ke akun blog sobat.

2. Kemudian pilih Design > Page Elements

3. Jika pada blog sobat belum terpasang widget popular post, silakan sobat tambahkan dengan mengklik “Add Gadget” dimana saja yang sobat inginkan dan jangan lupa akhiri dengan mengklik tombol save

4. Selanjutnya silakan sobat klik lagi “Add Gadget” dan tambahkan gadget  HTML/Javascript kemudian copas kode dibawah ini dan akhiri dengan mengklik tombol save.

<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}
#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}
a img {
    border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Nah Sobat, Widget Popular Post dengan Animasi sekarang sudah jadi. Silakan sobat simpan terlebih dahulu settingan pada Page Elements tadi kemudian liat hasilnya.

SEMOGA BERMANFAAT...

Posted in: