Stylish Featured Content Slider For Blogger

It's been few days since I modified my template. Many people loved the new look while few highlighted mistakes which I'm rectifying from time to time. I found that many people loved the smooth sliding featured content on home page - recently removed for increasing the page speed. Want a slider running on your blog? Then, let's get started...

A LITTLE MORE ABOUT THE SLIDER

The slider works on jQuery and the styles are incorporated with a little CSS. The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left. Although I have modified the slider to my recommendations, the credit actually goes to "css-tricks.com".

LIVE DEMO

WHY THIS SLIDER???

The basic reason behind choosing this slider rather than the ones available on various other sites is that it occupies the least space on our blog and can be the JavaScript files can be defined internally on blogs which indirectly means that your site will load faster even with the scripts installed - no HTTP requests from the JavaScript file hosting sites. Secondly, it is more feasible and runs perfectly the same on all the web browsers. Finally, it is very easy to understand and customize the coding.

GET THIS INSTALLED ON YOUR BLOG
Let us split the customization into two parts. The first one deals with the CSS and JavaScript installation while the second part deals with the HTML coding. Now, let's get started with the first set of installation procedures.
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

</head>

2. Download the following text document - JAVASCRIPT FOR THE SLIDER and paste the code present in it just above the line mentioned in step 1.
Note: The code which you pasted now, is the internally defined JavaScript that makes the slider work. The only possible customization here could be the timer which is by default set to 4000 milliseconds. You may vary it by changing the number in the following piece of code.

var delayLength = 4000;

3. Next, search for the following piece of code.

]]></b:skin>

4. Paste the following piece of code just above the line mentioned in step 3.

