Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Customize Feedburner Buzzboost Widgets With Cool Style And Icons Using CSS

by Durodola Ridwan | Wednesday, October 10, 2012 | | 15 Comments

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.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

15 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. This is really cool. I want to enhance my custom web page design skills but I rely heavily on templates. This helps in training myself make web designs hard coded and thus making me not to just rely on templates. I do have designs that I can think of but I don't have enough skill to translate them in codes.

    ReplyDelete
    Replies
    1. Is that a blogger hosted site? If there is any difficulty you are facing, feel free to let me know, and i will find time to answer your queries asap. Drop your queries at contact@realcombiz.com

      Delete
  2. how to change background image of visited links ???

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger