Feedburner
is a great way to create a simple and quick loading recent posts widget on your
homepage or in the sidebars. You can even be able to show your images if you
have chosen to apply read more break after the images.
If you are fed up using the slow recent posts widgets on your blog or do not want to show the latest posts on your homepage for some reason, there is no harm in giving a try to feedburner. It is not only easy to implement, but also customizable, and what’s good is that it even loads faster than many such services. An added advantage associated with it is that you can choose to display it anywhere, even on other sites or blogs. Let us then, learn to implement it’s code on your blog.
Activating BuzzBoost on your feed
First of all, go to your feed on feedburner. Under the publicize tab, you will find BuzzBoost service. Click on that. The opened window will display the code, the preview of your feed and the settings for your feed. Don’t worry about the dirty look of the preview; you should be concerned about the settings for your BuzzBoost. The settings section will look something similar to this.
Choose the number of posts you want to display and configure other options in the way you need in your widget. Under “item content to display” select the option “plain text” if you just need a simple and clean recent posts. However, you can opt to display the full HTML (This will take the same formatting you have applied to your post body). If you want to display the images, make sure to put your jump break after those images and set your blog feeds to “until jump break” in your blog settings. Look at the preview to ensure you have not made any mistake. Then, save and activate your BuzzBoost service.
The buzzBoost service will automatically update the code and render it on the top.
Adding the widget code to your blog
Your next task will be to style the widget and its content. To do this, you need to put your feedburner code into the division tags assigning an id as this:
<div class="feedburnerFeedBlock" id="fb">
<script
src="http://feeds.feedburner.com/what-to-do-baba/AUfw?format=sigpro"
type="text/javascript"
></script><noscript><p>Subscribe to RSS headline updates
from: <a href="http://feeds.feedburner.com/what-to-do-baba/AUfw"></a><br/>Powered
by FeedBurner</p> </noscript>
</div>
The portion highlighted is the one you got from feedburner. Add this code in the form of a HTML widget, wherever you want to show it on your blog.
Styling your recent posts widget
Using the ID that you assigned to the feedbrner block, You get plenty of options to style your recent posts widget. An example is given here,
<style>
#fb {
background: #FEFEFE; background-color: #FFFFFF;
background-image:
-moz-linear-gradient(#FFFFFF, #F9F9F9) !important;
background-image:
-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F9F9F9))
!important;
background-image:
-webkit-linear-gradient(#FFFFFF, #F9F9F9) !important;
background-image:
-o-linear-gradient(#FFFFFF, #F9F9F9) !important;
background-image:
-ms-linear-gradient(#FFFFFF, #F9F9F9) !important;
background-image:
linear-gradient(#FFFFFF, #F9F9F9) !important; list-style-type:none; border: 1px
solid #CCCCCC; border-radius: 10px; margin: 30px 0px 0px 10px; padding: 10px;}
#fb ul
{list-style-type:none;}
#fb ul li {
margin: 6px; padding: 5px; border: 1px solid #EEEEEE; border-radius: 5px;}
#fb ul li
a{ font-weight: bold; font-size: 13px; Padding-bottom: 10px;}
div #creditfooter{ display: none;}
</style>
The portion
“div #creditfooter” is for the
feedburner logo. You can either style it to show on the left, right, top or
bottom or just choose to hide as I have done here. You can play with the code
to achieve the desired output. For this, you have to go to “Add HTML/CSS”
option under the advance settings for customizing your template and paste the
code in the box there. You can even experiment with the BuzzBoost settings concurrently
to see what works for you. Click on save template when you are satisfied with
the look and feel of your recent posts widget and thank feedburner for its
excellent services.
