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 Unknown | Wednesday, October 10, 2012 | | 25 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW5x97qDzwEQbemhHRN4Hxcc_vgctZJRoiCrdjXndWiyGlC1U04yRjCGfD0gn-gyTPz2dU55IO0H6aa8YjpTYx7zhibu_bU9ZMsUB0PeBnWC9UJqwdU2s5QrSzdO9J2mr_nH1xSzPkPJVo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTH-4rn2G25M6p6A5zK83t6n6gb33OhpbZqlo_dH0Qn_KHUaI-129X41o2QBGHmjVfv1oez34p0SwWmlgkECiEtSOt-Mlbw5SSf4VBYLPPGo0GInIYMOXRi1XC135XszERuo2GxayKOqOc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW5x97qDzwEQbemhHRN4Hxcc_vgctZJRoiCrdjXndWiyGlC1U04yRjCGfD0gn-gyTPz2dU55IO0H6aa8YjpTYx7zhibu_bU9ZMsUB0PeBnWC9UJqwdU2s5QrSzdO9J2mr_nH1xSzPkPJVo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTH-4rn2G25M6p6A5zK83t6n6gb33OhpbZqlo_dH0Qn_KHUaI-129X41o2QBGHmjVfv1oez34p0SwWmlgkECiEtSOt-Mlbw5SSf4VBYLPPGo0GInIYMOXRi1XC135XszERuo2GxayKOqOc/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!".

25 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

  3. Hey Thanks a lot for sharing these great ideas. I want to wish you and all other readers of this blog a very happy new year in advance,
    and you can check out Some Great Happy New Year 2017 And 25 Ways to Say I Love You Love Quotes For Him will help you express your special feelings to him in short, but meaningful,
    And collection of Cute Love Quotes Hope you have a great beginning to the new year.
    Krkr Games is one of the largest flash gaming sites famous in the Arab world, it offers an exclusive group like Girls games and Play 250
    Games a new car games can be played without a load .
    Happy New Year 2017 Images
    In this post i am going to give you some And collection of Merry Christmas 2017 Hope you have a great beginning to the new year.
    HD Images which you can use for free to wish your dear, friends, lovers etc.

    ReplyDelete
  4. thats great
    https://alltechninja.wordpress.com/2017/01/20/review-best-headphone-hifiman-he400s/

    ReplyDelete
  5. i love it this post because i learn graphics from the this post..
    download google play paid Android apps for free

    ReplyDelete
  6. That is very useful info. But is feed burners works on this day? Bigg Boss 11 Auditions

    ReplyDelete

Recent Posts

Let's Connect

Site Links

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