email
PhotobucketPhotobucketPhotobucket
0

Popular Post Widget Dengan Animasi

Bismillah, Alhamdulillah. Sudah lama saya sebenarnya ingin jadi Guest Author di Blognya Kang Rohman, baru kali ini ada kesempatan dan diperbolehkan Kang Rohman. Widget kali ini adalah Popular Post Dengan Animasi. Widget sejenis ini sudah lama pernah saya bikin Popular post for blogger menggunakan Json Tetapi Sekarang Blogger telah membuat popular post dari Blogger Stats . Sekarang saya membuat Popular Post Untuk Blogger dengan animasi. Widget ini menggunakan trick saya sebelumnya Recent Post dengan Animasi Menggunakan "simple spy".













Silahkan lihat Demo


Script ini sangat mudah tinggal masukkan Script di bawah ke dalam "Gadget" Blogger




  • 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


Explanation of Popular Post with Animation


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

Jangan copy postingan ini, ini original dalam bahasa inggirs pada New Popular Post for Blogger With Animation
Read more
 

Blogger Tube

Blogger Tube
contoh DEMO klik gambar

Rock All Night

Rock All Night
contoh DEMO klik gambar

Business View

Business View
contoh DEMO klik gambar

Cameo

Cameo
contoh DEMO klik gambar

Studeno

Studeno
contoh DEMO klik gambar

FRANKLE

FRANKLE
contoh DEMO klik gambar

Photo Gallery

Photo Gallery
contoh DEMO klik gambar

Malina

Malina
contoh DEMO klik gambar

Guild Wars

Guild Wars
contoh DEMO klik gambar

Liberation

Liberation
contoh DEMO klik gambar

i Movies

i Movies
contoh DEMO klik gambar

New Story

New Story
contoh DEMO klik gambar