Cara Membuat Popular Post Dengan Animasi

Bismillah Alhamdulillah pada kesempatan ini tepatnya di bulan ramadhan tanggal tujuh belas kurang lebih sekitar jam berapa yah jadi lupa deh. he he .. yah itung itung nungguin wakto sore (nga buburit) bloger widget ingin sharing sedikit tentang  Cara Membuat Popular Post Dengan Animasi...contohnya seperti tampilan di side bar blog ini.
sekarang langsung saja ke tutorial cara membuat  popular post 
Cara Membuat Popular Post Dengan Animasi
Popular Post dengan Animasi
langkah pertama seperti biasa anda Add a Gadget dan pilih popular post yang telah di sediakan oleh blogger  dan jangan lupa set tampilan / display post harus lebih dari 4 post
new Popular post blogger
script popular post
 
Nah setelah anda add dan set popular post anda tambahin lagi  gadget HTML/Javascript caranya add Gadget dan pilih HTML/JavaScript
Setelah terbuka form nya anda ini dengan secript di bawah ini
<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>
Dan hasilnya seperti di bwah ini  terus anda simpan dan jangan lupa letaknya harus tepat dia atas widget Popular Post yang anda tadi buat
Posisi Script dan Popular Post
Posisi Script dan Popular Post... nah mungkin itu yang saya dapat sampaikan pada kesempatan ini semoga bermanfaat dan semangat terus di duia blogger .....

About the Author

I'm Hung Duy, the founder of Xml Blogger Templates (XBT). I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2006 and I'm currently a guest blogger on Blogging With Success.
Follow Me on Twitter or On Facebook


Visit xmlbloggertemplates.com for more Blogger Templates

1 comments:

Hariyanti Sukma said...

makasih ya telah berbagi.... maaf banget baru bisa kunjung balik, makasih ya kunjungannya.

Post a Comment

 

Contac

Stat

My Ping in TotalPing.com Free 1000 Backlinks

Community

There was an error in this gadget
Design by Free Wordpress Themes | Bloggerized by Lasantha - Premium Blogger Templates