Thursday 31 January 2013

Display Your Feed On A HTML Page

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

About every blogger now is using feedburner to publish their feed. By using feedburner, you can get realtime stats and subscriber count. You can even use a custom domain with feedburner. You can display your feedburner feed on Blogger with a simple feed widget but you can't use that widget on your html site. Don't worry, you can still display your feed on a static html or your website by using BuzzBoost. Here we go:

Go To FeedBurner > Click on your feed:


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. Choose your preference and click on "Active" button. If you’ve already activated BuzzBoost you’ll see the option to save instead of activate.


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. You're completely free to use my feeds on your blog:

<script src="http://feeds.feedburner.com/WidgetCraft?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/WidgetCraft"></a><br/>Powered by FeedBurner</p> </noscript>

It's done, you can also style this code by using some css:

.feedTitle {
background: none repeat scroll 0% 0% whitesmoke;
padding: 10px;
text-align: center;
font-size: 20px;
font-weight: bold;
border: 1px solid rgb(81, 104, 59);
}
.feedburnerFeedBlock ul {
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;
}
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.