Almost every blogger now is using FeedBurner to publish their feed. The most obvious benefits of using FeedBurner are the statistics and the subscriber count, but there are plenty of other free options that you can use or customize to enhance your blog. One of these options is called BuzzBoost, and essentially it republishes your feed as HTML so that it can be used anywhere.
One of the most productive ways to use BuzzBoost is to publish links to your blog posts from somewhere outside of your blog.If you’ve looked around the portfolios of other designers you have probably seen the same thing in action. A growing number of designers are including a blog as a part of their portfolio sites, so it makes sense to promote the most recent posts from the home page. In this tutorial I’ll quickly take you through the process of getting the links from your feed displayed on a static HTML page.
Step 1 – Login to FeedBurner
If you already have a FeedBurner account set up, login and click on your feed.
Step 2 – Activate BuzzBoost
Click on the “Publicize” tab, and then click on “BuzzBoost” in the list at the left side of the screen (see image below). At this point BuzzBoost will give you a number of different options. You can choose how many items (posts) you want to be displayed, if you want the links to open in the same window or a new window, displaying the feed title, displaying the date, and several others. One of the options is “display item content.” If this box is not checked all that will be displayed is the title of the blog post (which is what I will be using), and if that box is checked you can choose to display the entire post or a brief excerpt in plain text or HTML. For my purposes I have chosen to show 5 posts, have them open in the same window, and everything is left unchecked. Once you have everything set the way you want it, click “Activate” at the bottom of the page (you can easily change these settings later). If you’ve already activated BuzzBoost you’ll see the option to save instead of activate.
Step 3 – Copy and Paste the Code
Once you choose your settings and activate BuzzBoost you will be provided with the piece of code. Copy the code provided by FeedBurner and paste it into your page wherever you want it to be displayed.
Step 4 – Customize
Now that you have pasted the code into your page, BuzzBoost should be completely functional. Most likely though, you’ll want to make some customizations to the appearance of the output to fit with the rest of your page.Earlier I said that I left all of the boxes unchecked in the BuzzBoost settings, including the option to display the feed title. Instead of displaying the feed title I simply inserted a link directly above the BuzzBoost code that says “From Our Blog”, which serves as the title. You can do it either way, use BuzzBoost to include the title, or simply enter it yourself.
FeedBurner uses divs and classes for everything produced by BuzzBoost, so it’s pretty simple to style it however you like. The CSS code that I am using is shown below.
margin-left:0;
padding-left:0;
list-style-type: none;
}
.feedburnerFeedBlock ul li {
padding: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E0E0E0;
}
.feedburnerFeedBlock ul li span.headline a {
color: #990000;
text-decoration: none;
display: block;
}
.feedburnerFeedBlock ul li span.headline a:hover {
color: #535353;
}
#creditfooter {
display: none;
}
And this is what the finished product looks like.
Original article here
