Customize Feedburner BuzzBoost Widget With CSS



Feedburner buzzboost widget is a widget which used to display recent comments and recents posts of your blog.We have already shared How to add feedburner recent posts widget to blogger,which comes with a default boring bullet list,and this time we are sharing a simple CSS trick for this widget which you can use to decorate/customize your buzzboost widget.I have added a hover effect to this widget,on normal it shows a small cancel icon as a bullet and when any user mouse hovers on it it shows small correct icon as a bullet.This hover effect increases beauty of widget and also attracts your readers.You add You can also use this trick to customize feedburner recent comments widget.Now lets see how to apply this trick to your buzzboost widget.








Below I am showing both versions of this widget i.e. befor (default widget) and after (after applying this trick)

Default Widget




After Applying This Trick




Now you have understood that what is the actual difference between actual (default) widget and this widget (after using this trick) Now lets see how to apply this trick?

How To Customize Feedburner BuzzBoost Widget With CSS?


  1. Go to Blogger Dashboard > Layout
  2. Find your Buzzboost widget and click on Edit Icon (Small Wrench Icon)
  3. Add below piece of code just above of the code which is already present.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
/* ============ Feedburner Buzzboost Widget Customization Style By helperblogger.com ============= */
 
div.feedburnerFeedBlock ul li {
    background: url(http://1.bp.blogspot.com/-UT0l7NGBaEY/T87yrmU6W-I/AAAAAAAAB5s/YetU-iBwFrE/s1600/helperblogger.com-cancle.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/-6OWHHO2Ca6Y/T87ysdmvM1I/AAAAAAAAB5w/o-DgtdtKQ0M/s1600/helperblogger.com-correct.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;
}
 
/* ============ Feedburner Buzzboost Widget Customization Style By helperblogger.com ============= */
 
</style>

Finally save your gadget and you are done.

Want To Customize It Yourself


You can also customize this widget yourself.To customize just follow below steps,

  1. First go to HTML Editor
  2. Paste below whole code in it
  3. Hit Preview button
  4. Customize the gadget by changing the CSS values as you wish.
  5. When you done all customizations copy the code from <style> to till </style> tag
  6. Now go to Blogger Dashboard > Layout
  7. Find your Buzzboost widget and click on Edit Icon (Small Wrench Icon)
  8. Add the copied code just above of the code which is already present.
  9. Finally save your gadget and you are done.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
/* ============ Feedburner Buzzboost Widget Customization Style By helperblogger.com ============= */
 
div.feedburnerFeedBlock ul li {
    background: url(http://1.bp.blogspot.com/-UT0l7NGBaEY/T87yrmU6W-I/AAAAAAAAB5s/YetU-iBwFrE/s1600/helperblogger.com-cancle.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/-6OWHHO2Ca6Y/T87ysdmvM1I/AAAAAAAAB5w/o-DgtdtKQ0M/s1600/helperblogger.com-correct.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;
}
 
/* ============ Feedburner Buzzboost Widget Customization Style By helperblogger.com ============= */
 
</style>
 
<script src="http://feeds.feedburner.com/HBlogger?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/HBlogger"></a><br/>Powered by FeedBurner</p> </noscript>
 
 

be vigilant and careful while doin html / javascript duties
coz it may lead to info leaks or slowing down or unworkability.
also check out google blogger terms and conditions.

Labels:

Latest posts.