In the past I have provided Blogger users with a number of different Image sliders or featured posts sliders.Recently while working on a blog design job I had a client looking for a very specific slider to display some of their best images.The slider needed to have some specific specifications which were not covered by my previous efforts.I also needed to make the slider lightweight and easy to edit so the client could quickly change the images and links.
So we were looking for the slider to be :
1. Full Width - so it spans the entire width of the blog but also for this tutorial I wanted the width to be easily changed.
2. Auto and manual scroll - We wanted the slider to scroll through images automatically, the slide would stop on hover and also visitors would have the option to scroll at their own pace.
3. Two ways to scroll - We wanted to have the classic Next/Previous buttons but also bullets below the slider to skip to any image.
4. Easy to edit - The HTML code for the slider can be accessed via the layout page rather than buried within the template.
So in this post I have to tutorial to add this new slider to your blog.You can see a live demo of the slider by following the like below :
And here is the tutorial to add the slider to your blog.
Add Featured Slider To Your Blog
Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template
Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.
Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
Note - The only changes you may want to make to this code are in yellow at the top and set the width and height.When you set your width and height here make sure your images match those dimensions.
<!--New Featured Slider From http://www.spiceupyourblog.com -->
.fp-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 329px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.fp-slides, .fp-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: url("http://3.bp.blogspot.com/-T2u14ZkViVc/UDVDYSb6qoI/AAAAAAAAA4U/xgSh7zYVwGY/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("http://1.bp.blogspot.com/-J0WXZkvU9Fw/TwL174uF0sI/AAAAAAAACGU/3zCFSpAL1Xo/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("http://4.bp.blogspot.com/-q6d5ARd-gto/TwL18nZpBkI/AAAAAAAACGY/b1BSQrPbsHA/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("http://2.bp.blogspot.com/-OpDIcNy43XA/TwL16dnar-I/AAAAAAAACGM/pGYlPIxfbE8/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}
<!--New Featured Slider From http://www.spiceupyourblog.com -->
Step 3. Now In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :
Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)
</head>
Step 5. Now Copy And Paste This Code Directly Above / Before </head>
Note- If you have previously added jquery to your template remove the line of code in yellow.
<!--New Featured Slider From http://www.spiceupyourblog.com -->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src='http://yourjavascript.com/3304001418/slider-code-3.js' type='text/javascript'/>
<script src='http://yourjavascript.com/0412100943/slider-code-1.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3060311041/slider-code-2.js' type='text/javascript'/>
<!--New Featured Slider From http://www.spiceupyourblog.com -->
OK with that we have added the CSS and the scripts for the slider.You can forget about them unless you want to change the width in future you will not need to make any edits.
Now we add the HTML that holds your images, links and descriptions.We add these to a HTML/Javascript gadget as shown below.This is the section you will edit to change the images in your slider
Add The HTML
Step 1. In The New Blogger Dashboard Click The Drop Down For Your Blog > Choose Layout > Click Add A Gadget > Choose HTML/Javascript > Paste In The Code as shown in the video below :
Code :
Note - See Instructions to change images, links and text below the code.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--New Featured Slider From http://www.spiceupyourblog.com -->
<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>
<div class='fp-slides'>
<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://4.bp.blogspot.com/-LFb-cS9tI8Q/UWgJtdGn7nI/AAAAAAAALYE/otSeRtUYutk/s1600/spice-slider-image-1.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title Here</a>
</h3>
<p>
Write your description and information for the first image here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 1 Code End -->
<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://3.bp.blogspot.com/-8IlLRAqMWx4/UWgJtijXkgI/AAAAAAAALYI/HrefDvHYqa8/s1600/spice-slider-image-2.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title For Image Two Here</a>
</h3>
<p>
Write Your Description For Image Two Here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 2 Code End -->
<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://3.bp.blogspot.com/-M3aVVXPdNtM/UWgJtgOIbPI/AAAAAAAALYA/TGsigrwxD1o/s1600/spice-slider-image-3.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title For Image Three Here</a>
</h3>
<p>
Write Your Description For Image Three Here.
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://3.bp.blogspot.com/-20aaiHxLnNQ/UWgJuEf0JrI/AAAAAAAALYU/34qAJSeKnPg/s1600/spice-slider-image-4.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title For Image Four Here</a>
</h3>
<p>
Write Your Description For Image Four Here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 4 Code End -->
<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://2.bp.blogspot.com/-jJLMd6xIRVw/UWgJuBDFaEI/AAAAAAAALYQ/0o21Xx_O-FQ/s1600/spice-slider-image-5.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title For Image Five Here</a>
</h3>
<p>
Write Your Description For Image Five Here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 5 Code End -->
</div>
<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!--New Featured Slider From http://www.spiceupyourblog.com --></div>
</b:if>
Show The Slider On All Pages :
The slider is set to be on the home page only.If you want it on all pages remove the code highlightd in red at the start and end.
Change the slides :
I have highlighted the parts that need to be changed for the first slide you will need to change the same areas for the other four slides.
Images - I have the image URL highlighted in yellow change this for the image you want to use.
Text - I have the Title and Description highlighted in blue change this for the title and description of your image.
Links - Both the image and title can link to a page or post on your blog.I have the links highlighted in green change these for the links you want.Remember you will have to add the link to two parts of each slide.If you want it to link to the image simply add the image URL in both spots.
And that's it a really cool new featured posts slider for your blogger blog.Make sure to check out some more of our Blogger Gadgets.
Thanks! Can't wait to try this!
ReplyDeleteThis is a nice slider but it never seems to amaze me with the some of the useful resources you provide you readers with. You have took the blogger blog concept to the next level. Thanks for providing and sharing your skills.
ReplyDeleteCan we have such a slider in CSS instead of Jquery?
ReplyDeletePeople are often afraid of these sliders at blogger, they think that slider is hard for them, that is wrong.
ReplyDeleteVery cool, i want to try it
ReplyDeleteReally great post, might have to try this out
ReplyDeleteThanks! I put this on my sidebar. Still working out some things (w/ my pictures) but I really like it! http://myjourneytolivingwell.blogspot.com
ReplyDeleteThat's great!works perfectly!
ReplyDeleteI've tried putting it up in my blog. Looks great on homepage but the problem is it continues to appear in post page as well which looks rather gawky. Could you suggest any way for it's appearance limited to just homepage?
ReplyDeleteHi,
DeleteI have changed the tutorial for the slider to only appear on the home page.
As you have already added it to your blog this is how you can make it show on the home page only.
Go to the HTML code you added witht he image URLs etc..(The code you added to a HTML/Javescript gadget).
Paste this before all that code :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
And Paste this below all that code :
</b:if>
That will do the trick !
Any idea why I might get a white blank slide after each of my content slides?
ReplyDeleteWhat blog have you the slider on ?
DeleteI can't get this to work with or without the Jquery line. Has anyone else had a problem? (my site is www.siouxwire.com)
ReplyDeleteI have successfully programmed your slider on my blog, you can check it out here: http://aflockofbluedoves.blogspot.com However, I would lake to make it into an automatic updated recent post slider. How can I do this without having to manually change the links titles and description?
ReplyDeleteHi ! I think it is better if every captions of the slides show with auto-hide effect.
ReplyDeleteThis looks cool and works great in Chrome and Firefox. But in IE pictures are frozen and wrong captions show, even on your sample page.
ReplyDeleteAny idea why other than IE sucks.
Hey, thanks so much for this slider. You make it so east to just plug and play the scripts!
ReplyDeleteHi, I've used this on my blog and it works fine but I'm just wondering how do you not make it show up on all my blog posts? I just want it to show up on my home page if possible? My blog is http://duobeauty.blogspot.co.uk/
ReplyDeleteHi Emma,
DeleteI have changed the tutorial for the slider to only appear on the home page.
As you have already added it to your blog this is how you can make it show on the home page only.
Go to the HTML code you added witht he image URLs etc..(The code you added to a HTML/Javescript gadget).
Paste this before all that code :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
And Paste this below all that code :
</b:if>
That will do the trick !
HI Paul, thank you so much for sharing this slider. I just have one problem, the coding that you have above for having the slider only on the homepage is not working, it still is showing on all of the other pages. What would be the reason it isn't working?
DeleteThank you
I'm also having the same issue. It shows up on all my pages as well, even with the above added code. Is this maybe because I have a static Home Page? Any help would be greatly appreciated! Thanks! :)
DeleteHi, it works perfectly except for the fact that the images load slowly while the slide changes and it looks bad. How can i make my images load smoothly and quickly or how can I delay the change speed so that the images load properly? Thanks.
ReplyDeleteplease how do I upload the image to be display
ReplyDeleteYou can upload them to a blog post or a site like imgur.com Tobi.
DeletePaul thank you for posting this.
ReplyDeleteWould it be possible to have the text appear to the right of the slider? I would greatly appreciate it.
Hello! I successfully applied the slider to my blog, but I really wish the images would take a little more time to slide. I'd like to increase the time that each picture appears. Would that be possible? Thank you!
ReplyDeleteNadia in the first section of code you will see : speed: 200,
Deletedelay: 800 increase this to increase the delay.
Hi, I'm trying to put this below the header of my blog but haven't posted it live yet, as it's 30 pixels displaced from the left and bottom. Was trying to fiddle around in the CSS to fix it, but havent been able to figure it out.
ReplyDeleteExample of my issue: http://i.imgur.com/1fwFfCJ.png
Hi, I was wondering how to remove the arrows and the dots on the bottom? I've successfully added this to my blog but want to remove the arrows and the bullets on the bottom.
ReplyDelete