Feedburner buzzboost widget is used to display recent comments or recents posts of your blog. I have already shared How to add feedburner recent posts widget to blogger,which comes with a default bullet list, and this time i am sharing a simple CSS trick which you can use to decorate/customize your buzzboost widget.
How To Customize Feedburner BuzzBoost Widget With CSS
- Go to Blogger Dashboard --> Layout
- Find your Buzzboost widget and add below piece of code just above of the code which is already present.
<style>
.feedburnerFeedBlock ul li {background: #e42b2b;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}
.feedburnerFeedBlock ul li:hover {
-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:#ffffff;
text-decoration:none;
}
#creditfooter{
display:none;
}
</style>
.feedburnerFeedBlock ul li {background: #e42b2b;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}
.feedburnerFeedBlock ul li:hover {
-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:#ffffff;
text-decoration:none;
}
#creditfooter{
display:none;
}
</style>
1 comment
wow.....great widget.working perfectly on my blog:):)
www.technogist.com
Click to Add a New Comment