Add Cool Nivo Slider to Blogger

There are many slider available in web but nivo slider is latest awesome slider with awesome effect.This Slider is Simple & Clean And With 16 Unique Transition Effect.If you want to add this slider to your blog then you are at right place,Today i will show you How To Add Nivo Slider To Your Blog.

Preview

Installation

• Go To Blogger Dashboard.
• Click On Layout Tab.
• Add New Gadget.
• Select Html/Javascript.
• Paste The Following Code there and save it.

<style>#slider {
    position: relative;
    border: 5px solid #333;
}

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

#slider a {
    border: 0;
    display: block;
}

.nivo-controlNav {
    position: absolute;
    left: 260px;
    bottom: -42px;
}

.nivo-controlNav a {
    display: block;
    width: 22px;
    height: 22px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlKTKx-84Jh0rfWHVpfA3l-Z7AmlE8FoEAsIcdkIzRF7ebQ35hSgzVf7fqwlP1QcXv1p4CB6wMHhpIV4L7InfMBaISnMk965rteGqsrObokg5NvCqmp_8BcTgZNL0s47JkoGSYk3mnhOk/s400/bullets.png) no-repeat;
    text-indent: -9999px;
    border: 0;
    margin-right: 3px;
    float: left;
}

.nivo-controlNav a.active {
    background-position: 0 -22px;
}

.nivo-directionNav a {
    display: block;
    width: 30px;
    height: 30px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtvejb3J2DQM5CZxuPH96WgLnrs04tZ5zn_l-G5V6RVv92vXwkYJZFtuDCzwaVs3svEevHT1wAsi7CXyNz12qVN8fugWgGn9qxAoAXc_fYUwXBXBmkr3ji2qYdczmmS3x1IWoYYOTWXBU/s400/arrows.png) no-repeat;
    text-indent: -9999px;
    border: 0;
}

a.nivo-nextNav {
    background-position: -30px 0;
    right: 15px;
}

a.nivo-prevNav {
    left: 15px;
}

.nivo-caption {
    text-shadow: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    padding: 10px 0px;
}

.nivo-caption a {
    color: #efe9d1;
    text-decoration: underline;
}

.clear {
    clear: both;
}

.nivoSlider {
    position: relative;
}

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

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

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

.nivo-caption {
    position: absolute;
    left: 0px;
    bottom: 0px;
    background: #000;
    color: #fff;
    opacity: 0.7;
 /* Overridden by captionOpacity setting */
    width: 100%;
    z-index: 89;
}

.nivo-caption p {
    padding: 5px;
    margin: 0;
}

.nivo-caption a {
    display: inline !important;
}

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

.nivo-directionNav a {
    position: absolute;
    top: 45%;
    z-index: 99;
    cursor: pointer;
}

.nivo-prevNav {
    left: 0px;
}

.nivo-nextNav {
    right: 0px;
}

.nivo-controlNav a {
    position: relative;
    z-index: 99;
    cursor: pointer;
}

.nivo-controlNav a.active {
    font-weight: bold;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="http://code.helperblogger.com/jquery.nivo.slider.js"
type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('#slider').nivoSlider();
    });
</script>
<div id="slider">
     <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
     <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
   <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
</div>?

I Love Small Codes :)

If Any Problem Comes Comment below