SERBA-SERBI :

Popular Post Widget dengan fitur Animasi

Ditulis oleh Andre pada hari Kamis, 03 Februari 2011 | 08.56

Tentunya anda tahu widget Popular Post, dimana widget tersebut menampilkan artikel yang banyak dikunjungi oleh visitor. Nah, jika widget Popular Post ini dirasa tampilannya kurang menarik, kita bisa menjadikannya lebih menarik, yaitu dengan ditambahkan efek animasi. Berminat??

Jika sebelumnya saya pernah posting tentang Cara Membuat Banner Animasi, kali ini saya akan coba bahas tentang Cara Membuat Popular Post Widget dengan Animasi. Seperti yang saya katakan sebelumnya, mata pengunjung tentunya akan lebih tertarik untuk melihat sesuatu yang ditambahkan animasi. Lantas, bagaimana contoh widget Popular Post tersebut? Berikut contohnya.









Untuk memasangnya di blog kita sangat mudah sekali, karena hanya perlu menempelkan sedikit script. Lebih lengkapnya ikuti langkah berikut:

  1. Login ke akun Blogger anda.

  2. Klik Design, lalu klik Page Elements.

  3. Klik Add Gadget, lalu pilih Popular Post. Jumlah popular postingan harus lebih banyak dari 4 (Jika sudah ada gadget ini jangan masukan lagi).

  4. Jika widget Popular Post sudah terpasang, sekarang waktunya memasang script agar Popular Post tersebut dilengkapi dengan animasi. Klik lagi pada Add Gadget dan pilih HTML/Javascript. Lalu copy script yang ada dibawah dan Paste-kan di kotak yang ada, lalu klik tombol Save.

  5. Perlu diperhatikan, penempatan widget yang berisi script harus tepat di atas widget Popular Post. (Lihat gambar dibawah).




  6. Selesai, widget Popular Post anda akan otomatis 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>

Share this article :

Artikel Terkait:

0 komentar:

Posting Komentar

 
Copyright © 2011. Galeri Bocah - by Andry Andreas Panggabean | Blog Belajar SEO | Optimasi Blog di Google
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger