Thursday, November 15, 2012

Costomize Feedburner Buzzboost Widget











We use Feedburner buzzboost widget to display recent posts of our blog. Ordinary buzzboost widget comes with default bullet list. In this post I am going to show you how to customize your buzzboost widget.
DEMO

How to customize Buzzboost widget?

  • Go to Blogger Dashboard ---> Layout
  • Find your Feedburner Buzzboost widget.
  • Copy the bellow piece of code and past it above your buzzboost HTML code.
Code;
<style>
.feedburnerFeedBlock ul li {background: #C0C0C0;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
-webkit-transition:all 0.1s ease;-moz-transition:all 0.1s ease;-o-transition:all 0.1s ease;border: 0 none !important;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-bottomleft:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
}
.feedburnerFeedBlock ul li:hover {background: #808080;
 -webkit-border-top-left-radius:27px;-webkit-border-bottom-right-radius:27px;-moz-border-radius-topleft:27px;-moz-border-radius-bottomright:27px;border-top-left-radius:27px;border-bottom-right-radius:27px;
}
.feedburnerFeedBlock ul li a{
color:#000000;
text-decoration:none;
}
.feedburnerFeedBlock ul li a:hover{
color:#fff;
text-decoration:none;
}
#creditfooter{
display:none;
}
</style>

That's it. Hope you like this post. If any questions, feel free to ask.

0 comments:

Post a Comment