#slider{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlbVGAjBM8SP7wQE3UzybqqKQeDGA1-Mo_6fvaQDZT4hYwnPJXMr1V3QV2iNgPCDYMKE3bmoYyq1xtZdaSRUbG7eRG9M_GArN5ctWCbomgX12st68LTCLiruBMMOLsG74OSzq4vMnh0mM/s800/slider-bg-new-1.jpg) no-repeat; height:180px; overflow:hidden; margin-top:-3px; margin-bottom:7px; position:relative; width:600px; border:1px solid #ddd}
#mover{width:2880px; position:relative}
.slide{padding:40px 30px; width:600px; float:left; position:relative}
.slide h1{color:#444; font-size:22px; font-family:Georgia,"Times New Roman",Times,serif; line-height:23px; font-style:bold; font-weight:normal; margin-top:-25px; margin-bottom:-8px; color:#ac0000}
.slide p{color:#555; font-family:Georgia,"Times New Roman",Times,serif; font-size:15px; line-height:20px; width:370px}
.slide img{position:absolute; top:20px; left:420px}
#slider-stopper{position:absolute; top:1px; right:20px; background:#ac0000; color:white; padding:3px 8px; font-size:10px; text-transform:uppercase; z-index:1000}

Note: The above mentioned code represents the CSS part of the slider. You may customize it the way you want. Various possible customizations include changing the width of the slider or the background picture of the slider. The font style can be varied to match the fonts present in your blog. I feel these are pretty self-explanatory.
5. I recommend you to save your template temporarily.

HTML PART OF THE CODING
1. Search for the following piece of code in your blogger template. Use CTRL+F to fasten your search results.

<b:section class='main' id='main' showaddelement='no'>

2. Paste the following piece of code just above the line mentioned in step 1.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='slider' style='margin-left:5px;'>
        <div id='mover'>
              <div class='slide' id='slide-1'>
                        <h1>Review On Camera</h1>
                      <div style='text-align: justify;'><span style='font-family:verdana; color: rgb(0, 0, 0);'><p>This Digital Camera comes with 12.1 Mp lens and great performance with tonnes of features. One of my friends purchased this camera and got it delivered few weeks before, after having a thorough analysis read in many websites about digital camera. First of all, lets talk about the package contents which includes...</p></span></div>
                        <a href='http://www.newbloggingtipz.com'><img alt='learn more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifyy-KuQJG7NSOlWFKe2EikvKNJF59Bw7KfUe2MI90CLkh6VwFvxOaY_2iBaNUrTtF-XgaK9it2-Z8dD2MuqGPMVhrncbT7Vq6ylTk3Wer7csgYNIfjYEP7ArixEfxpLLsmqksFkiLpdg/s800/read-more.png'/></a>
                </div>
                <div class='slide' id='slide-1'>
                        <h1>Review On Blackberry Storm</h1>
                       <div style='text-align: justify;'><span style='font-family:verdana; color: rgb(0, 0, 0);'> <p>The new Vodafone’s BlackBerry Storm has stormed the market and has attracted the whole world. BlackBerry’s parent company says that this phone is something that will really compete with an iPhone. So, here goes an elaborate review about the phone. The Storm has a clickable touch screen, which is really...</p></span></div>
                        <a href='http://www.newbloggingtipz.com'><img alt='learn more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifyy-KuQJG7NSOlWFKe2EikvKNJF59Bw7KfUe2MI90CLkh6VwFvxOaY_2iBaNUrTtF-XgaK9it2-Z8dD2MuqGPMVhrncbT7Vq6ylTk3Wer7csgYNIfjYEP7ArixEfxpLLsmqksFkiLpdg/s800/read-more.png'/></a>
                </div>
        </div>
</div>
</b:if>

3. Now, you need to vary the content and the titles along with the link to which they should point to. To do so, you need to vary the text highlighted in green. Just copy a snippet from your blog post or write an attractive one that will drive the readers to click the read more button.
4. Next, to change the title of your post, you need to change the text highlighted in orange. Just erase the ones highlighted in orange and write the title of your posts. The last customization would be the links to which they should point to. To get this done, replace the link highlighted in pink with the URL of your posts. That's it!!!
5. To add more posts on your featured content widget, just add the following piece of code before the last two div tags and repeat the steps from 1 to 5 mentioned above.

                 <div class='slide' id='slide-1'>
                        <h1>TITLE OF YOUR POST</h1>
                       <div style='text-align: justify;'><span style='font-family:verdana; color: rgb(0, 0, 0);'> <p>WRITE YOUR CONTENT HERE</p></span></div>
                        <a href='URL TO YOUR POST'><img alt='learn more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifyy-KuQJG7NSOlWFKe2EikvKNJF59Bw7KfUe2MI90CLkh6VwFvxOaY_2iBaNUrTtF-XgaK9it2-Z8dD2MuqGPMVhrncbT7Vq6ylTk3Wer7csgYNIfjYEP7ArixEfxpLLsmqksFkiLpdg/s800/read-more.png'/></a>
                </div>

6. Now, save your template and view your result. In fact, I recommend you to preview your results before you save them.

Note: The featured content will appear only on the homepage of your site. If you wish to have it on all your pages, then remove the first & the last line in the HTML part of your coding mentioned at step 2.

I hope I made this tutorial look simple and I assume that you enjoyed this post as well. If you feel it's difficult or face any problems during the installation, then you can always reach me via email and get your slider fixed. Please share your opinions about the posts via comments. See you soon in another interesting article!!!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

hackr said on June 10, 2011 at 11:25 AM :

Use JQuery 1.5.1 , it has less errors , also I have a better slider like this that uses the latest version of jquery at http://hacktohell.blogspot.com

Amit said on June 10, 2011 at 2:44 PM :

Good one, even I had liked the slider which you had. Nice to see such a slider not using jquery. Jquery always has its magic in such sliders.

Mukund said on June 10, 2011 at 4:02 PM :

@hackr: there are a lot of sliders which are available on the net. The one you use on your template will take a lot of time to load, just the pictures alone will take a lot of time. So, I prefer this one - the lightest one!

Mukund said on June 10, 2011 at 4:03 PM :

@Amit: Yup! Thanks for the comment buddy! It does use a internally defined Jquery script but it loads very quick when compared to the other sliders!!!

Kene Ohiaeri said on June 12, 2011 at 1:40 AM :

I have been looking fos something like this all over the net. Thanks man. But there is a problem, mine doesnt slide. Could you help me please....

Mukund said on June 12, 2011 at 10:26 AM :

@Kene Ohiaeri: It should slide provided you installed the JavaScript properly. Just contact me via email and I will help you out with the scripts!

N.One said on June 16, 2011 at 1:35 PM :

how to creat Featured Content Slider for the latest post

Mukund said on June 16, 2011 at 3:21 PM :

@N.One: You need to manually add any number of posts with the div tags mentioned in step 5. If you want the latest one, then paste the snippet of the latest of the one with its URL. I hope you understand. If not, ping me via gtalk. I will let you know what to do!

custom logo design said on June 18, 2011 at 4:27 PM :

Hi Mukund
Your article Stylish Featured Content Slider For Blogger.I really like your style of blogging. Thanks and keep up the good work.

Mukund said on June 18, 2011 at 5:27 PM :

@custom logo design: Well, thanks for the comment! Hope you enjoy the upcoming articles on my blog too!

Aditya Samitinjay said on July 16, 2011 at 11:37 PM :

Hey Mukund,

I like this plugin, but there are a few glitches when I try to implement it on my blog <a href="http://likelitelife.blogspot.com/>Like Lite Life - Solutions and Tips</a>

Firstly, Only one post is being displayed and secondly it isn't sliding to the next post. Any help?

Thanks in Advance!

Mukund said on July 17, 2011 at 12:02 AM :

@Aditya Samitinjay: Why not! we're there to help you! I guess the reason should be with the jQuery file. Just ping me via gtalk and I'll sort the issue for you! Else email me your template stating the problem clearly. I'll fix it up!

HackToHell said on October 5, 2011 at 5:28 PM :

@Mukund

Yep :)

Muhammad Fahmi said on October 22, 2011 at 8:15 AM :

thx it works

mAn ĐiezEl said on November 22, 2011 at 7:23 AM :

thnks .pos full

Sreedev Sharma said on February 14, 2012 at 11:08 PM :

Hello Sir, I used this code in my blog, it showed but its not moving...its only showing one slide...!!

My blog: facebooktimelinebeta.blogspot.com

Garden Seed said on March 21, 2012 at 7:58 PM :

These are really great tips. Thanks for sharing them with us.

Garden Seed said on March 26, 2012 at 4:40 PM :

Interesting information here on your website. Keep up the good work and continue providing us more quality information from time to time.

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT