A Cool Any Size jQuery Powered Featured Posts Slider For Blogger

Over the last few weeks i have published some cool jQuery Gadgets and Widgets for your Blogs.In this post i have taken the jQuery Easy Slider, a stylish slide show with some neat options and turned it into a kinda mini slider with the option to go large.We previously published the BloggerjQuery Anything Slider that had the option to add videos or images as slides. So i wanted to continue with a slide show that could be easily re sized from spanning the width of your blog to the miniature example i have here.

Add The Any Size jQuery Slider To Blogger

Remember Always Back Up Your Template Before You Make Changes

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code )

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

/*Slider Css*/
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{

width:320px;

height:111px;

overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;

top:15px;

}
#nextBtn{
left:320px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7uw3Re_7l7r6GGELoHvJ0ya0rhe3xTFjX_IrBN9u3dwHGoc7lBS2Sw2YgfczREqkMRfUtgv9uZ9XXxu0k9KJ1Tq2-Kbt2NcETtDniZKtoJJnu8WxDEVAcn44LlFlhRFiyxQ32EmMimNc/s1600/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkPB2SKnXsG36kk8nVvYFgASzSxARw-hTXFR1T0C9PmzrD_tVgIsPCCWQ_fBbZvJ6RJ0oCdElKE3SsZlXdFy68WJ-aISAkEwXfpy1EfMwnBiYgF3oxaMaYDXKLKaVz5U-ANnHQIVQKhvU/s1600/btn_next.gif) no-repeat 0 0;
}
/*Slider Css Info @ http://www.music2radio.blogspot.com*/

Change the size of the slider - The width and height are highlighted in yellow so you change these to your required dimensions.You will also have to change the position of the next and previous buttons which is a little more tricky.

Highlighted in red you can see i have the buttons 15px from the top, if you made the slider bigger you would increase the margin from the top.So for example if you made the slider 222px high you would make this 30px.You can try a few margins until you get it right.

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)

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

Note - If you have previously added jQuery to your template you can leave out the section in green.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

<script src='http://suyb.googlecode.com/files/easySlider1.7.js-blogger.js'/>
<script>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

That's the Css and Script added for the slider now we add the Html for the actual images.

The Html, Links And Images

This is the html for the actual slider in the demo blog, you can see the links and images highlighted.You can copy and paste this code into a Html / Javascript gadget from your design page, add your links then save and drag and drop into position.

<div id="slider"> <ul>

<li><a href="http://www.music2radio.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyX8W0scyuNDgPhuK-P2TunqdunPwj0eUAHvWNl47yq3-H7r2nfh-mkh8OvmU2ORNIK8hU3XEWzYooAiSQzXvefwUPbW3LQf2DONG8sDPmgUwHzkW52UwjTcvLYhxLr32cY5PnbcHdhM8/s320/01.jpg" width="320px" height="111px" /></a></li>

<li><a href="http://www.banglasmsworld.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUekDCnvf6Ypz7GgoNRA9gv1ktV-5ZfSBvtKl7tA_a81eiVQzKxV43_6vR5ytyH2OMtH2kxNDIA043e5_pacMBplR9VTD6Pq1p2BtiyZHKUfzeqfo9WMLTHlhX-zXM_q5rY6kgYO_J5ko/s320/02.jpg" width="320px" height="111px"/></a></li>

<li><a href="http://www.afoot-bd.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0bXEIyH0cp8IZOi6rmKW6n8kBo6V5ZFdkaxZhS5D8NkvsZdJyUWrrcBh7ucUXwRSbnkKAnsuFHabPqWUJtGg7hkMbEGQCxJYONjv0erE12XcTju_xSKUrST_n2sT5PXXJ5ljO1bhCbA/s320/03.jpg" width="320px" height="111px" /></a></li>

<li><a href="http://www.music2radio.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIMJreBR2GUxSiRVMZNGXuPuT7kovPr8-7lvXlu_fIXDg9p4MC8vD5V8aTRokWgM5MW3xVpzDnDPHzLuwKagfUzKUKtQkBVAIxMfJU9QlkHqcJewxXyR_Q2HymgQ43RhNp_sJ8zr-kY0Q/s320/04.jpg" width="320px" height="111px" /></a></li>

<li><a href="http://www.music2radio.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgP7dsQQJqRcleaoBAT2iwDZ6cZgJFuKp-57NxVAKjeiD1crZyG5vRz28DXtXGBT0Vqz2xNVW37Fcl64UGDXvmkeRB9hf7e-KW2qGjiio2BlGKrU_DhfOb70BoNDdy0CDDIy33w7cSN2w/s320/05.jpg" width="320px" height="111px" /></a></li>

</ul>
</div>

Note - The links are in yellow and the image URLs in red, change these to your links and images.

Note 1 - If you do change the size of the slider you need to change the width and height in each slide above to the same dimensions.

Add More Slides - To add more slides you simply add another link and image like this after the <ul> tag above :

<li><a href="http://www.music2radio.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgP7dsQQJqRcleaoBAT2iwDZ6cZgJFuKp-57NxVAKjeiD1crZyG5vRz28DXtXGBT0Vqz2xNVW37Fcl64UGDXvmkeRB9hf7e-KW2qGjiio2BlGKrU_DhfOb70BoNDdy0CDDIy33w7cSN2w/s320/05.jpg" width="320px" height="111px" /></a></li>

That's it for the versatile jQuery Easy Slider and this Blogger Tip.Once again thanks to Css Globe, and make sure to check out more of our jQueryGadgets .

If you face any problem in this post please let me know your problem. To inform your problem you can leave a comment below. And if you like my post please click the Facebook like button or spread this post by clicking the Twitter, Facebook etc. icons below and clicked any ad (plz). Because, it will be a great support for me.