Thursday, August 1, 2013

1 Nivo Slider Widget to Your Blogger

Posted by Dulshan R D 11:01 PM
Share On Google+Add This To DeliciousTweet/ReTweet ThisShare On FacebookStumble Upon ThisDigg This

I hope you guys remember the previous jQuery Slider I have presented you with amazing performance. So today also I'm gonna give you a nice slide show which also consists jQuery.  From this tutorial today I give you the 'Nivo Slide Show' which will make your Site or Blogger Handy. Without much talk I'll get to the Point.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.




  Add  Nivo  Slider  to  Blogger  and  to  Your  Site



There are three main steps in this Tutorial ;


  • Styles

    •
  • Scripts

    •
  • Slider


First Step
  1. Go to your Blogger Dashboard > Template

  2. Back Up your Template

  3. Press Ctrl+F

  4. Search for the below Code in Your Template



]]></b:skin>

Place below CSS Code just above 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/AVvXsEj9TsfaAWwb-u2WjzBqom8RflbzaivAfcQ6VkWj7TF6185LIeUF4G8wD3KA7CAc-_hIS3DwzMuD1VPeONUk3Ghc5Vt70JolFPlo7u5jivF-zJo54EqppjO5QJ9_SM_SkuwRWgqLX5HzFt8/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/AVvXsEgpCxdNqB5JWB9wqJ6E78Y-GqZyLdacOjEc5jncerbMyzktTer-JSy_lI52lvhHeVPkMtoAkM6HNv_U_XNDoXckXCZhyphenhyphenblj0JbK8zbVPJrRXM68IT4daErB_o_SaOKFmY9Zxyjr91YIjq4/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;
}


Second Step 


find below code in your template

</head>

add below code just above it,



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

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>
You are almost finish as last work you all need to add the HTML Codes for Sliders,
Step 3
  1. Go to Layout > Add a Gadget

  2. Select HTML/Javascript

  3. Copy and Paste the below Code
<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>


  • Replace "YOUR LINK HERE" with 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


I tried my level best to ease this work, but still if you get troubles please leave a comment and I'll get back to you as quikly as possible.

 7XCUXNHDPGWZ


  Warning  :  Don't Copy from this Post Without Linking Back to the Post




1 comment: