Add Nivo Slider to Your Blogger Blog [UPDATED]




Today I'm sharing another awesome, beautiful image slider for Blogger/ BlogSpot blog. It is made with jQuery. and of course HTML and CSS but the main awesomeness, sliding effect is made with jQuery. This image slider is created by dev7studios.com/nivo-slider/. They did really a great job. This slider have downloaded more than 20,00000 times from their site. I have made a bloggerized version of the slider. See demo below.

Lets Step forward to adding this jQuery Image Slider to Blogger

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.
<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="http://project.dimpost.com/image-slider/images/sample0.jpg" /></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>

4. Change the red colored link with yours. and blue colored images link with your images.


Though this post was also published on ISFB by DIMPost.com

Subscribe To Get Update In Your Email

2 comments:

  1. I want to use it only on my homepage. is there any way...?? How....??

    ReplyDelete
  2. Nivro is the best slider for blogger platform I have ever seen.

    ReplyDelete