Nivo Slider Blogger Demo

HTML

Add this code in a HTML/JavaScript widget

<div id='slider'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqTbEumUB2aH3g0iFzhIjIW1R3jiDUEW9AgQQIKieUKOLEwa8cYZkfyPJJJvaFAL6w2PdThjsPZJ_rVZ8Y6bQiTZhUz9mE_Wy56ddmtWM-qC87xjkuhHelyVKO87Ve1ANzkpn1tVgAcLs/s1600/toystory.jpg'/>
<a href='http://dev7studios.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLBZNKhjaJ4fCwTAnztIDoUhp2bSJQjZyQcAd-NopLxCCUv_5ifXY0oELvSr6pI-8WTKq2UnOLM2joRczSemoLyPDDZxXi30gY-GtYneyghIBqKNxSOf7RjjYuxr8_9rwcXIjtEFga7E/s1600/up.jpg' title='#htmlcaption'/></a>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0gfmpB5uBltu033kUapRM6MtwUgM3_lZnyUyEq6Ta6blt-BVG8EhSUQaqGegyuzEokwgIKy9ejXtwVsGLTxzIb1Zy2LtwYJdeKoZb0MxM1DsV-DsQKdZ9owi8wQnnoYCamFi8FWnhvII/s1600/walle.jpg' title='This is an example of a caption'/>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKaKJgW1YP6FHeLO2eKnDNO7nd9FA4ueKn6h9MKZvwjrOPXsdYGr-O6CrenckWOs11tD4-uDSd6ZvtXUvVUarQg8CxtFXLrMzRdbOybW3wexUnOpW1MhyuFRiCEDp-8RFbGIOMIDz5YM/s1600/nemo.jpg'/>
</div>
<div class='nivo-html-caption' id='htmlcaption'>
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href='#'>a link</a>.
</div>

CSS

Add the below CSS code above </b:skin>

/*
* 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
*
* March 2010
*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQkDqwriggGK2A1kFpUK8Jwrmv3uul3fyqSd5JxT4gwXKbqoZzNHaCA2thc3asz-LDylfCjP56WSvZpMFKbFQjn1MjIAPdwGfocySBKbleE0Cv-L39IpILr9OAsfyGQXb8UkfqSxuvP6k/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/AVvXsEjwYSi4SqWUWJw0ajz81FpomwGTb-mYKFxs2MrZ8uhEkSyYH5B65N0TmgLLa-JGfGSON8tdUaBryAiod0MMslGOrxlCclps2cccSwoL3Xe3HMK8Nn3gl4G6mR1YGY-7hi1QCSBNM60z9gc/s1600/loading.gif) no-repeat 50% 50%;
}
#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(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLVXuZheAszG1lJqgh_UCnW1fMyXtoGZaujQUpMgVQHqszoj8RtwzjZQKoJzbW3L7n4xlKlKPoLGXqFqfZpJsFnXHvnwFqFrLr_RkyLrD3Qn1atD99qG_NDcJKuQ3EviqS-Rqemfzfnug/s1600/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/AVvXsEi_51pT72ICTu-kcMwBtlT3pxZnml2lRBJ9YCF32LzMdrS7UHCrTnrXem-fNXqHx9iAuVxV3lbLj48crg6TThvfOk4-O3B9ZvWq6hoF7Xd5uGHUCz-MuGnMiMFDxiuelXTTF9YJn43Jiz8/s1600/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;
}
.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/AVvXsEi_51pT72ICTu-kcMwBtlT3pxZnml2lRBJ9YCF32LzMdrS7UHCrTnrXem-fNXqHx9iAuVxV3lbLj48crg6TThvfOk4-O3B9ZvWq6hoF7Xd5uGHUCz-MuGnMiMFDxiuelXTTF9YJn43Jiz8/s1600/arrows.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…) */
.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/AVvXsEjLVXuZheAszG1lJqgh_UCnW1fMyXtoGZaujQUpMgVQHqszoj8RtwzjZQKoJzbW3L7n4xlKlKPoLGXqFqfZpJsFnXHvnwFqFrLr_RkyLrD3Qn1atD99qG_NDcJKuQ3EviqS-Rqemfzfnug/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

jQuery

Add the below code above </head>

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