Add Nivo Slider to Your Blogger Blog

Today its time for us to learn this 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 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"/> /* - 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( no-repeat center center; display:inline-block; height:14px; width:14px; text-indent:-9999px; cursor:pointer; } .nivo-controlNav .active{ background:transparent url(; } </style> <script src="" type="text/javascript"></script> <script src="" 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="#" target="_blank"><img alt="" title="#caption1" src="" /></a> <a href="#" target="_blank"><img alt="" title="#caption2" src="" /></a> <a href="#" target="_blank"><img alt="" title="#caption3" src="" /></a> <a href="#" target="_blank"><img alt="" title="#caption4" src="" /></a> <a href="#" target="_blank"><img alt="" title="#caption5" src="" /></a> <a href="#" target="_blank"><img alt="" title="#caption6" src="" /></a> </div> </div> </div>

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

1 comment

  1. K7x is a directory free flash games for Kids. Play funny online at now. thank you!!!