How To Add Easiest jQuery Featured Content Slider for Blogger Blogspot

Adding some CSS and JavaScripts in Template 

Live DEMO.

1) Go to your Layout > Edit HTML and click “Download full template” to download template’s backup.
2) In your template, find ]]></b:skin> and just ABOVE it, paste this code:

<!--Anything Slider CSS Starts -->
/*
anythingSlider v1.0
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/
{ margin: 0; padding: 0; }
.anythingSlider { width: 740px; height: 260px; position: relative; margin: 0 -20px 0px; }
.anythingSlider .wrapper { width: 660px; overflow: auto; height: 241px; margin: 0 40px; position: absolute; }
.anythingSlider .wrapper ul { width: 99999px; list-style: none; position: absolute; top: 0; left: 0; background: #f4f4f4; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; }
.anythingSlider ul li { float: left; padding: 10px 10px ; height: 317px; width: 660px; margin: 0; }
.anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(http://3.bp.blogspot.com/_L3S3cG5x4ys/SyLAydSxA7I/AAAAAAAABK8/Or2L74HqhdM/s400/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 35px; cursor: pointer; }
.anythingSlider .forward { background-position: 0 0; right: -20px; }
.anythingSlider .back { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover { background-position: 0 -200px; }
.anythingSlider .back:hover { background-position: -67px -200px; }
#thumbNav { margin: 0 40px; width: 660px; border-top: 3px solid #e0a213; position: relative; top: 240px; text-align: center; }
#thumbNav a { color: black; font: 11px/18px Trebuchet MS, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(http://1.bp.blogspot.com/_L3S3cG5x4ys/SyLAx9khT3I/AAAAAAAABK0/GeKJRxZIkgM/s400/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#thumbNav a:hover { background-image: none; }
#thumbNav a.cur { background: #e0a213; }
#start-stop { background: green; background-image: url(http://1.bp.blogspot.com/_L3S3cG5x4ys/SyLAx9khT3I/AAAAAAAABK0/GeKJRxZIkgM/s400/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 242px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing { background-color: red; }
#start-stop:hover { background-image: none; }
<!-- Anything Slider CSS Ends -->


3) Now find </head>, and just ABOVE it, paste these lines:



<script type='text/javascript'>
function formatText(index, panel) {
return index &quot;&quot;;
}
$(function () {
$(&#39;.anythingSlider&#39;).anythingSlider({
easing: &quot;easeInOutExpo&quot;, // Anything other than &quot;linear&quot; or &quot;swing&quot; requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: &quot;Auto-Slide&quot;, // Start text
stopText: &quot;Stop&quot;, // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
$(&quot;#slide-jump&quot;).click(function(){
$(&#39;.anythingSlider&#39;).anythingSlider(6);
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script src='http://sites.google.com/site/tipsotrickscom/home/tests/jquery.easing.1.2.js' type='text/javascript'/>
<script charset='utf-8' src='http://sites.google.com/site/tipsotrickscom/home/tests/jquery.anythingslider.js' type='text/javascript'/>

Adding the Widget and it’s contents

4) This part is the easiest. Go to Layout > Page Elements and click “Add a Gadget” wherever you want to put the slider. (usually just below navigation menu).
5) Choose “HTML/JavaScript” from the gadgets list and paste the code below in the content area.

<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>Slide # 1 Content here...</li>
<li>Slide # 2 Content here...</li>
<li>Slide # 3 Content here...</li>
</ul>
</div>
</div>


All your content goes in between those <li> and </li> tags.
You can add many <li> </li> tags as you want.
6) Save it the gadget and preview your Blog.

It Easy.Try It Back.View Live DEMO.