Moving Box Slider for Popular Post Blogger

Now I made one more Popular Post widget for blogger Using Moving Slider from CSS Tricks. I made many Blogger widget to show Popular Post widget for blogger in many way. Now I made new Blogger widget using Moving Box Slider for Blogger.


This script very easy to install, you only have to put the script to the new Gadget

• Login to Blogger Dashboard and navigate to Design – Page Elements
• Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
• After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
• Put all script bellow to the “Content” of HTML/Javascript Gadget
• If you have already jQuery in your Template please delete from my script
• Done- your popular post now with animation

Copy Script

<style> * { margin: 0; padding: 0; } body { font: 11px Helvetica, Arial, sans-serif; } #wrapper { width: 800px; margin: 60px auto; } #intro { padding-bottom: 10px; } #slider { width: 800px; margin: 0 auto; position: relative; border: 10px solid #ccc; } .scroll { overflow: hidden; width: 800px; margin: 0 auto; position: relative; } .scrollContainer { position: relative; } .scrollContainer div.panel { padding: 10px; width: 274px; height: 318px; } #left-shadow { position: absolute; top: 0; left: 0; width: 12px; bottom: 0; background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y; } #right-shadow { position: absolute; top: 0; right: 0; width: 12px; bottom: 0; background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y; } .inside { padding: 10px; border: 1px solid #999; } .inside img { display: block; border: 1px solid #666; margin: 0 0 10px 0; width: 250px; } .inside h2 { font-weight: normal; color: #111; font-size: 16px; margin: 0 0 8px 0; } .inside p { font-size: 11px; color: #ccc; } a { color: #999; text-decoration: none; border-bottom: 1px dotted #ccc; } a:hover { border-bottom: 1px solid #999; } .scrollButtons { position: absolute; top: 127px; cursor: pointer; } .scrollButtons.left { left: -45px; } .scrollButtons.right { right: -45px; } .hide { display: none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>