Feedburner Buzzboost Widget lets you display headlines of your recent posts or recent comments using your RSS Feed. It republishes your Feed as HTML. By default the widget includes a credit at footer that says "Headlines By Feedburner" It was not that difficult to find a way for it after I expanded the JavaScript code and this code provided access to all CSS IDs and classes. Our next post would be on how to completely customize the appearance of buzzboost by editing the default styles. We will learn also in detail on how to change the bullet style, font size and colors etc. Lets now remove the logo "Headlines by Feedburner"
Before:
After:
Remove Feedburner Logo
The Feedburner code for recent posts looks similar like this:
<script src="http://feeds.feedburner.com/TntByStc?format=sigpro" type="text/javascript"></script>
The code for your recent comments look like this,
<script src="http://feeds2.feedburner.com/tntcomments?format=sigpro" type="text/javascript"></script>
You just need to add the following code above the code of either Recent posts or Recent comments (you don't need to add it twice),
<style>
/* Removes Buzzboost Logo (MBT) */
div #creditfooter{
display: none;
}</style>
The Resulting code should look something like this:
<style>
/* Removes Buzzboost Logo (MBT) */
div #creditfooter{
display: none;
}</style>
<script src="http://feeds.feedburner.com/TntByStc?format=sigpro" type="text/javascript"></script>
Save your widget and visit your blogs to see it working just fine. Have Fun! :)
How it works?
For Web Designers:
The javascript that loads the widget looks contains the CSS classes and IDs for everything that appears inside Buzzboost. The JavaScript code provided by feedburner looks like the following:
And upon expansion it gives you the access to all data requeired to completely customize the look of the widget:
document.write("\x3cdiv class\x3d\x22feedburnerFeedBlock\x22 id\x3d\x22BurnThisRSS29e7afepqu1thh06o0bqpv4csjg\x22\x3e"); document.write("\x3cul\x3e"); document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://adsenseforfeeds.blogspot.com/2010/10/your-stats-right-away.html\x22 target\x3d\x22_blank\x22 \x3eYour stats, right away\x3c/a\x3e\x3c/span\x3e"); document.write("\x3cp class\x3d\x22date\x22\x3e10/25/2010\x3c/p\x3e"); document.write("\x3c/li\x3e"); document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://adsenseforfeeds.blogspot.com/2010/04/enabling-social-sharing-with-feedflare.html\x22 target\x3d\x22_blank\x22 \x3eEnabling social sharing with FeedFlare\x3c/a\x3e\x3c/span\x3e"); document.write("\x3cp class\x3d\x22date\x22\x3e4/23/2010\x3c/p\x3e"); document.write("\x3c/li\x3e"); document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://adsenseforfeeds.blogspot.com/2009/12/socializing-your-feed-with-twitter.html\x22 target\x3d\x22_blank\x22 \x3eSocializing your feed with Twitter\x3c/a\x3e\x3c/span\x3e"); document.write("\x3cp class\x3d\x22date\x22\x3e12/14/2009\x3c/p\x3e"); document.write("\x3c/li\x3e"); document.write("\x3c/ul\x3e"); document.write(" \x3cdiv id\x3d\x22creditfooter\x22\x3e\x3ca href\x3d\x22http://www.feedburner.com\x22 target\x3d\x22_blank\x22\x3e\x3cimg src\x3d\x22http://www.feedburner.com/fb/images/buzzboost-pwrd.gif\x22 alt\x3d\x22Headlines by FeedBurner\x22 style\x3d\x22border:0\x22/\x3e\x3c/a\x3e\x3c/div\x3e"); document.write("\x3c/div\x3e");
The credit footer ID is responsible for the appearance of the logo image in gif format which has the following URL: http://www.feedburner.com/fb/images/buzzboost-pwrd.gif
I simple added the display none property to completely deactivate this div section and this worked well.
Stay tuned for some amazing new custom styling tricks that will turn Feedburner into a much more professional looking plugin.
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
very informative bro
ReplyDeleteNice article , and plz answer my question
ReplyDeleteI want to place one "twitter follow" button and "facebook like button" in monop template in the right side on adbar and can you help me in making header image for my blog.Thanx...
http://coolhacking-tricks.blogspot.com/
Maza A Agaya :P
ReplyDelete@ndark
ReplyDeleteSince most of you have requested this tutorial then I guess a post would be helpful. Will publish it in a while ndark.
I humbly apologise for the header logo as time is one thing that I badly lacking
@Haider
Oh good. :p
thanks .....looks nice on my blog...
ReplyDeleteYes, but how do you remove "Add a comment, Add to Facebook! and Tweet it! from the bottom?
ReplyDeletehttp://www.caretemps.com/new/index.php