Customize Feedburner Buzzboost Widgets With Cool Style And Icons Using CSS

Feedburner is one of the best service where users can burn their site feeds. You can easily publish your feed using the html code provided by feedburner, in which it is not having a good look because of the boring bullet list, so i think i have to share a trick on how you can give it a nice touch using CSS.
This trick applies to both feedburner recent comments and recent post widget, and i assumed that you have read how to add feedburner recent posts widget and How to add feedburner recent comments widget because we will need to add some CSS code to the default code.
See the preview below, the green mark icon appear on mouse hover.

How To Customize Feedburner Buzzboost Widget

• I assume that you have your feedburner widget code readily copied somewhere.
• Now go to your blogger dashboard
• Click on Design > Page elements > Add a Gadget (Old blogger interface)
• Click on Layout > Add a Gadget (New blogger interface)
• Choose HTML/JavaScript from the options that appear in the pop-up window
• Now paste the feedburner widget code in the content box and paste the following code above your feedburner widget code.

<style>
/* ============ Customize Feedburner Buzzboost Widget By www.realcombiz.com ============= */

div.feedburnerFeedBlock ul li {
    background: url(http://1.bp.blogspot.com/-4hofGDBucAI/UHPdE3mBtsI/AAAAAAAAB3E/9CtRu7yRsik/s1600/rb+cancel+icon.png) no-repeat 2px;
    list-style-type: none;
    margin: 0 0 5px 0px;
    padding: 5px 5px 5px 30px !important;
    border: 1px solid #dddddd;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
 }

div.feedburnerFeedBlock ul li:hover {
    background: url(http://1.bp.blogspot.com/-Vfr36DB7FcA/UHPdf9xOwcI/AAAAAAAAB3M/Dvdof8O5F1c/s1600/rb+mark+icon.gif) no-repeat 2px;
    border: 1px dashed #848484;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

div.feedburnerFeedBlock ul li a:hover {
    text-decoration: none;
}

div  #creditfooter {
    display: none;
}

/* ============ Customize Feedburner Buzzboost Widget By www.realcombiz.com ============= */

</style>

After pasting your code your final result should look like the example below.

<style>
/* ============ Customize Fedburner Buzzboost WidgetBy www.realcombiz.com ============= */

div.feedburnerFeedBlock ul li {
    background: url(http://1.bp.blogspot.com/-4hofGDBucAI/UHPdE3mBtsI/AAAAAAAAB3E/9CtRu7yRsik/s1600/rb+cancel+icon.png) no-repeat 2px;
    list-style-type: none;
    margin: 0 0 5px 0px;
    padding: 5px 5px 5px 30px !important;
    border: 1px solid #dddddd;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
 }

div.feedburnerFeedBlock ul li:hover {
    background: url(http://1.bp.blogspot.com/-Vfr36DB7FcA/UHPdf9xOwcI/AAAAAAAAB3M/Dvdof8O5F1c/s1600/rb+mark+icon.gif) no-repeat 2px;
    border: 1px dashed #848484;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

div.feedburnerFeedBlock ul li a:hover {
    text-decoration: none;
}

div  #creditfooter {
    display: none;
}

/* ============ Customize Feedburner Buzzboost Widget By www.realcombiz.com ============= */

</style>

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

• Now click Save and you are done.

Please feel free to ask, if you need any further help or use our HTML Editor to customize the widget to your own perfect taste.

Enjoyed This Post? Subscribe For More Update!

Follow @realcombiz