Nivo slider is one of the most useful slider and surely you like it. I have shared some useful style of Nivo slider with easy installation and easily you can customized in your blogger. I hope you liked my this post if you are planing to add slider in your blogger

Style 1: 

Live Slider Demo

How To Add Default Theme Of Nivo Slider To Blogger?


  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
  • 

    
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikA2dJcw_FhiD6aoEbke_HplSCT5rAeV8_xwIeGeA62WPVWymsUpQQ7HdXCGXpeoXQ4FfooNiC6AMM7PPX7qt3FQFRoZhjFnj3CeS0KIfVTH18draimmAb0M0sjxo5JezD4KFfSdxzKio/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>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://nivo-slider-blogsfunda-jquery.googlecode.com/files/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRio3XaUGS8_VxGZIaSTPAmoVRFtAEezh7amLnC5RKSkqgnv9IvLa_qeJlf2zHyqnIAZ6nBcOKaLUiBRSN19mI1_YJRBdj8S-L8_zdCCy87HQsYkVNPwsv47nGT46RXnKVY4zWJRIVjR0/s1600/helperblogger.com-5.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53VrvHh2X19A6VN0PNVINNQLc89pNspAduQA-DXdaeo0K03w7f1aDMC19DESPaRiLiP8wHr8iYwzfuDlgL1u5gDxQH-25eZZTlpJAqntOeFtpPw3mYzYJm4Toh_fPav4ZdRm0lHX4VFo/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFIbyoybWJRrdAHm_dB7basT7eF-yrLIMUawCXBWB5KR_-fywucMZ4TFi1vB5G3hOiDmExpbU77r4GWJmxaQXNA1eSOLwppMrnagQurxdurcDVDbTirLJsYMFGHGK9hK6omamF8-4Azn0/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOCbYTrORUHU8FPbieqDH79FtBYglIohGaz-9uDNNbWSGhmXxbrKJE4ZjLxRLnwAn0qphA0db626nffX_7IgEspeV3IUuwRu5ZBvRfQJHLh8d1EOUlkkx_tbWUa1OrTmPa9_J31PvKtic/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdNlTfKR4U9WVrXK_l8wQyMoiOMfgrC1efgPPmZaLoTq-c_ZxLL08O-478rYBa8gZwsae-OEz3bmwtbs7gMeiEEIuhmsmK-Ybf-qiqcBMTuNynUYkO9-PSo2phAAwdMN78Y_yBudexGvs/s1600/helperblogger.com-1.png"
    alt="Slider Image 2" title="And Other Things">
</div>
     - 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.

Home Blogger Blogger Widgets Jquery Plugins Slider Blog