Create Slideshow In Blogger With Navigation - V2

Today we have yet another more advanced slider that has some awesome effects added to it. You can navigate between images and the slideshow has opacity plus slice image effects. All adds up just more spice to the slideshow. This slider is created by dev7studios.com and modified by us. Kindly have a look at the demo before we may start learning how to create this new Jquery slider.

If you have slow network connection then kindly have patience till the slideshow loads.

How to add the Slideshow to blogger?

The methods as usual are more easy than you can imagine. Follow up,

Go To Blogger > Design
Choose Add a Page Element
Then choose HTML/JavaScript widget
Inside the widget paste the code below,

<style type="text/css"/>
/* dimpost.com - Basic Style */
#pagewrap{
 margin:10px auto;
 padding:0;
 position:relative;
 height:400px;
 width: 640px;
}
#slidewrap{position:absolute;}
#slider {
    border-color: #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 10px 10px 30px;
    box-shadow: 0 0 3px #2F2F2F;
    height: 280px;
    margin: 10px;
    position: relative;
    width: 600px;
}
#slider images{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider images {
 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;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
    display:none;
}
.nivo-caption{
 position:absolute;
 right:20px;
 text-align:center;
 top:130px;
 width:192px;
 z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
    bottom: -23px;
    display: block;
    height: 15px;
    left: 204px;
    position: absolute;
    text-align: center;
    width: 192px;
    z-index: 51;
 opacity: 0.6;
}
.nivo-controlNav a{
 background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
 display:inline-block;
 height:14px;
 width:14px;
 text-indent:-9999px;
 cursor:pointer;
}
.nivo-controlNav .active{
 background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); 
}
 </style>
 <script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>
 <script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(window).load(function() {
  $('#slider').nivoSlider();
 });
 </script>
 <!--[if IE]>
  <script src="modernizr-2.0.min.js"></script>
 <![endif]-->   

<div id="pagewrap">
<div id="slidewrap">
 <div id="slider">
 <a href="http://dimpost.com/" target="_blank"><img alt="" title="#caption1" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/11896162_957848924238621_8967029477799597799_n.jpg?oh=2faa012fc241d6d03707ad2f712c757f&oe=563799CC" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption2" src="http://project.dimpost.com/image-slider/images/sample1.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption3" src="http://project.dimpost.com/image-slider/images/sample2.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption4" src="http://project.dimpost.com/image-slider/images/sample3.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption5" src="http://project.dimpost.com/image-slider/images/sample4.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption6" src="http://project.dimpost.com/image-slider/images/sample5.jpg" /></a>
 </div>
</div>
</div>

 <a href="#" target="_blank"><img alt="" title="#caption2"

src="http://project.dimpost.com/image-slider/images/sample1.jpg" /></a>

Just Change your Blue Color url Address and  your Image address

How To add More Images?

To add another image simply paste the code below just above </div>

TONEYSOFT