Carousels For Blogger what it is,it ia an type of images slider horizontally or vertically for your images with an link to desired post or website you want to link.In some carousels you can add title and description of posts also with an link to post.These image sliders are nowadays highly used by our blogger platforms to attract visitors to there content or show of there latest or best content.Every body use it of at different places in blog with different purposes.So why not you try and use it your blog.
You would have seen my last post peel add for blogger for attracting your visitors to subscribe your blog or show of your advertiser or show of some other important stuff.Some hacks like these i previously wrote were image hover effect,images reflection in blogger posts and zoom your images in blogger posts,which might also help you a lot.
Now lets carry on with an important tutorial of how to add the image slider to your blog.
Just see it at top below the blog header.
Download this Zip file and get two javascript files from it for backup.
Now after getting these two scripts you can upload them to your own server,if you want else dont know where to upload check my this post on where to upload .js files.
Now Just login to your blogger account Then Go To > Layout > Edit/Html > Press Ctrl+ F
Now search for </head> and place the below javascript codes before this tag.
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js’ type=’text/javascript’/>
In the above codes you will see red coloured lines just replace them with the link of your file which you downloaded and uploaded to your server, if dont want then also you can use my above links.
Now Search for this code ]]></b:skin> and add the below css above it.
background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content’s height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
Above in code is red line with url of background image of slider,you can also change it to adjust your blog.
Special Step
Just Find for /head tag and place the below script above it.
#mygallery{overflow: hidden;}
</style>
<script type=’text/javascript’>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: ['http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg', -48, 0], rightnav: ['http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
The green lines are the images of side arrows to make it scroll left and right you can make and add your also to make it look different.And in pink are number to control speed of slider and no of images to be shown at once in slider,so make it adjust acc. to you.If you increase images to be shown from 3 to any number then you have to increase the size of it also in slider css which is written below.
Now Save Your Template.All the coding part is finished,now just how to add images to slider.
Just go to Layout > Page Elements > Add A Gadget > Html/Javascript
And add the below links of images and posts in it,in the format i am writing below.
<div id=”mygallery” class=”stepcarousel”>
<div class=”belt”>
<!– 1st Template –>
<div class=”panel”>
<a href=”http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html” target=”blank” title=”Two Column Denim Template”> <img width=”160″ alt=”Two Column Denim Template” src=”http://4.bp.blogspot.com/_v5IxGTiMTD8/SQTQLthrdvI/AAAAAAAAAHk/JY-ySDnZ8Xw/s400/newtwocolumndenimtemplate.jpg” height=”110″/> </a>
</div>
<!– end code of 1st –>
<!– 2nd Template –>
<div class=”panel”>
<a href=”http://www.anshuldudeja.com/2009/02/simple-blog-writing-template.html” target=”blank” title=”Simple Blog Writing Template”> <img width=”160″ alt=”Simple Blog Writing Template” src=”http://4.bp.blogspot.com/_v5IxGTiMTD8/SZpu68uI7xI/AAAAAAAAAM8/4qHvgwss23o/s400/simple+Blog+Template.png” height=”110″/> </a>
</div>
<!– end code of 2nd –>
<!– 3rd Template –>
<div class=”panel”>
<a href=”http://www.anshuldudeja.com/2009/05/woork-style-blogger-template-design.html” target=”blank” title=”Woork Style Blogger Template”> <img width=”160″ alt=”Woork Style Blogger Template” src=”http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png” height=”110″/> </a>
</div>
<!– end code of 3rd –>
<!– 4th Template –>
<div class=”panel”>
<a href=”http://www.anshuldudeja.com/2009/05/blogger-buster-style-blogger-template.html” target=”blank” title=”Blogger Buster Style”> <img src=”http://img23.imageshack.us/img23/8537/bloggertemplate.jpg”/> </a>
</div>
<!– end code of 4th –>
<!– 5th Template –>
<div class=”panel”>
<a href=”http://www.anshuldudeja.com/2009/05/free-lenomag-blogger-template.html” target=”blank” title=”Lenomag Blogger Template”> <img width=”160″ alt=”Lenomag Blogger Template” src=”http://2.bp.blogspot.com/_nX0wvumD9VU/ShkEH2GD1nI/AAAAAAAAAOY/xeVepHCMH2M/s400/Preview.jpg” height=”110″/> </a>
</div>
<!– end code of 5th –>
<!– 6th Template –>
<div class=”panel”>
<a href=”http://www.anshuldudeja.com/2009/06/money-blogger-blogger-template.html” target=”blank” title=”Money Blogger Template”> <img width=”160″ alt=”Money Blogger Template” src=”http://1.bp.blogspot.com/_nX0wvumD9VU/SiuAxR7uKDI/AAAAAAAAAPE/BYtw4ToMfr4/s320/money2520blogger.png” height=”110″/> </a>
</div>
<!– end code of 6th –>
<!– 7th Template –>
<div class=”panel”>
<a href=”http://www.anshuldudeja.com/2009/06/digital-statement-blogger-template.html” target=”blank” title=”Digital Statement Blogger Template”> <img width=”160″ alt=”Digital Statement Blogger Template” src=”http://img2.pict.com/fd/ad/16/9de4e09426b4090113f40930f2/bnaeY/800/digital2520statement.png” height=”110″/> </a>
</div>
<!– end code of 7th –>
<!– 8th Template –>
<div class=”panel”>
<a href=”http://www.anshuldudeja.com/2009/06/orkut-theme-blogger-template.html” target=”blank” title=”Orkut Theme Blogger Template”> <img width=”160″ alt=”Orkut Theme Blogger Template” src=”http://img2.pict.com/f3/ec/dd/06efff55a05477591153094b2f/rDVvV/800/orkut2520theme2520blogger2520tem.png” height=”110″/> </a>
</div>
<!– end code of 8th –>
</div></div></div>
Just change the links and images url with yours and also there titles.Just keep on adding links to in this format to any number you want as you can add hundreds of images and posts in this format no limit to it.
singlelad.blogspot.com
check out my blogger template it is just like woork do you want it ?
@ dinesh nice work keep on designing like these.
How to make the slider auto move? Pls help
Can u teach me how to make auto slider like this site? http://gamezine-lite.blogspot.com/
I mean the slider will auto move, you can see from this site, below the site have auto slider, how to make it auto move? http://browsershots.org/
Any way to use this with Recent Posts Widget With Thumbnails Preview for Blogger. I want the images from my posts to show instead of adding it manually.
@chai This slider is not auto Move,you can't make it auto.This slider has same look as of the blog you are telling.Here is the demo and installation of slider u shown to me
http://sorgalla.com/projects/jcarousel/
If you want install it from there it will be good.
@Matt No friend no way as you saying.It is possible way using javascripts but no widget at this time you want is available.
About the site you suggested to me I can't follow because I'm newb in html code. So if you don't mind, can you teach me how to make it auto move in blogger? Pls.. Thx
hey buddy thanks for the info [:)]
the slider is working kewl for me , check my blog nd see whether i have done it properly na…
anyways thanks again man…………keep posting [:)]
where i can upload the images?
@ SEO here the list
Free image hosting sites list
can i reduce the width of the slider?
@ youth yeas change the width part in css that i have defined width:650px;
hiii anshul.. i found ur site in google… and am very much impressed.. with ur blog.. u have done a great job… thanks for the post… A small suggestion for auto slider.. i made it as u said and its working.. & for auto slider i just added
marquee behavior="scroll" direction="left"
div id="myslides" and at the end of /div closed with marquee.. it automatically slides.. its working… am not familiar with html.. but its working suggest me.. if its ok or not? my site is 123Rocks.com thank u… once again…
@naveen this is not proper slider for images, proper slider is like this in this demo blog check it http://zitizen-full.blogspot.com/
I will hold tutorial on it soon.
@anshul thank u for ur response.. waiting for ur tutorial..
Thnax for help but i had a prob.just slide it in my blog i hav edited but pics go till the end in my blog. Can u help me..http://gangstuff.blogspot.com/
@krishan its working fyn in blog of yours now.
thanx but i wan marqee this automatically after loading..if possible thanx in advance…
♥♥
Hi anshuldudeja. Congrats for your blog.
I´m trying download your file .js and I can´t fron Ziduu.
Can you help me? Thanks.
Best regards from Spain.
Link is working i checked it.
Hello Anshul,
How can i change width of this widget ?
@mz just increase width property from css of
#slides(outer} and also .stepcarousel (inner)
In all you have to play with full css.
I dont understand my problem Image icons are not appearing..
filmsdbhelp.blogspot.com
IF SO THANX IN ADVANCE
@ken blog link not working.
http://filmsdb.blogspot.com/
I dont understand my problem Image icons are not appearing..
filmsdbhelp.blogspot.com
Thanks , i made it so easy thanks for your sharing … so cool !!!!!
@all readers the slider is updated and working fine now….Thanx for your patience.
this image slider not working ,, please cek!!!
@armanto u check again its working smooth like an butter 🙂
Thanks for this wonderful tutorial! How can change the height of the arrows? I use it in my blog http://www.necturaPH.com