Stylish slider for blogger post

There is literally no better way to make your website look totally stunning than creating beautiful slideshow in the Homepage of your Blog ,Just follow the Simple Steps to to create amazing slider to your Blog

Then Click “Add Gadget”
After that select Gadget “Add Gadget” again and select “HTML/Javascript”
copy This HTML to Add gadget

<style>

#slider ol,#slider ul,#slider li
 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:150px;
  height:120px;
}

ol, ul {
    list-style: none;
    }

.wrapper {
    width: 720px;
    margin: 0 auto;
    position:relative;
}

.clear {
    clear: both;
    }

.display-none {
    display:none;
    }

#slider {
    position: relative;
    top: -2px;
    z-index: 1;
    }

#slider .prev {
    position: absolute;
    width: 21px;
    height: 21px;
    display: block;
    background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
    top: 150px;
    left: -51px;
    }

#slider .next {
    position: absolute;
    width: 21px;
    height: 21px;
    display: block;
    background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
    top: 150px;
    right: -51px;
    }

#slider #slider-wrapper {
    width: 720px;
    height: 300px;
    padding-top: 40px;
    overflow: hidden;
    z-index: 999;
    position: relative;
    }

#slider #slider-inner {
    width:9780px;
    height:300px;
    position:absolute;
    }

#slider .article {
    width: 150px;
    height: 300px;
    float: left;
    margin-right: 30px;
    }

#slider .article img {
    margin-bottom: 25px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    }

#slider .article h2 {
    margin-bottom: 15px;
    line-height: 18px;
    }

#slider .article h2 a {
    font-size: 18px;
    color: #404040;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
    line-height: 23px;
    }

#slider .article .meta-comments a {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #fff;
    }

#slider .article .item-snippet {
    margin-left: 15px;
    }

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="https://sites.google.com/site/fashiondegree/recent-post-thumbnail/slide.js?revision=1"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>

Thats it.Your Done:)

Header Ads Widget

Stylish slider for blogger post

Posted by: Nazeeb

Total Pageviews

Popular Posts