Create Beautiful jQuery Slider - Nivo Slider

Hai guys i will share a great stuff for you. Do you like slider on my homepage? If you like that very much, now you'll got them on your web homepage!!! Yes that's allright i will share a tutorial how to create beautiul jQuery slider with Nivo Slider deafult themes.
So This Is It

---

Nivo Slider Screenshot

1. Login to blogger
2. Go to layout page
3. And then click "Edit HTML"
4. Find </b:skin> code

Tips!!!
You can use Ctrl+F to find some text on your browser

5. Copy this HTML code and paste it before </b:skin> code

/*
 * jQuery Nivo Slider v2.7
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * March 2010
 */


/* The Nivo Slider styles */
#slider{
width:618px;
height:246px;
}
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/

.theme-default .nivoSlider {
    position:relative;
    background:#fff url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/loading.gif) no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.theme-default .nivoSlider a {
    border:0;
    display:block;
}

.theme-default .nivo-controlNav {
    position:absolute;
    left:50%;
    bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/bullets-1.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.theme-default .nivo-controlNav a.active {
    background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/arrows-1.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
.theme-default a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
.theme-default a.nivo-prevNav {
    left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}

6. Then find </head> code on your template
7. After that paste this code below BEFORE </head> code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>
<!--End Slider Scripts info @ http://blogyahyagan.blogspot.com-->

IMPORTANT :
If you've insert jQuery script to your blog before, you can remove the text that i colored "red".
8. And then save your template.
9. Go to "Edit Layout"
10. Click "Add Gadget"

IMPORTANT :
Read how to Add Full Width Cross Column Gadgets To Blogger.

11. New HTML/Javascript
12. And then paste this code

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<a href="http://yahyagan.blogspot.com/2011/11/16-best-free-blogger-templates.html"><img src="http://i1212.photobucket.com/albums/cc451/ramseyinjury/template.png" alt="" title="16 Amazing Template Featuring jQuery Slider" /></a>

<a href="http://yahyagan.blogspot.com/2011/11/angry-birds-season-2-full-crack.html"><img src="http://i1212.photobucket.com/albums/cc451/ramseyinjury/angrybirds.png" alt="" title="Angry Birds Season 2 Full Cracked"/></a>

<a href="http://yahyagan.blogspot.com/2011/11/kaspersky-activation-code-16-nov-2011.html"><img src="http://i1212.photobucket.com/albums/cc451/ramseyinjury/kaspersky.png" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>Kaspersky Antivirus Full Version With Activation Code
</strong></div>

</div>

13. Finally click save template

Note :
Change the blue color text with your article url
Change the red color text with your image url
Change the green color text with your own caption

Thanks for visit this blog, hope you will like this article. Click here to see 5 Great jQuery Tab Navigation Tutorial
For other information or other Nivo Slider Theme you can go to the Nivo Slider Theme Official Webpage
http://www.nivo.dev7studios.com/