Add Default Theme Of Nivo Slider To Blogger

Nivo Slider is one of the best jQuery slider available,we previously shared Pascal Theme of Nivo Slider and Simple Image Gallery now this time we are sharing Default Theme of Nivo slider.Image slide shows are the best ways to show off your photos,featured posts,images and any other material as you wish.Also Nivo slider has 16 unique transition effect which makes it more beautiful.The installation of this slider is very easy so that new blogger's also can implement this gadget to their blog very easily,to see demo click on the button below,

Live Slider Demo

How To Add Default Theme Of Nivo Slider To Blogger?

For better understanding I am dividing this tutorial in three parts,

1. Adding Styles
2. Adding Scripts
3. Adding Slider

Step 1: Adding Styles

1. Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Hit Proceed button
4. Find below code in your template,

]]></b:skin>

add below piece of CSS code just above it

#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/AVvXsEjfwa_DQVMBwzEc8ODVvXAojIe2_LqL-IUl8hh-Gt7NTb_Yi18U4GRMQL80HCr8tsnS6gd7zVySPJHPw8M9mEtfe-VkxYi6euCwdEIwrYfAomSk_AB8x74YGwr5FBUmi-dUOL_45u3A0aQ/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/AVvXsEit3qkaKO-LJ5DhnoqNb4GyMsQzfYbmIToLLQwTouF1jURLXXPKphiEO-VPUDF8s8pHlJsZ7Hxl1aRwDFdk-m4mLhqUzqqMOrfhvD6sSQrL-zfMvelt0PgYRX7X4ToYySjO5WzaOlKJgPQ/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;
} 

Step 2: Adding Scripts

Now find below code in your template

</head>

add below code just above it,

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

Save your template.

Now you have successfully implemented the slider's scripts and style into your blog,Now let's add the slider as an HTML/Javascript widget.

Step 3: Adding Slider

1. Now go to Layout
2. Click Add a Gadget
3. Select HTML/JavaScript
4. Paste below code,

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

• Now replace "YOUR LINK HERE" qith the link which you want to add to image,if you don't want add any link then just replace replace it with #.
• Replace "URL OF IMAGE" with image URL.
• Replace "ADD DESCRIPTION HERE" with the image description,if you don't want to description then just remove the text and leave it blank.

Need any Help

I have kept the installation as easy as possible,if you are getting any little problem then feel free post it below in comment box.

Note - If your blog have a jQuery plugin then it may not work,just remove following code from second step,

<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>