Add Best Image Slider On Your Blogger: Nivo Slider

It is said that figure speaks itself. So to make our blog or site beautiful and attractive, we should use proper photos, color and layout. Sliders is one of the most used technique to show the highlight of a particular site, but blogger has not facilitated in default.
But don't worry, we are here for more and more information to make your blog good and beautiful. Today, I am here for a outstanding slider for bogger. This slider was made by www.dev7studios.com/nivo-slider/ using javascript and css. Here is the blogger version of this slider. This is really an awesome image slider.
Nivo blogger slider

I always said all of you not to change any code from your template without keeping back up your template but now this is not necessary because we do not enter into our edit html page

You have not do any coding for this sliders. Just copy the code that given below and follow the following steps:-


Step 1: Log into your blogger and then click on Layout 
Step 2: When you enter into layout, there you see layout of your blogger. Now Click on Add Gadget button and Select the Html/Javascript.
Step 3: Now Paste the given code into HTML/JAVASCRIPT.


 <style type="text/css"/>
/* dimpost.com - Basic Style */
 body{ background: transparent; font:15px/2 'Adobe Caslon Pro', Georgia, Serif; margin:0; padding:0;}
a{outline:0 none}
#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="your-blog-here" target="_blank">
<img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
<a href="your-blog-here" target="_blank">
<img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a> <a href="your-blog-here" target="_blank">
<img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
<a href="your-blog-here" target="_blank">
<img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
</div>
</div>
</div>

Step 4: You should place your blog URL in your-blog-here. and place your image link in red colored image link

Watch Video to Add the Slider into Blogger 


Post a Comment

16 Comments

  1. what is code to use to upload picture from computer?

    ReplyDelete
    Replies
    1. There is red code that you need to replace them by img url

      Delete
  2. I changed the width of the box but now the nav buttons are not centered and I can't seem to figure out which code I need to change to do that

    ReplyDelete
  3. need adsence help...
    how to get ads on bloger just like your page in top.?

    i have adsenc aproved account...i can get code...but where i implement code

    ReplyDelete
    Replies
    1. It is so simple. Just add a html/javascript widget putting adsense code in it and save it.

      Delete
  4. Thanks for sharing this code, I added following instruction but seems it doesn't work, can you help me for that bro, here my site you can check http://www.xaydungabi.com/

    Thanks very much

    ReplyDelete
    Replies
    1. I think your blog has already included jquery api. So you do not have to include above jquery api code.

      Delete
  5. It doesn't work my blog.....

    ReplyDelete
    Replies
    1. If your blog already has jquery api, then do not add the above jquery api.

      Delete
    2. If my blog has already jquery api, how do I delete it from may blogspot?

      Thanks

      Delete
    3. It is a script file. Most often we use google api, so search below script:-

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

      Delete
  6. I couldn't add the slider...can anyone....

    ReplyDelete
  7. hii..
    in your blog CATAGORIES in right side its mistake, CATEGORIES right one
    PLZZZZZZZZ go to http://gowebtuts.blogspot.in/

    ReplyDelete
    Replies
    1. I did not understand what you are saying

      Delete

Any comment will be appreciated, comment will be published according to our comment policy