how to add jquery plugins effects to blogger

First you need to add the jquery library in your blog's code. Go to Design-->Edit HTML in Blogger Dashboard and paste the following code before your </head> tag:

<script src="https://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"/>

For an image slideshow, several jquery plugins are available. A neat and simple choice would be #-Link-Snipped-# plugin.
Or if you want a cool, more flexible image slider, try #-Link-Snipped-# plugin.

Make sure to add any jquery code before your </head> tag.
You can add even more effects with jquery. Just try browsing through the numerous jquery plugins available and find what suits you. You can start from, say, #-Link-Snipped-#.

Hi, I searched for your query and found this result:
Let us know if that helped.

1 Download Nivoslider plugin from this site . Or you can download directly from this link .If you download this plugin from website ,you will see two version : production and development . Production is the version in which the code is encrypted for copyright protection . And the development is not encrypted . You can download both of them, but development version is better .

2,Upload file nivo-slider.css and jquery.nivo.slider.js to a host . I recommend Google code for a speed and reliable hosting .

3,Create a HTML/Javascript widget in your Blogger blog .

4,Paste this code into widget content :
<link rel="stylesheet" href="your host .../nivo-slider.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="your host .../jquery.nivo.slider.pack.js" type="text/javascript"></script>
The code above include Jquery framework and nivoslider plugin to your site .

5,Paste this code right after the code in step 3 :

<style>
#slider {
position:relative;
-moz-box-shadow:0px 0px 10px #333;
-webkit-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
}
#slider img {
position:absolute;
top:0px;
left:0px;
}
#slider a {
border:0;
}
.nivo-controlNav {
position:absolute;
left:47%;
bottom:-30px;
}
.nivo-controlNav a {
display:block;
width:10px;
height:10px;
background:url(#-Link-Snipped-#) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:-10px 0;
}

.nivo-directionNav a {
display:block;
width:32px;
height:34px;
background:url(#-Link-Snipped-#) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-32px 0;
right:10px;
}
a.nivo-prevNav {
left:10px;
}
</style>
This CSS code will add arrows and bullets icons for navigation in NivoSlider . It also stop flashing images before this plugin loads .

6,The code of slider content.Paste it after the code in step 5
<div id="slider">

#-Link-Snipped-#


...............
</div>
As you see ,in slider content ,you can add links and caption to images .Modify them and add more if you want .

7,Make this plugin work by adding an initial code :

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
The initial code above is a simple one . Nivo slider has many options ,and here is the initial code with full option (and description for each option )
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
each line is an option ,and you can add ,modify value or remove for adding or removing option . For example ,the line "keyboardNav:true, //Use left & right arrows" mean it allow using right-left arrow button on keyboard for slider navigation . If you don't allow using keyboard ,set the value to "false" .

8,Save the widget and see what we have ^^


A note for you : Size of displaying slider depend on size of "#slider" element and images in slider . For example : to make a slider which has width : 700px , you have to set the width of slider element to 700px ; like this
#slider {
width:700px;
}
and use images which have the width :700px for fullfill the slider element . If you use a smaller image ,you will see the slider with smaller size .
That's all .

AbraKaDabra

Hi, I searched for your query and found this result:
Let us know if that helped.

1 Download Nivoslider plugin from this site . Or you can download directly from this link .If you download this plugin from website ,you will see two version : production and development . Production is the version in which the code is encrypted for copyright protection . And the development is not encrypted . You can download both of them, but development version is better .

2,Upload file nivo-slider.css and jquery.nivo.slider.js to a host . I recommend Google code for a speed and reliable hosting .

3,Create a HTML/Javascript widget in your Blogger blog .

4,Paste this code into widget content :
<link rel="stylesheet" href="your host .../nivo-slider.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="your host .../jquery.nivo.slider.pack.js" type="text/javascript"></script>
The code above include Jquery framework and nivoslider plugin to your site .

5,Paste this code right after the code in step 3 :

<style>
#slider {
position:relative;
-moz-box-shadow:0px 0px 10px #333;
-webkit-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
}
#slider img {
position:absolute;
top:0px;
left:0px;
}
#slider a {
border:0;
}
.nivo-controlNav {
position:absolute;
left:47%;
bottom:-30px;
}
.nivo-controlNav a {
display:block;
width:10px;
height:10px;
background:url(#-Link-Snipped-#) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:-10px 0;
}

.nivo-directionNav a {
display:block;
width:32px;
height:34px;
background:url(#-Link-Snipped-#) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-32px 0;
right:10px;
}
a.nivo-prevNav {
left:10px;
}
</style>
This CSS code will add arrows and bullets icons for navigation in NivoSlider . It also stop flashing images before this plugin loads .

6,The code of slider content.Paste it after the code in step 5
<div id="slider">

#-Link-Snipped-#


...............
</div>
As you see ,in slider content ,you can add links and caption to images .Modify them and add more if you want .

7,Make this plugin work by adding an initial code :

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
The initial code above is a simple one . Nivo slider has many options ,and here is the initial code with full option (and description for each option )
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
each line is an option ,and you can add ,modify value or remove for adding or removing option . For example ,the line "keyboardNav:true, //Use left & right arrows" mean it allow using right-left arrow button on keyboard for slider navigation . If you don't allow using keyboard ,set the value to "false" .

8,Save the widget and see what we have ^^


A note for you : Size of displaying slider depend on size of "#slider" element and images in slider . For example : to make a slider which has width : 700px , you have to set the width of slider element to 700px ; like this
#slider {
width:700px;
}
and use images which have the width :700px for fullfill the slider element . If you use a smaller image ,you will see the slider with smaller size .
That's all .

I have tried this one already brother but it didn't work properly bro.......