Random Popular Post dengan Animasi

Ketika kita blogwalking banyak hal-hal menarik yang kita lihat dalam blog para blogger, diantaranya adalah widget yang ada di sidebar ataupun pada home page blog tersebut. Hal ini pulalah yang menguatkan kita untuk mempercantik blog sehingga visitor blog terkisima ketika berkunjung ke blog yang kita miliki. Ada manfaatnya kita mempercantik blog, salah satunya yaitu dengan membuat Random Popular Post dengan Animasi. Popolar post juga sangat penting, manfaatnya yaitu sebagai informasi kepada pengunjung agar ikut serta membaca popular post dalam blog kita.

 

 

 Random popular post jika kita lihat sangat menarik, dan memberikan daya tarik pada sebuah blog. Hal ini tidak asing lagi di dunia blogger, karena banyak para blogger juga memasangnya pada blog mereka. Mungkin Anda juga tertarik memasangnya kedalam blog yang Anda miliki, akan tetapi bagai mana caranya ?

 

Nah, tidak usah berbingung ria, disini saya sudah mempersiapkan konsep yang sangat mudah untuk Anda. Sebelumnya trik ini sudah saya terapkan kedalam blog kedua saya dan berhasil, nah bagai mana sekarang ? Apakah Anda tertarik menerapkannya kedalam blog yang Anda miliki.? jika ya, yuk kita langsung ke TKP. Sebelumnya saya informasikan random popular post ini ditempatkan di sadbar blog.

• Masuk ke Blogger Dashboard dan Pilih Design - Page Elements
• Klik "Add Gadget" dan pilih "Popular Posts" jumlah popular postingan harus lebih banyak dari 4 (Jika sudah ada gadget ini jangan masukan lagi)
• Setelah anda mempunyai Popular Post Gadget kemudian klik "Add Gadget" lagi dan pilih "HTML/Javascript"
• Letakan semua script di bawah ke dalam "Content" dari HTML/Javascript Gadget
• Selesai, semua otomatis menjadi Popular post mempunyai animasi

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>

Ok, saya rasa sudah cukup jelas bagaimana cara membuat Rendom Popular Post dengan Animasi, jika Anda sudah berhasil saya harapkan untuk memberikan komentar dibawah ini sebagai pemberitahuan kepada saya.
Untuk random postingan otomatis Anda dapat membacanya disini