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.
If the slider is still showing on all pages follow the steps in the video below :
This is the post mentioned in the video – Display Gadgets On Only The Home Page Or Post Pages In Blogger.
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.
Author – Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.
