Designed by Veethemes.com

Customized JQuery Nivo Slider for Blogger in style 1

Tuesday, January 01, 2013 by Mohan Singh No Comment
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/AVvXsEjYHHsgGFyhMw9B9CyiQaCaCkIHgylld3ZMS4XzEUV3-KWu3agnjLfoxwNBg5kYTTQwatlmAhBW6MEk5dXkIa9JXJqKvpWI0QNMqidi4iuRKtj5aa0y2zc2NCJjiL7L3YiqNJ77AOvq1Jo/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/AVvXsEgcfa_fjfPQWddPG42sFlLSgrjFEqfonKFB2-Njx9lfLrJ40P4oJq6l03bQDSd_accI1XXDsKrkAndVeNbljYJqp0nMiqrVrljdDp3C757YCa5IVsPitoWYHWWssekKxNu3-rtVS2o5o-E/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/AVvXsEgFcnRN0UD3feAMmdFBambYznd5_TwE2FLYeG9jSxz7Dom-rSkrT7uJIzV8sB9KR0ubvgTMzZ0Nohh7py2hZ0eOS3DSeLEbhnNTE-uQGEjnNzpbDdEywc89n_m5w7HX3OwGHK4eqMl0CYI/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxMj3IEnX7_MMK3vijmIu_PltYUe7THRkLl2Pq9fd-JrOCjX-nh3cjiu92kPXViRaLzeUU97hTJznxycUVUH8WzKpmbCSoIEmzFBRtchJb_0enO3AJf0gLOx5ZxAcHbAb5zWJpy3lQPU/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFkkdNZ_wIbt4xDzJTqJAzc4c-WkcJSfm4uauufvnsRDo001tPHfILsLIwTTivafbw73hPpAT0m31DjYljCcB0sy1f5znJRvBc5pq6HB5nMMTaCitIPJvzX3fA3rw8gJi-nk8n4nm2Ufg/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWTo3jiLLdT2bcorrw5s2FbeOj-vid0D44c8MhSD6gC-j2jvMaGt90FEQhU7rQ7oSY4zhyphenhyphenVcdps2sE9jB61yHC-IuzpIwOlN2aJ0RJdNkxU75FQ7bctAS730xHEbgG3U8bHXyByiIfnBo/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.
Mohan Singh

0 comments:

Post a Comment

SUBSCRIBE

Subscribe now to get notified about exclusive offers from Us every Weeks!