Sharing all info: Auto Move Image Slider i.e carousel For Blogger

I had provided you earlier with an image slider with two left and right panels which on click take you to other images.But some of my readers at that time wanted it to have auto moves of images in slider.So in this post i will tell you how to auto move the images in slider.If you you don't know what exactly image slider is, then don't worry, just i would like you first to read my previous post on image slider for it and if you like it just follow that tutorial to have it in your blog.

Some other widgets you would like to implement for sure like 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 auto move 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.

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.

#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULFj2W-KTBqQf12WQTXAI-fnyjnEuy-58GYzjTrYaF0K9RxlOkEQN7Y95EEo_5XbnQT85WaTIPWsLf5pz3kRH6YrO78VC0WX1-t0oTSQFhkZFjoIvBl4K-gNXaf2LTZsIUcBf7CKEdw/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.

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.

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.

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.Java web hosting is also rising in popularity now, so better try searching one that suits your needs now.

Sharing all info

Wednesday, December 2, 2009

Auto Move Image Slider i.e carousel For Blogger

Special Step

No comments:

Post a Comment