Customize BuzzBoost: Change Text & Background Color

Yesterday I shared the trick of hiding the Feedburner logo from buzzboost widget and today we will learn how to change the default CSS styl...

Yesterday 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

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

      4.  Done!

 

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 :)