Popular Post Widget With Animation

Bismillah, thank God. I have long actually want to be a Guest Author at Blog Kang Loveland, the first time there is a chance and allowed Kang Loveland. This time the Widget is Popular Post With Animation. This was a long kind of Widget I ever make a Popular post for bloggers using Json But Now Blogger has made a popular post from Bloggers Stats . Now I make Popular Post for bloggers with animated. This Widget uses a trick I had previously Recent Post with Animation Uses "simple spy".

Please see the DemoThis Script is very easy to stay put the Script below into the "Gadget" Blogger

• Sign in to your Blogger Dashboard and Select Design-Page Elements
• Click "Add Gadget" and select "Popular Posts" number of latest postings should be more than 4 (If there is already a gadget is no more input)
• Once you have the Latest Gadget Post then click "Add Gadget" again and select "HTML/Javascript"
• Lay all script below into the "Content" of HTML/Javascript Gadget
• Done, all automatically become Popular post have animation

< style type = "text/css" media = "screen" > # PopularPosts1 {overflow: hidden; margin-top: 5px; padding: 0px 0px; height: be 400px wide;}# PopularPosts1 ul {width: by 220px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px;}# PopularPosts1 li {width: 208px; padding: 5px; margin: 0px 5px 0px 5px 0px; list-style-type: none; float: none; height: 80px; overflow: hidden; background: # f f 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.5 em;}# PopularPosts1 li. item-title a {text-decoration: none; color: # 4B545B; font-size: an 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.-a, item # snippet 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;}-->  < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type = "text/javascript" >  < script type = "text/javascript" charset = "utf-8" > $ (function() {$ (' ul ' popular-posts) simpleSpy ();}); < script src = "http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type = "text/javascript" > 

Do not copy this post, this original language inggirs in New Popular Post for Bloggers With Animation

View the Original article