Image Slider or Content Slider In Blogger Blog

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to jQuery plugin file, set the content up and style it with css. Thanks to Alen Grakalic. See the live demo here.(demo will not work because i had used geocities for jQuery hosting, try yourself, follow these steps in your blogger template,it should work)



Step Needs to Add Easy Image Slider or Content Slider

Step 1. Login to Blogger-Dashboard

Step 2. Go to Layout >> Edit HTML

Step 3. Copy and Paste the following CSS code right above ]]></b:skin> tag

?

10 11 12 13 14 15 16 17 18 19 20 21

#slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider, #slider li{ width:500px; height:200px; overflow:hidden; } span#prevBtn{} span#nextBtn{}

Change Width and height according to your template design.

Step 4. Now Download easySlider.zip or here and link to these files as shown below and place these line of code right above </body>

?

10 11

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider.packed.js"></script>

Use google page creator or your own server to host jQuery plugins. I used Geocities. Geocities is not available now so the demo that i hv specified will not work. Try yourself. It should work.

Step 5. Copy and Paste following line of code right above </body> tag to start slider action

For Horizontal Slider

?

10 11 12 13 14

<script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script>

or

?

10 11 12 13 14 15 16 17 18

<script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText:'Previous', nextText:'Next', orientation:'horizontal' }); }); </script>

For Vertical Slider

?

10 11 12 13 14 15 16 17 18

<script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText:'UP', nextText:'DOWN', orientation:'vertical' }); }); </script>

You can change UP, DOWN, Previous and Next with your words.

Step 6. Now go to Layout and click on 'Add a Page Element' or 'Add a Gadget' , Popup window will open, in that select HTML/Javascript. Now place the following code with your content in the opened HTML/Javascript window and save changes.

?

10 11 12 13 14 15 16 17 18

<div id="slider"> <ul>   <li>content here...</li> <li>content here...</li> <li>content here...</li> ... </ul> </div>

Content may be image or text.