Add a Jquery Nivo Slider to Blogger

Well Jquery Image Slider Helps to Make Your Blog More Attractive and Also Helps to Feature Your Top Articles on Your Blog With an Attractive Image.

Now to Add this Cool Jquery Slider to Your Blog Just Follow the Below steps:.


Jquery Nivo Slider For Blogger:.


1.Go to blogger dashboard --> Template --> Edit Html (Check 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://goodinblogging.blogspot.in
* 
*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLuOHPwtfYOc3XFDy-tSi4uhyqQwLQerGw2zqg-3ZxUKNuR2XsZ_rhe70R5_qW2cs-xYD2kwG3zA6zaJYvA49uTmB-to3dUgZoNuMeuvEXuaWBA-e8Tn8ZPj1vXsR1iauiitNs2EclLOk/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/AVvXsEh6174TK9JcaFswVXfxSWwyNi-Lk9aARaOCLdyZAgJ0K1W4Z6U1tUI66_Rv3hrQIhtpjjSKJWqxo4J2FxcapbiHzhzWXpgOfD0APSI7Z_LrEwJmYh5UT5C9OWmKViEoJ5qaB8u-XvOZogIu/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnZYGKDx3quBNsSgyE-eH0rDAiDpfXmX3rlj79JnxMQ1hJoMFfPfJEWadblOlT_4aHyW6yJjg-yu6hhgYQ1WnU7ETT6zVWnmAQQJqZTcmNG5yXp7VmA85Gadsz0sMVLSUeVtDEoYT0g52M/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/AVvXsEjWY3NQIB0Bv4crkBvJpZ4V5eciED4AY8p2baWfkWcaOBKgX4KB4vNbynOMPhG6cWSh9RBU2NSkcFWexpi9kLmqaHENRncuJhgJxiq1mfU30H-yM8PEXqBxhXspsJlCiaGlZhMVk79x8Fv0/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/AVvXsEjWY3NQIB0Bv4crkBvJpZ4V5eciED4AY8p2baWfkWcaOBKgX4KB4vNbynOMPhG6cWSh9RBU2NSkcFWexpi9kLmqaHENRncuJhgJxiq1mfU30H-yM8PEXqBxhXspsJlCiaGlZhMVk79x8Fv0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnZYGKDx3quBNsSgyE-eH0rDAiDpfXmX3rlj79JnxMQ1hJoMFfPfJEWadblOlT_4aHyW6yJjg-yu6hhgYQ1WnU7ETT6zVWnmAQQJqZTcmNG5yXp7VmA85Gadsz0sMVLSUeVtDEoYT0g52M/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 and246px with your desired height, but make sure that you have cropped your images to match exact width and height of the Nivo slider.

3. Search 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 chooseHtml/JavaScript gadget.

6. Paste the following peace of code inside it.

<div id='slider'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64p46x-DD6wdV-uFgV9IBQxa_PpJNnSlmDWFuSxHXLvltGh1LQ_ErVsikUeAECRJk6O3Cheqkzrg-kaPSmF-0SpOZ1C-3zcaKsFhiGVxYgo-KcAcO65i1QRFRrqmavhwKmti6QzvGvvw/s1600/toystory.jpg'/>
<a href='http://dev7studios.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6Bj-fN6nlfnx-AH2PZP71Z_cl_1V-yaUnbjaYjBQi5AO_TSkuvVqyrJmm9VM7TVP1OwU7sgdSJdij4B7uwwfV0S8PvclxaPTe0wTndqNO9E2a2Ann-Evn-dYh83WyW89L_ZmtliF8EE/s1600/up.jpg' title='#htmlcaption'/>
</a><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhio5EOPw0Q71kbYrqwu6Kcw78HPitvJsl3-zYHwnPOzSzbmxrqF9bOTKH5uYvXMgSm4_uYTr70DrN7bKlfHSZFcCu4_irNpqzB-SYigTiF0gL3QAPpo6yAApKSSjJolgycANkjkS-fs1w/s1600/walle.jpg' title='This is an example of a caption'/>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7YeI3AWLVOJAtGa_xhGlJ8WCSCZQvzCE4TsgSJVLmPok2Msuv3P17Gc-UoMTqKhH8cia7STmJ0tP2SpOpzsU2FbyQyGLbMpxpNSjZp4eYFU57A4czPF2NagB1TnL2DafC7Xar8cOGqKw/s1600/nemo.jpg'/>
</div>

Now Replace the Image Links and  images are highlighted in red color. Replace the image links with your own images of width and height.

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

• If you want to Use a link with an image, use <a href tag as shown below.

<a href="link"><img src="image link" alt="" title=""/></a>

That's it Now,Enjoy...