slides Moving box for popular post

this widgets is for popular posts in popular posts slide look in images ,this very useful to your blog visitor and you can keep your visitor for long time on your blog




Let see how install this in your blog 

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
<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>

Posted by Durgesh on 11:01. Filed under , . You can follow any responses to this entry through the RSS 2.0. You can leave a response or trackback to this entry

3 comments for "slides Moving box for popular post"

  1. thanks for this post. But its not working dude
    my testing site here:

    http://testplugins.blogspot.com/

  2. its working fine thanks dude

  3. you can check this slider
    http://newtricksforblogger.blogspot.in/2013/02/add-slider-working-with-label-in-blogger.html

Leave a reply