Membuat Widget Popular Post dengan Animasi

Membuat Widget Popular Post dengan Animasi - Assalamu’alaikum sobat blogger… bagaimana kabarnya? Mudah-mudahan sehat selalu yah.. Setelah beberapa waktu yang lalu kita telah melewati bulan ramadhan sebulan penuh kemudian dilanjutkan dengan libur lebaran yang insyaALLAH penuh kesan, semoga setelah semuanya berlalu semangat ramadhan masih melekat di diri kita, amiiin….

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. Jika sobat ingin melihat versi demonya silakan sobat klik disini (Sok atuh di klik)

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.

Saya rasa cukup sampai disini dulu postingan saya mengenai cara Membuat Widget Popular Post dengan Animasi kali ini, semoga bermanfaat.