Beautiful jQuery Nivo Slider for Your Blogspot Blog


Best Movies Sites: TOP 10 MOVIE WEBSITES


jQuery Nivo image sliger
As all know that Nivo slider is the most popular jQuery image slider. In this article let me tell you about beautiful Nivo slider widget for your blogger blog. You can add both CSS and HTML code in a gadget or blog post in your blog and you even don't wanna edit your template. Its a customized version and in this Slider the caption and bullets are customized to make them more beautiful. Also I give its credit to Rahul Ippar, author of Helperblogger.


demo icon png Wanna see a demo
Before we dive into the code, take a click on the demo image shown below to get an idea of what we are going to build here. Click on the below pic to see the demo.


nivo slider demo 

questionmark icon png How to add this slider to blogger
Its simple. Because, As I mentioned above its easy to add by simple clicks. You can add this Nivo slider widget in less than two minutes to your site.  Follow below simple steps to get started in right way. 

  • Go to Blogger Dashboard > Layout
  • Click on Add a Gadget (select Gadjet from just below header)
  • Select HTML/JavaScript
  • Paste below code ▼ inside it.

<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }
 
 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }
 
 .nivoSlider a {
  border:0;
  display:block;
 }
 
 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }
 
 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }
 
 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }
 
 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }
 
 .nivo-caption a {
  display:inline !important;
  }
 
 .nivo-html-caption {
  display:none;
 }
 
 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(http://4.bp.blogspot.com/-nVH_wLuXb7c/UB62lKkUv1I/AAAAAAAABVM/_FjJIm1wIrM/s1600/labstrike-arrows.png);
  background-repeat:no-repeat;
}
 
 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }
 
 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }
 
</style>  
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>
 
<div id="slider" class="nivoSlider">
    <img src="http://1.bp.blogspot.com/-21F_RkIo-DM/UB6wSDoVrtI/AAAAAAAABUc/zlWeqKG5XnA/s1600/labstrike-image1.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="http://2.bp.blogspot.com/-9vn5zCDd06Q/UB6weSSfN4I/AAAAAAAABUk/jz9jB35Ejh4/s1600/labstrike-image2.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="http://1.bp.blogspot.com/-W2bnzOGjGow/UB6wnRIq24I/AAAAAAAABUs/KehuTNwZcrQ/s1600/labstrike-image3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="http://2.bp.blogspot.com/-bpA0v0ayP4o/UB6wyezZ1XI/AAAAAAAABU0/i6u4Ci-JeY8/s1600/labstrike-image4.png"
    alt="Slider Image 2" title="Your image Information">
    <img src="http://1.bp.blogspot.com/-m2os5MJOs8s/UB6w-NofxeI/AAAAAAAABU8/E2tMD9nLKYY/s1600/labstrike-image5.png"
    alt="Slider Image 2" title="Other opinion">
</div>
alert icon pngLet me tell you one thing, that the image size should be same as line number 6 and 7. If you wanna adjust the dimensions do change both dimensions of code and image [both should be same in size].

Also you can add this Nivo slider to your blogger blog post too. To add this slider into your blogger blog post follow below two simple steps.

  • Switch your blog post from Compose to EDIT HTML while you writing post
  • Copy code and paste it where you want to display Nivo slider

[But remember its not a good idea, because Nivo slider always faces a problem with spacing]

nivo slider customization Please do the following customization
Before you saving your gadget do this changes in your slider. The changes are following. So read it carefully.

  • Line no 6 and 7: Adjust the width and height of slider as per your images width and height
  • Line no 109: If you have already added a jQuery library to your blog then remove the highlighted color
  • Line no 123,125,127,129 and 131: Replace all highlighted image URL's with your own images URL
  • Line no: 124,126,128,130 and 132: Replace alt tag and title tag as you like

Save It and now you are done. Well, Its a stunning slider for blogspot blog. right? Any way I hope you enjoyed this post. Please do share this article if you like. And don't forget to give us your valuable comments. Happy blogging:)