Easiest jQuery Featured Content Slider for Blogger Blogs

Featured Content Slider makes a slideshow of your content on your website/blog, so users can manually select a content to see or have them rotated automatically.

You can show off best content of your blog in a nice sliding style that catches visitors’ attention and it saves a lot of space too.

I searched for many featured content sliders but almost all of them have installation instructions explained for general websites (with static pages) which bloggers find a little difficult to install. Since I’m on blogger I searched for blogger-optimized content slider but sliders I found were either very simple in looks or with poorly explained installation instructions.

I liked Anything Slider by CSS-Tricks. It’s a beautiful content slider supports both images and text with pagination and start/stop buttons.

You can view the DEMO here before you proceed for installation.

I did some changes to make it blogger-friendly. Just follow the instructions carefully. It is highly recommended to download a backup of your template before you make any changes to your blog.

Installing some CSS and JavaScripts in Template

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(https://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(https://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(https://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 the gadget and preview your Blog.

Customizations

– (In code of Step 2) numbers in red are width and height of the main slider while the numbers in green are width and height of inner wrapper which holds the content.

– (In code of Step 3) number in red is the time a slide stays while the number in green is the animation/sliding time between the slides.

– (In code of Step 3) Links given in blue are links to 3 JavaScripts that this slider requires. If you have your own hosting server you may download the scripts and upload them on your server for speedy loading.

You might be doing some trial and error before finally setting it up according to width and space of your blog’s design. Just change these numbers according to your needs.

View slider’s DEMO.

I’ll be sharing another beautiful content slider soon that I’ve already customized for blogger users. So I’d suggest you to subscribe to feeds or email alerts to get the update about the new content slider.

UPDATE:New simpler version of jQuery Featured Content Slider published here.