Customized Slider For Blogger

How To Add This Slider To Blogger?

1. Select the images which you want add in slider
2. Resize them to same size
3. Upload it and get the URL.
4. Now go to Blogger Dashboard > Layout
5. Click on Add a Gadget (below header)
6. Select HTML/JavaScript
7. 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZtuU2I45XJX6eMHqww_3hZ7bvUyZAbunlklGNMP8wOatVBxRhFwQmx5T9XSPme5qR_MPuZg-IO1y_1bJtvNHxrRgS6Pf16if6nTCUot8VKziexOXg4t1SeqoXVIiv2d0uA-sVI3YZ0dI/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="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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimdwpF1slIYbXpmkZfDTpyn1nSTwgYLKoK-3_RPrqkWqIwwaIORtFXXHNSgqup1FrpttCKHhXLPiBiQcyR6yIKMK5xXUgwU2NEqW3Zy4ElFrGNlhKSYHjOgeo3NJSm7U2-NlPlCBZbyfk/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/AVvXsEi22kNnGk7vv8IBjIqcJNEKYUIfrp5qss92nfw7lU94no-Gl0kfdcSs1HE50_wnvkUnstdfUzQ0P7ZQGMlcoJytx-keMLrySFkd-tS0VOX6_7gyfVvT3geEaqXIizNxBMiT5-voFkRpNPc/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJJsepaY0Rpk1LDRcwWzLvJd0b9TZTW-3zpI0v4qVkZpuPEbNgR9TnPLJcqWtq14No7_dLznAQpbqrNFxwWFhCn19vr59XlK2H45fm-irEKROsu8wKlVMTvJNh_eafa71Y7wZ26Phr1n4/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmpK48D4PrWx4btc3DyhZgjIFjewASurnLbeVuegH1bmafmszAeXYX6wShIRk1jBHuP_sYAAwnr6-OULZ5qDbLLHWkNf44Dp1F7uABpsW52CyThi_EJftzSRkpK-dSWlTsEJU7QbstB8/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuL1hcYqSZLLz865-Xb3_KFOIFvhZEN36KoPi9TIHZbKqX1kbBivtSX_qMq9RcPPVBua4LGauU0uJm6YQE7lGQyBMgSJ8tgzcZ5aPqJ-ErOXBh5sn0hpXZNtvk15LvVNPtQSSFyazKM7s/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.

Tweet