Add Jquery Nivo Slider in Blogspot/Blogger

There are several image sliders out there on web. The latest Jquery Nivo slider is the most inspired among several other image sliders. Jquery prompting the users to use advanced technologies on web. Jquery Toggle Effect series is my most favorite out of them. Now Jquery have again grabbed the users attention by its new image slider which looks highly complicated. This post was prepared long days ago but as i have started the blogger comment series on my blog, i delayed in publishing this tutorial. But today i really want to keep this Nivo slider tutorial in front of my fellow bloggers. let us go with the tutorial on implementing Jquery Nivo slider on Blogger. Before going to the tutorial, here is a demo.



DEMO

Jquery Nivo slider for Blogger

1. Go to blogger dashboard > Template > Edit Html(Tick expand widget template option).
2. Find(Ctrl+F) for ]]></b:skin> and paste the following peace of code just above it.

<!
/*
/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* Bloggerised by http://www.bloggertricks.biz
*
*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZzuTyI_ViyhTEGNApxasZ3eGplVF2ErPxGJ7QELWCCdqU0jVLYhZe4-YEsdCu3DQjxnqRlwO6IfiXSN0TZgHRFmOScHK8iLYw1cdocKVKsK4ECWBBIUoz1GCI5cjEryyoKvyNjyEMQY/s1600/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJcSiY1qCvJ-pqlcMGwAI5yCMbrlg9_uWWmXR8VqULguBsFEASEimUgdxjL4IL-gVammocskOjeHoT85vUh6UE1T0DttTH6Zea8iw8REiPPNnKKR81cZa9y3z_0bp1ZIdQTPoxaDuLVIn/s1600/%5Bbloggertricks.biz%5Dload.gif) no-repeat 50% 50%;
margin-bottom:30px;
}
#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(http://3.bp.blogspot.com/-5ltb7tJGiXA/UAAMfb_54vI/AAAAAAAABD0/K38lh4LcWjY/s1600/%5Bbloggertricks.biz%5DBullets.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/AVvXsEhBIbG8L59iv3Q90YTIKXisCTnrLu0Emt-gSk-J9JMUSrsDDc2qsRCPVVAO1Y3br6c3vwTpJ0lfYGE56hCA-0xI5-ul-Ck30ciBa0_Xz6O133iGxgsGT-xxP_TmJ7Qv97xn37lPxJzGjYlT/s1600/%5Bbloggertricks.biz%5DArrows.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;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
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;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIbG8L59iv3Q90YTIKXisCTnrLu0Emt-gSk-J9JMUSrsDDc2qsRCPVVAO1Y3br6c3vwTpJ0lfYGE56hCA-0xI5-ul-Ck30ciBa0_Xz6O133iGxgsGT-xxP_TmJ7Qv97xn37lPxJzGjYlT/s1600/%5Bbloggertricks.biz%5DArrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* Control nav styles (e.g. 1,2,3&#8230;) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://3.bp.blogspot.com/-5ltb7tJGiXA/UAAMfb_54vI/AAAAAAAABD0/K38lh4LcWjY/s1600/%5Bbloggertricks.biz%5DBullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

Note:-
To change the width and height of the slider, change 618px with your desired width and 246px with your desired height, but make sure that you have cropped your images to match exact width and height of the Nivo slider.
3. Find for </head> and place the following code just above it.

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js type=text/javascript></script>
<script src=http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js type=text/javascript></script>
<script type=text/javascript>
$(window).load(function() {
    $(#slider).nivoSlider();
});
</script>

4. Save the Template.
5. Now go to blogger dashboard > Layout > Add a gadget and choose Html/JavaScript gadget.
6. Paste the following peace of code inside it.

<div id=slider>
<img alt= src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFtIgkPyyYfYb5XdIM6P40FYa8i8j878ySi3UCPoIk6PXRnRqj3ibOzACU80nY9L-p3YK9u0Avzg8yWNshF_SG28vAUdOuyPUV7hKoK_cT7P0S1ENoYURVpcgfuuR6tEtc0eP4fQgrgI/s1600/toystory.jpg/>
<a href=http://dev7studios.com><img alt= src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDVgn7x2n7omP3pbpdy4aACz6UQUzjcIdxOiwkigc4qD5ooThL4x306WMZCy64hE9mDS9Rs9wBZdiP1ZHoC82mDyZoFTR5HOnpWpZAU3izgTEAQpOgwBEa3hqL4zmIQRaUvwpTECs43Y/s1600/up.jpg title=#htmlcaption/>
</a><img alt= src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQNc-SiAZsV3CdlgQiPi8EfC6XzF_NS3_lhEWB_7vLzRKFOeeTbooEWj-4XFVdeiYz4O9ix0JINqKb2r_2zGO3coD9YQos-i8EYjkG6qR-uuuvT6J9AaCDfA0x52DtjEBYbJTLfT_FeaM/s1600/walle.jpg title=This is an example of a caption/>
<img alt= src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaTwJg14KefIDLq-xpQTx0r-d3azcZcf03yH1qZjpsyaHvP8-PlRU7aPvRTVZ9Je5XCFJ8MQYrfoGDeMKcoOcNbSVBorJXV1xPT1FMNF1MIuKY_n3PWfiTpsPLzYeauBbdpAmqEr-kz0s/s1600/nemo.jpg/>
</div>

Nivo slider image Customizations:-

• In the above html code, images are highlighted in red color. Replace the image links with your own images of width and height specified in the above Css style.
• To add a new image, simply add a new image tag just before the closing div tag like below

<img src=image link alt=keyword title=caption/></div>

• If you wish to associate a link with an image, use href tag as shown below.

<a href=link><img src=image link alt= title=/></a>
Conclusion::
If you face any issue in using the Nivo slider on your blogger blog, kindly let me know your issue in the comments section below and i would be pleased to help you in troubleshooting it. Take care Pals..