MA NURUL HUDA
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
 |
| 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
Nah setelah anda add dan set popular post anda tambahin lagi gadget HTML/Javascript caranya add Gadget dan pilih HTML/JavaScript
<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>
 |
| 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
Follow Me on Twitter or On Facebook
Blogging
- Menyisipkan Twitter Melayang Di Blogspot
- Cara Setting Template Blogspot Untuk Mobile
- Cara Membuat Whos Amung Di Blospot
- How To Create Floating Ads In Blogspot
- How to Display The Recent Post By Category
- How to Insert Share Buttons On Blogspot
- How to Create A Site Map On Blogspot
- Easy Ways to Make On Blogger Blogspot Templates
- Increase Page Rank By Replacing The Title Tag
- How to Create Tabbed Widget In Blogger
- Add Google Buzz Button To Blogger
- Related Post With Thumbails In Blogspot
- How To Adjust Color in Letters And Tempalates
- How To Insert Html Code In Posts
- How To Replace The Older Post With a Number
- Latest Features Static Page On Blogger / Blogspot
Widget
- Menyisipkan Twitter Melayang Di Blogspot
- Cara Membuat Whos Amung Di Blospot
- How To Add Automatically Link To This Post Widget To Blogger
- Two Latest Gadgets From Blogger
- How to Display The Recent Post By Category
- How to Insert Share Buttons On Blogspot
- How to Create A Site Map On Blogspot
- Create Animated Banner In Online
- How to Create a Slide Panel On Blogger
- How to Create Tabbed Widget In Blogger
- Add Google Buzz Button To Blogger
- Create Twitter Widgets And Buttons In Twitter Goodies
- Web Site Photo Editing Online
- How To Insert a Service Ping In Your Blog
- Add Alexa Widget To Blog/Website
- How To Make Block all Text
- How to Make a Tag Cloud Version Blogspot
- How To Make a Related Post on Blogspot
Posted in: 
4 comments:
makasih ya telah berbagi.... maaf banget baru bisa kunjung balik, makasih ya kunjungannya.
Wow! Excellent your blog post and great article article. Thanks for sharing with us.
image manipulation service
Fantastic job done. I just loved your work here. Lovely. I visited your blog for the first time.
Very big list.
Not completed reading all but done with few. Really mind blowing qoutes.
Hot Youngest Hollywood actresses
Your articles are really outstanding. I like all the thoughts here that are informative. Thanks for sharing.
Clipping Path Service
Make White Background
Post a Comment