Customized Nivo Slider For Blogger

05 February 2013

Customized Nivo Slider For Blogger

Namecheap.com - Cheap domain name registration, renewal and transfers - from only $3.98/Year

Nivo slider is one of best slider available on the web.I have shared two versions of nivo slider on helperblogger so far,default theme of nivo slider and nivo slider with ribbon but today I am sharing a customized version of the nivo slider.In this customized version the caption and bullets are customized to make them more beautiful also as always I have kept the installation as easy as possible you have to copy and paste the code.Now lets see how to add it to blogger blog.

How To Add This Slider To Blogger?

Select the images which you want add in slider
Resize them to same size
Upload it and get the URL.
Now go to Blogger Dashboard > Layout
Click on Add a Gadget (below header)
Select HTML/JavaScript
Paste below code inside it,

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT2j6lSpOgK5fYwMjR4SDEL1EbVOn4B0AioQogL8tO1ieLPDl14Fxfaz-7DCP5xDuFa1GVsbHQaE-KMr0dccJVHy7DrgOasB7QSqrGKUnvPX7GCg3Bcr4xkS_abn5ewCXrVAQbmSxSN3w/s1600/helperblogger.com-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>

    - Slider Width And Height

Adjust the width and height of slider as per your images width and height

     - Image URL

Replace all highlighted image URL's with your own images URL.

     - Image Caption

Here you can add your image caption
     - jQuery Library

If you have already added a jQuery library to your blog then remove the highlighted color.
Finally save your widget and you are done.

I have kept the installation 1 step and as easy as possible.If still you are getting a single problem then feel to ask it to me.I will try to give reply as soon as time allows.

Please Share it! :)

0 comments:

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Imtiaz Ahmed

05 February 2013