Customize BuzzBoost: Change Text & Background Color

customize feedburner buzzboostYesterday I shared the trick of hiding the Feedburner logo from buzzboost widget and today we will learn how to change the default CSS styles completely. You will be able to change the text link color, font type and size, border colors, remove feedburner logo, change bullets and background color. It is extremely easy tutorial and I am sure both wordpress and blogger users will find it easy. This trick was possible only after we expanded the javascript code provided by feedburner. So lets jump straight to work!

 

How To create Buzzboost Widget?

  1. Go To Feedburner > Publicize
  2. Select BuzzBoost from left panel

buzzboost settings

     3.   Uncheck all the boxes (as shown in the image below) and copy the code they provide

      4.  Done!

buzzboost settings

 

Change Font and Background Color Of BuzzBoost

The tutorial is similat to what we did yesterday. As I said the buzzboost HTML code that Feedburner provides you looks like this:

The Feedburner code for recent posts looks similar to this:

<script src="http://feeds.feedburner.com/TntByStc?format=sigpro" type="text/javascript"></script>

The code for your recent comments would look like this,

<script src="http://feeds2.feedburner.com/tntcomments?format=sigpro" type="text/javascript"></script>

Simply paste the following code just above the feedburner buzzboost code that you are using to display Feed headlines:

<style>

/*--- BuzzBoost Customization by MBT ---*/

div.feedburnerFeedBlock ul li {background: #E2F0FD;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 10px !important;
border: 1px solid #0080ff;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;

}

div.feedburnerFeedBlock ul li:hover {
 background:#ffffff;
}

div.feedburnerFeedBlock ul li a{
color:#0080ff;
text-decoration:none;
}

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


div  #creditfooter{
display:none;
}

</style>

 

 

Now make these changes:

  • To change the blue Background in active mode edit background: #E2F0FD;
  • To change the background colour when mouse cursor is hovered on text the edit background:#ffffff;
  • To change the blue border edit #0080ff
  • To change link colour edit color:#0080ff;
  • To change font family then simply add the following code just below
  • div.feedburnerFeedBlock ul li a{

font-family:arial;

You can change arial to sans-serif, verdana, georgia and any web standard font you wish to use.

I have kept it simple so that you may easily understand what styles can you apply. 

Complete Code

Once you have done all the editing then add you code to blogger by going to Design and then choose HTML/JavaScript widget and paste your code inside it. Save and you are all set! Now visit your blogs to see the new colorful look.

If you want to give it a new look and feel then please feel free to let me know for any assistance if needed. Peace pals :)

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 »

21 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. plz mustafa tell me what should i do to remove spacing between
    my content and title on static pages
    www.devilstoolshop.com/p/services.html

    ReplyDelete
  2. Bhai ...

    1 baar phir maza a Gaya :)

    Loved this One. And Thank God it will suite my template :)

    ReplyDelete
  3. bhai little problem, i want it to align left
    how to ?

    As u can see here
    http://www.skfanclub.com/2011/12/shradha-sharma-evicted-eliminated-from.html

    It is not aligned perfectly .......

    ReplyDelete
  4. very very nice and good post , was easy to play with feed burner , mustafa bhai i want to get the heading 3 style having in your post , how can i get it , i m using self hosted wordpress and i want the css to paste in my theme!

    ReplyDelete
  5. Thanks again ur site is wonderfull helps me tousend times out,good work mohamad!!
    My sites looks great now make a look maybe u can insirate me for another chance.
    blog 1: Gledaj me
    Blog2: Titlovani Filmovi

    ReplyDelete
  6. @Abdulsalam
    The spacing is appearing because you have disable widget display on static pages. The blank space replaces the widgets and unfortunately there is no way to remove it.


    @haider


    Bro replace this code
    div.feedburnerFeedBlock ul li {background: #E2F0FD;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 10px !important;
    border: 1px solid #0080ff;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;

    }

    with this,

    div.feedburnerFeedBlock ul li {background: #E2F0FD;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 10px !important;
    border: 1px solid #0080ff;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    float:left
    }

    @FAIZ

    Buddy in your stylesheet add this css code

    .h3 {
    color:#0080ff;
    border-top:1px dotted #0080ff;
    border-bottom:1px dotted #0080ff;
    padding:3px;
    }


    Now when you create a post in yoru wordpress editor simply add h3 tags in Editor mode like this:
    &lt;h3&gt;Your Title....&lt;/h3&gt;

    Simple! :)

    ReplyDelete
  7. @Mohammad Mustafa Ahmedzai

    Bhai did not worked :)
    but i modified it in ma style :P

    ReplyDelete
  8. Mohammad Vai,
    Very Good CSS trick Form you.
    Now Please Spice up 'Blogger Labels' Widget. :)

    ReplyDelete
  9. I want to space between every post title.
    like as:
    1st title

    2nd title

    3rd title

    How can I do this?

    ReplyDelete
  10. M,
    Do you know how to format buzzboost to show the rss feed horizontally? So instead of this:
    ~rss title 1
    rss body
    ~rss title 2
    rss body 2
    it would be like this
    ~Rss 1 ~Rss 2
    rss body rss body 2?

    Thank you!

    ReplyDelete
  11. I'm getting 3 buttons in the end of each post [ add a comment ] [ add to Facebook} [ Tweet this]
    is there anyway to get rid of them --- I've tried everything but nothing - I'm going mad :|

    Thank you
    klicky

    ReplyDelete
  12. Great buddy! Its a lovely and beautiful post. +1 for this.

    Visit My Blog (Bangla)

    ReplyDelete
  13. Assalam vai, how to display this feeds horizontally like a news sticker?

    ReplyDelete
  14. This matter is downcast to earth, hats off buds out there.
    Web Development

    ReplyDelete
  15. great post sir , really helped me ,respect on......

    ReplyDelete
  16. Thanks for the post.
    Do you know how we can add post thumbnails to the feed also?
    Thanks

    ReplyDelete
  17. Dear Mohammed Bro, I have seen a changing feed Headline in a blog. http://maskolis.blogspot.in/(on the head portion of this blog).Can you tell me how i can implement this headline in my blog? Is there any trick in your blog plz reply.

    ReplyDelete
  18. Shukriya, Bhai.. this is very helpful for us.

    ReplyDelete
  19. Wow, this just saved me so much time trying to figure out styling for my embedded blog. Thank you so much!

    ReplyDelete