Scrolling Popular Post Gadjet / widget - blogger

This is a scrolling popular widget for blogger. Make the 'popular post' in your blogspot scroll like an expert blogger. Just using ready widget in the blogspot and make them animate.

Click here for demo

Just add gadget in the layout screen==> chose HTML/JavaScript ===> and Copy and paste java/html script bellow into the tab

1. Go To Blogger >>> Design
2. Click add a gadget
3. Choose Popular Posts Widget provided by blogger
4. Keep post number greater than 4
5. Save your widget
6. Now select an HTML/Javascript widget
7. Paste the following slide code inside it,
8. Put it side by side as in picture bellow

 Style No 1

Copy / paste this code into your site

<!----Start copy here----> <style type="text/css" media="screen"> #PopularPosts1 { overflow:hidden; margin-top:5px; width:100%; padding:0px 0px; height:310px; } #PopularPosts1 ul { width:310px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:10px 0px 0px 10px; } #PopularPosts1 li { width:290px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:80px; overflow: hidden; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbImy902DFbMbUhTLtPZYRiTPZgvbzHrefxcehmQIYbyEcBkPz-Hiax569ZlJNhr1Ton_WCUZYua29RMQO3FXutj8aKd3CGUUsjEpfO1_9lIbtVHK_V2PDJT4Hh2vJZt3CKnQ4qpKvZ4/s400/popular+posts.jpg) repeat-x; border:1px solid #ddd; } #PopularPosts1 li .item-title { font-size:1em; margin-bottom:0.5em; } #PopularPosts1 li .item-title a { text-decoration:none; color:#7CA2C4; font:bold 12px verdana; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #PopularPosts1 li img { float:left; margin-right:5px; background:#EFEFEF; border:2px solid #7CA2C4; } #PopularPosts1 li .item-snippet { overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#289728; 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><div style="float: left;"> <a href="http://freewidget4u.blogspot.com/2012/11/scrolling-popular-post-gadjet-widget.html" target="_blank">^GrabThis!!</a></div> <!----Stop copy here---->

 Style No 2

Copy / paste this code into your site

<!----Start copy here----> <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><div style="float: left;"> <a href="http://freewidget4u.blogspot.com/2012/11/scrolling-popular-post-gadjet-widget.html" target="_blank">^GrabThis!!</a></div> <!----Stop copy here---->

enjoy