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 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="#" target="_blank"><img alt="" title="#caption1" src="http://www.wepost.ga/2014/12/tubemate-youtube-downloader-ads-free.html" /></a> <a href="#" target="_blank"><img alt="" title="#caption2" src="http://www.wepost.ga/2015/01/teletalk-jamai-ador-contest.html" /></a> <a href="#" target="_blank"><img alt="" title="#caption3" src="http://www.wepost.ga/2015/01/player-pro-v295-for-android-premium.html" /></a> <a href="#" target="_blank"><img alt="" title="#caption4" src="http://www.wepost.ga/2015/01/add-nivo-slider-to-your-blogger-blog.html" /></a> <a href="#" target="_blank"><img alt="" title="#caption5" src="http://www.wepost.ga/2015/01/robi-robibar-pack-100mb-15tk-only.html" /></a> <a href="#" target="_blank"><img alt="" title="#caption6" src="http://www.wepost.ga/2015/01/player-pro-v295-for-android-premium.html" /></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 K7xgames.net now. thank you!!!

    ReplyDelete