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-#.

i have added jquery but i don't know how to add slideshow plugin effect .could you help me bro?

still noone replied
tell
how To apply the Nivo Slider plugin to blogspot

guys someone help me .No reply for a long period
how To apply the Nivo Slider plugin to blogspot

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 .

AbraKaDabraHi, 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.......

<link rel="stylesheet" href="your host .../nivo-slider.css" type="text/css" media="screen" />

I tried a lot, but there is 1 problem ,when i add the whole code inside html widget , the above line of code is automatically removed
I don't the know the reason

goyal420I tried a lot, but there is 1 problem ,when i add the whole code inside html widget , the above line of code is automatically removed
I don't the know the reason

brother you have to paste that css code in the edit html section and only javascript and tags like div tags section alone in widget.
Right now i have added some other slideshow see it but I want to add nivoslider