» » Cara Membuat Popular Post Widget Dengan Animasi

Cara Membuat Popular Post Widget Dengan Animasi

Kali ini saya akan share tentang membuat tampilan Popular Post Widget dengan Animasi. Contohnya bisa anda lihat di blog ini. Penggunaannya sangat mudah tinggal copy-paste script ke widget.



Berikut caranya Membuatnya :
  1. Masuk ke Blogger Dashboard dan Pilih Design - Page Elements
  2. Klik "Add Gadget" dan pilih "Popular Posts" jumlah popular postingan harus lebih banyak dari 4 (Jika sudah ada gadget ini jangan masukan lagi)
  3. Setelah anda mempunyai Popular Post Gadget kemudian klik "Add Gadget" lagi dan pilih "HTML/Javascript"
  4. Letakan semua script di bawah ke dalam "Content" dari HTML/Javascript Gadget
  5. 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>


Kalau sudah selesai cek blognya...
Berikan komentar apa saja tentang artikel ini..
Labels: Panduan Membuat Blog

Terima Kasih sudah membaca artikel Cara Membuat Popular Post Widget Dengan Animasi. Bantu Like dan sebarkan melalui fb, tweeter, dll dibawah ini.. Salam Hangat..!

0 Comment for "Cara Membuat Popular Post Widget Dengan Animasi"

Back To Top