Nivo Slider - jQuery Image Slider For Blogger

Today I'm sharing another awesome, beautiful image slider for Blogger/ BlogSpot blog. It is made with jQuery. and of course HTML and CSS but the main awesomeness, sliding effect is made with jQuery. This image slider is created by dev7studios.com/nivo-slider/. They did really a great job. This slider have downloaded more than 20,00000 times from their site. I have made a bloggerized version of the slider. See demo below.

• DEMO

Lets Step forward to adding this jQuery Image Slider to Blogger

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

<style type="text/css">
/* dimpost.com - Basic Style */

#pagewrap {
    margin: 10px auto;
    padding: 0;
    position: relative;
    height: 400px;
    width: 640px;
}

#slidewrap {
    position: absolute;
}

#slider {
    border-color: #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 10px 10px 30px;
    box-shadow: 0 0 3px #2F2F2F;
    height: 280px;
    margin: 10px;
    position: relative;
    width: 600px;
}

#slider images {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}


/* The Nivo Slider styles */

.nivoSlider {
    position: relative;
}

.nivoSlider images {
    position: absolute;
    top: 0px;
    left: 0px;
}


/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 6;
    display: none;
}


/* The slices and boxes in the Slider */

.nivo-slice {
    display: block;
    position: absolute;
    z-index: 5;
    height: 100%;
}

.nivo-box {
    display: block;
    position: absolute;
    z-index: 5;
}

.nivo-directionNav {
    display: none!important
}

.nivo-html-caption {
    display: none;
}

.nivo-caption {
    position: absolute;
    right: 20px;
    text-align: center;
    top: 130px;
    width: 192px;
    z-index: 60;
}

.nivo-caption p {
    margin: 0
}

.nivo-caption .title {
    font-style: italic
}

.nivo-controlNav {
    bottom: -23px;
    display: block;
    height: 15px;
    left: 204px;
    position: absolute;
    text-align: center;
    width: 192px;
    z-index: 51;
    opacity: 0.6;
}

.nivo-controlNav a {
    background: transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
    display: inline-block;
    height: 14px;
    width: 14px;
    text-indent: -9999px;
    cursor: pointer;
}

.nivo-controlNav .active {
    background: transparent url(http://project.dimpost.com/image-slider/images/button_active.png);
}
</style>
<script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
<div id="pagewrap">
    <div id="slidewrap">
        <div id="slider">
            <a href="http://dimpost.com/" target="_blank"><img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
            <a href="#" target="_blank"><img alt="" title="#caption2" src="http://project.dimpost.com/image-slider/images/sample1.jpg" /></a>
            <a href="#" target="_blank"><img alt="" title="#caption3" src="http://project.dimpost.com/image-slider/images/sample2.jpg" /></a>
            <a href="#" target="_blank"><img alt="" title="#caption4" src="http://project.dimpost.com/image-slider/images/sample3.jpg" /></a>
            <a href="#" target="_blank"><img alt="" title="#caption5" src="http://project.dimpost.com/image-slider/images/sample4.jpg" /></a>
            <a href="#" target="_blank"><img alt="" title="#caption6" src="http://project.dimpost.com/image-slider/images/sample5.jpg" /></a>
        </div>
    </div>
</div>

4. Change images link with yours.