Customized JQuery Nivo Slider for Blogger in style 2

Nivo Slider is one of the best jQuery slider available,we previously shared Customized JQuery Nivo Slider for Blogger in style 1 . now this time we are sharing Customized JQuery Nivo Slider for Blogger in style 2.Image slide shows are the best ways to show off your photos,featured posts,images and any other material as you wish.Also Nivo slider has 16 unique transition effect which makes it more beautiful.The installation of this slider is very easy so that new blogger's also can implement this gadget to their blog very easily.

Live Slider Demo

How To Add Default Theme Of Nivo Slider To Blogger?

Step 1: Adding Styles

1. Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML) 
2. Backup Your Template Before Making Any Changes
3. Click (Ctrl + F) Search Give Below Code.

4. ]]></b:skin>
   

copy below cody of CSS code and paste just above ]]></b:skin> it.

• #slider {
      position: relative;
      border: 5px solid #333;
  }
   
  #slider img {
      position: absolute;
      top: 0px;
      left: 0px;
      display: none;
  }
   
  #slider a {
      border: 0;
      display: block;
  }
   
  .nivo-controlNav {
      position: absolute;
      left: 260px;
      bottom: -42px;
  }
   
  .nivo-controlNav a {
      display: block;
      width: 22px;
      height: 22px;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWhotj4v4pPjWG9MS1LOBUKwLYXU-Euq-BExGN7vPzx_HOZet9raKSGjHc2tjLQpTNvFezJEpNBYBcXTo62qsHzb_BXpt3QlE2VHeCAW0-2u7I98oQX3uFlM-J1hsZ07nr-k061WffzAY/s400/bullets.png) no-repeat;
      text-indent: -9999px;
      border: 0;
      margin-right: 3px;
      float: left;
  }
   
  .nivo-controlNav a.active {
      background-position: 0 -22px;
  }
   
  .nivo-directionNav a {
      display: block;
      width: 30px;
      height: 30px;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl2illEMdxLl8MkSzMoeUxlL6v4w7ipmI4RaSAO93eFsTO1ThpUCsn1XLJSIVQiOrWlJpl1H6cr-5XIdJhitpwINBG7B__iOrFknUfqg745FS4gIo7xgIDh59X2Ne7J_g2nwxCXID9j70/s400/arrows.png) no-repeat;
      text-indent: -9999px;
      border: 0;
  }
   
  a.nivo-nextNav {
      background-position: -30px 0;
      right: 15px;
  }
   
  a.nivo-prevNav {
      left: 15px;
  }
   
  .nivo-caption {
      text-shadow: none;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      padding: 10px 0px;
  }
   
  .nivo-caption a {
      color: #efe9d1;
      text-decoration: underline;
  }
   
  .clear {
      clear: both;
  }
   
  .nivoSlider {
      position: relative;
  }
   
  .nivoSlider img {
      position: absolute;
      top: 0px;
      left: 0px;
  }
   
  .nivoSlider a.nivo-imageLink {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      border: 0;
      padding: 0;
      margin: 0;
      z-index: 60;
      display: none;
  }
   
  .nivo-slice {
      display: block;
      position: absolute;
      z-index: 50;
      height: 100%;
  }
   
  .nivo-caption {
      position: absolute;
      left: 0px;
      bottom: 0px;
      background: #000;
      color: #fff;
      opacity: 0.7;
   /* Overridden by captionOpacity setting */
      width: 100%;
      z-index: 89;
  }
   
  .nivo-caption p {
      padding: 5px;
      margin: 0;
  }
   
  .nivo-caption a {
      display: inline !important;
  }
   
  .nivo-html-caption {
      display: none;
  }
   
  .nivo-directionNav a {
      position: absolute;
      top: 45%;
      z-index: 99;
      cursor: pointer;
  }
   
  .nivo-prevNav {
      left: 0px;
  }
   
  .nivo-nextNav {
      right: 0px;
  }
   
  .nivo-controlNav a {
      position: relative;
      z-index: 99;
      cursor: pointer;
  }
   
  .nivo-controlNav a.active {
      font-weight: bold;
  }
  

Step 2: Adding Scripts

Click (Ctrl + F) Search Give Below Code

• </head>

add below code just above it

• <script src="http://code.jquery.com/jquery-latest.min.js"
  type="text/javascript"></script>
  <script src="https://nivo-slider-blogsfunda-jquery.googlecode.com/files/jquery.nivo.slider.js"
  type="text/javascript"></script>
  <script type="text/javascript">
      $(window).load(function () {
          $('#slider').nivoSlider();
      });
  </script>

Save your template.

Now you have successfully implemented the slider's scripts and style into your blog,Now let's add the slider as an HTML/Javascript widget.

Step 3: Adding Slider

1. Now go to Blogger Dashboard > Layout
2. Click on Add a Gadget (below header)
3. Select HTML/JavaScript
4. Copy below code and paste inside it.

• <div id="slider">
      <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
      <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
      <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
      <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
  </div>

• Now replace "YOUR LINK HERE" qith the link which you want to add to image,if you don't want add any link then just replace replace it with #.
• Replace "URL OF IMAGE" with image URL.
• Replace "ADD DESCRIPTION HERE" with the image description,if you don't want to description then just remove the text and leave it blank.

Note - If your blog have a jQuery plugin then it may not work,just remove following code from second step,

• <script src="http://code.jquery.com/jquery-latest.min.js"
  type="text/javascript"></script>

Have Any Problem? Ask It Below In Comment Box.