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.
To add featured posts in Blogger/Blogspot, you can use jquery sliders which slide images and html with ease. The code to those sliders should be configured and placed manually. The javascript for those sliders should also be placed manually in the template’s header. It might not be that easy, but once you figure it out, you can easily make posts featured and place them in your header.
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.
There are codes that you must add before the </head> and somewhere after it. The javascript and the CSS file goes before the </head> part of the blog and the normal html goes after the </head> part.
First the javascript and CSS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/10038946/jquery.bxslider.min.js"></script>
<link href="https://dl.dropboxusercontent.com/u/10038946/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
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"'> <ul class="bxslider"> <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> </ul> </b:if>
The above code goes right below the first
<div class='main-outer'>
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.
No Comments