Blogger is not more a blogging platform for beginners, there are lot more can be made with a blogger / blogspot blogs. Featured content sliders are seen in many WordPress blogs and when coming to blogger it is certainly not much seen. Here I am going to teach you, how to add a featured content slider to your blogger / blogspot blogs. Many thanks to Webdeveloperplus for making this code and I just tested and modified to work on blogger.
Step 1: Let get into the coding part. Here I just made a CSS stylesheet, to make the installation pretty simple. So all you need to do is just copy the below code and paste it after <head>
<link href='http://sites.google.com/site/bloggermintcom/style1.css' rel='stylesheet' type='text/css'/>
Step 2: If you need to change the dimensions of the slider you can use this step instead of step 1. Search for the code
]]></b:skin>
Now the place the below code before ]]></b:skin>
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('http://2.bp.blogspot.com/_ubwIhqPcR6M/TNv3EFphS6I/AAAAAAAABHE/iZ0jSrh-E_c/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}Step 3: This step involves the featured content structure. Search for the code
<div id='content-wrapper'> and place the below code just before
<div id='content-wrapper'>
<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove "showing post with label" in Blogger</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
</ul>
<!-- First Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
<h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
<p>Description goes here, this is just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
</div>
</div>
<!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
<div class='info'>
<h3><a href='#'>How to remove "showing post with label" in Blogger</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div>
<!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
<div class='info'>
<h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
<div class='info'>
<h3><a href='#'>Chat live with your blog visitors using yahoo</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div> </div>Replace the default image URL with your image URL. The bigger image dimension is 400 * 250 and for smaller its 80 * 50. Do insert your image with these dimensions, to make it look better. Also replace the text and link with your info.
Step 4: Now we need to initialize a script to play the slide show. For that we use this script. Place the below script just after <head>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});
</script>Step 5: This is an optional step, if your blog already includes the jQuery and jQuery UI libraries. If not, follow this instructions. Copy the code below and paste it after <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Click here to see the live demo
Thanks for the post . .
Hi I’m having some trouble with the steps. There is no in my blog. What should I do?
Hello,
Please help, I do not have the “” in my blog, I am using the blog with the theme designer. What should I look for instead?
I cant find the content wrapper bit of code in my html.. What do I do?
Hi! First of all i have to say this post its really good but i couldn’t find so i placed the code before and it works! but the real problem here is that the content slider is shown in the top left part of my blog just before the blog’s title (html image) and i want it after this. i think i can make it if i modify the margins but i don’t know how to do this or where.
I hope you answer this, please help me! :/
A note to all commentators. If you don’t find content-wrapper in your template, just paste the code anywhere in the template (after the css) to see how it appears in the preview.
Since template designers uses different name, I won’t be able to help each and ever commentator here.
Hi…I’ve got it done… But I do not know how to change the default pictures and links. Will you please give instructions on changing this?
You must upload your pictures before, and then You just change the image URL on the Step 3 code..
thanx… very nice post
Hi Franklin
I was wondering if you could help me. I added a wordpress theme to my website. It contains a content slider too. Now as soon as I add the image as a featured image, I can see the post appearing along with a thumbnail of this image, however, the content slider shows only text without the image. I have tried using image resolution specific pics too which are 936 x 231 so that they fit as per the width and height of the slider. However to no avail. I dont know where i’m going wrong. I’d really appreciate it if you could assist me?
Thank you for your time
Cheers
Savio
is it possible to have this widget based on feed rss
I could not put on my blog, you have to help me?
this kicks butt. thanks for the leg work and the instructions!
I’ve installed the slideshow and it is working great. The only problem I have is that when you scroll past the slideshow to the bottom of the page it jumps you back up to the slideshow every time the slide changes. Any thoughts on how to stop that?
I already wrote it, I could not do the tutorial on my blog, I do not have the content-wrapper
Hi.. where’s th js file here? or the general jquery would make it work?? I’m sorry but I’m new in jquery plugins
Thanks
my slide show picture does not change can some one help me?
How can I move the slide show under my page list instead of at the top?
Didn’t work for me….:(
Sorry…my mistake…It worked….thanks….
it seems like my jquery codes are conflicting, when i remove your jquery code mine works, when mine is there your code does not( the slider does not move)
any help?
Abracei esta dica. Fundamental para meu problema. Pois o slide que eu tinha muito semelhante a este não funcionava no Internet Explorer. E este funciona.
Quando eu ativar meu blog certamente irei usar este slide.
abraço.
I didn’t find in my html part
nice share… i’m newbie on blogger, i hope you share anything about blogger to keep me watching you and follow you always
Hello, I’m really new in blogger code.
Your code works really well when I tested on a test blog, but when trying to use it in my “real” blog it do not works well.
I guess it’s function () error, because I have another script to zoom images and I think that there is the problem. (Image Magnify script)
There any way to use both?
Thanks for the reply and for the hard work.
Thats code not work on my page…
anyone can help me plz..