How To Add Cool Jquery Featured Slider to Blogger/Websites
1.Login to your blogger dashboard and go to Design --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below and click save.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<style>
#slider {
position:relative;
}
#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(http://4.bp.blogspot.com/_7wsQzULWIwo/TQ-dlkBU2zI/AAAAAAAADME/t3LPHO0VCso/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(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0/R3v8bZsCtqo/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;
}
</style>
<div id="slider">
<a href="URL-of-Post 1"><img src="Slide-X-Image-Address 1" alt="" title="Slide X Description [...] 1" /></a>
<a href="URL-of-Post 2"><img src="Slide-X-Image-Address 2" alt="" title="Slide X Description [...] 2" /></a>
<a href="URL-of-Post 3"><img src="Slide-X-Image-Address 3" alt="" title="Slide X Description [...] 3" /></a>
<a href="URL-of-Post 4"><img src="Slide-X-Image-Address 4" alt="" title="Slide X Description [...] 4" /></a>
<a href="URL-of-Post 5"><img src="Slide-X-Image-Address 5" alt="" title="Slide X Description [...] 5" /></a>
</div>
<br/>
<br/>
Note : Replace URL-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.
Use width=300px and height=618px images for your slides.
Look at the code below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<style>
#slider {
position:relative;
}
#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(http://4.bp.blogspot.com/_7wsQzULWIwo/TQ-dlkBU2zI/AAAAAAAADME/t3LPHO0VCso/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(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0/R3v8bZsCtqo/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;
}
</style>
<div id="slider">
<a href="#"><img src="http://1.bp.blogspot.com/_7wsQzULWIwo/TQ_SR600LwI/AAAAAAAADM4/6mdDT1QWsug/s800/Gazelle_-_antelope_%2528savanna.gif" alt="" title="Description Goes Here" /></a>
<img src="http://3.bp.blogspot.com/_7wsQzULWIwo/TQ_SRmjju2I/AAAAAAAADMw/ohmdzT-IcQM/s800/Curious_Cat%252C_Siberian_Tiger.gif" alt="" title="You can add Description here or leave it blank as shown in the next image" />
<img src="http://4.bp.blogspot.com/_7wsQzULWIwo/TQ_SRa2FfCI/AAAAAAAADMo/mSux9tnYhTw/s800/Christmas_Cat.gif" alt="" />
<img src="http://4.bp.blogspot.com/_7wsQzULWIwo/TQ_SSNkGTgI/AAAAAAAADNA/dNFIQHMyjfE/s800/Leopard%252C_Africa.gif" alt="" title="You Can Add Description Here" />
<img src="http://3.bp.blogspot.com/_7wsQzULWIwo/TQ_SSi-XdWI/AAAAAAAADNI/xhONAnqeyDU/s800/Three_tickets_to_the_North_.gif" alt="" title="#htmlcaption" />
</div>
<br/>
<br/>
Now you are done.
Cheers
14 Responses So Far:
Hi! How can I change slide timing, to go more slowly?
very nice thank you very much
i like it.. thanks
thanks, I'm putting this on my blogger blog.
How do I make the whole slider smaller (height wise)
Awesome. Will use this for my blog!
Lots of good reading here, thank you! I had been searching on yahoo when I observed your publish, I’m going to add your feed to Google Reader, I look forward to far more from you.
Unable to use this on my blog the transitions are messing up if you could fix and then re-post I would be very excited. Thanks
Wow it is nice and one of the great thing post by you for the current subject. it is one of the longest but easy to understand script.
psd to magento
Hi great post, am wanting to use this on my blog but was wondering. Is there a way to make the slider only appear on the home page? Meaning that when pepole click to read a post it does not appear at the top.
Thanks
is it possible to have this widget base on feed rss?
Hi there, It seem that the slider is not working after a while...hope that you can check it out...thank you..
You may donwload the new version of slide from the above link.
Hi….
Thanks for sharing this information and resources its really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks
Web Design Company India