Subscribe to our mailing list to get the updates to your email inbox...
you can see Live Demo here
How about the effects? Cool? This plugin has been tested for most of popular browsers such as IE 7.0+ ,FireFox v3+ ,Chrome,Opera ,Safari ...so I don't think you will get trouble with browser when using this plugin .
Here is steps for install and use this plugin for your Blogger .
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="http://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 .<script src="http://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>
5,Paste this code right after the code in step 3 :
#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(http://nivo.dev7studios.com/images/bullets.png) 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(http://nivo.dev7studios.com/images/arrows.png) 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">
<img src="images/slide1.jpg" alt="" />
<a href="http://simplexdesign.blogspot.com"><img src="images/slide2.jpg" alt="" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
...............
</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 hope you will find something interesting with this plugin .
Here is list of showcase for this plugin ,you can take a look for inspiration ^^
Supporters:
Check out Hosting Observer – your guide to finding more
reliable web hosting plans online.
Check out Hosting Observer – your guide to finding more
reliable web hosting plans online.
coba ahhh
ReplyDeletetry this
ReplyDeleteThanks for taking the time to make this tutorial. I have already added one of the sliders to my blog. I like the effects of this slider. After trial and error finally the slider works nicely in my blog http://bullyingogah.blogspot.com/. Thank You, Bro :). Keep going !
ReplyDeleteMany institutions limit access to their online information. Making this information available will be an asset to all.
ReplyDeleteAhhh finally! I've trying to find this! I'm newbie in web design, so I really appreciate this! Thanks!
ReplyDeleteI have been looking looking around for this kind of information. Will you post some more in future? I’ll be grateful if you will.
ReplyDeleteRegards~
Prasen Dutta
Business Development LLC, at software development company India
I am blogger newbie. I can't get through step np.2
ReplyDeleteCan someone tell me how to upload "nivo-slider.css" and "jquery.nivo.slider.js" to a host using Google Code?
Step 2. : "Upload file nivo-slider.css and jquery.nivo.slider.js to a host . I recommend Google code for a speed and reliable hosting ."
Hello brother, how are you
ReplyDeleteWe miss your posts for the distinctive and interesting
For this topic I took his experience
http://jsbin.com/iqise3
And also of the view that the result a great
But when his experience in the blogger did not work
I advise you that the experience you personally to make sure it
Regards
@Rusdi : I made a post on how to use Google code for hosting file ,especially japascript files ,so you can search it out on my blog.
ReplyDelete@khaled :Thanks for your comment . I myself always test and make a live demo before writing down .About blogger,I think all javascript file can work out if you put it (1) in a html/javascript widget or (2) in template file . Blogger can work with javascript as well as others website and platform . If you see it not work for you ,pls write me a comment in blog ,and we all find out what happen . Thanks again .
I've gotten this to work except for the css link stylesheet everytime I save the widget it slices down the side of the page, and so I check the code and the widget deletes the css link stylesheet I work in html and xhtml and css, not javascript...help?
ReplyDeleteI'm getting so frustrated, I've been trying to work it for days in my blogger site and it isn't working. Tried everything.
ReplyDeleteI got to admit that it was the Toy story images that attracted me to the slider. May be kiddish but true. But as i used the slider once i started to really love it. I had got it worked in my blog once. By the way, it is the Nivo slider that is first in the list of my 10 Featured Post sliders for Blogger.
ReplyDeleteHow can I select just "fade" transition? Thanks
ReplyDeleteA very useful code indeed, even better if I can get it to work. I did all the steps you mentioned in this post, but i notice that this line goes missing "<link rel="stylesheet" href="your host .../nivo-slider.css" type="text/css" media="screen" whenever I save the java/html widget. Any idea how I can solve this problem? A reply will be most appreciated. Thanks :)
ReplyDeleteHow do you remove the dark shadow from around the slideshow?
ReplyDeleteThanks!
A very useful tutorial.
ReplyDeleteThank you, sir õ/
how to create jquery thumbnail slide show . please give us a good example. http://murraliitechnos.in
ReplyDelete