About Adding Featured Posts Slider in Blogger
Featured posts are a great way to get the attention of visitors to a few specific posts on your blog. You will get to highlight some of the most interesting posts. This way, those posts will get more exposure. That means more views for those posts. Making your posts featured, means that you are telling your visitors, hey look at these interesting posts first. There is a high probability that your visitors will click on those featured posts.
In Blogger or Blogspot, you need to add featured posts code to your template or via the layout editor. Featured posts are generally displayed right below the header area including the menu of your blog. The pages which display featured posts depends upon you. Mostly, they are displayed in the index pages and label pages. They can go on top of those pages which are not posts and that would be an idle decision.
I will use one of the popular jquery sliders known as bxSlider and configure it to be used in a Blogger blog using the “Simple” Blogger template. This is a really simple jquery slider that comes for free, you can use any other slider. You can download bxSlider from here.
<link href="https://dl.dropboxusercontent.com/u/10038946/jquery.bxslider.css" rel="stylesheet" />
The above lines of code are for bxslider specific. I am using my dropbox to host .js and .css file, as you can see in the code. These lines go above the </head> part of Blogger > Template > Edit HTML.
After the js and .css file has been added and initialized in the </head> area, we will have to add the html of the slider in the part of the template where we want to display it. I am placing just two slides with images in the header area of all the pages expect a post page. The code for it is:
<b:if cond='data:blog.pageType != "item"'>
<li><a href="#"><img src="http://4.bp.blogspot.com/-yE0jxSFuib0/UrVZUaKS9GI/AAAAAAAAB1w/BEW9kn4MEbQ/s640/top-10-nice-nice.jpg" /></a></li>
<li><a href="#"><img src="http://4.bp.blogspot.com/-wHxGbxN593I/UrVY2EDATUI/AAAAAAAAB1o/CZYOuHTxZNI/s640/3D-graphics_Have_a_nice_day_006956_.jpg" /></a></li>
The above code goes right below the first
in Blogger simple template. You might have to figure out the container div or any other location where you want to place your slider. Also, note that you must add the links to the post and the images manually. If you use the exact code above, the image sizes will not match your template and the links to the images are just dummy links. This post is just a tutorial to show you that it is easy to add a slider. Once you get used to it, you can add any free jquery slider to your Blogger/Blogspot hosted blog.