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?
- Go to Blogger Dashboard > Layout
- Find your Buzzboost widget and click on Edit Icon (Small Wrench Icon)
- Add below piece of code just above of the code which is already present.
<style> /* ============ Feedburner Buzzboost Widget Customization Style By helperblogger.com ============= */ div.feedburnerFeedBlock ul li { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yEJKIXLDb8bDAsFWF8dGwK_yjx5BZB0qkhfmPQepWNkMBBPutUOrGcAMv7hCJ1k3KWoUHc7wNfc0nFPYGM9aNWoqKtggRObql4vNt3WOUtUb6dYdzlYUyTDG5vZQCHTxBs-V79qwgZE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdtUSvuPqoMmaFN67ghDtCQ_etHlvCP6zXuWi4HyF_PRMNh7pqDzZ6VSw1S8eblOc75y_WdSlR7lhGbtiGxtY1nyvs3YeiqyhbVs1gRbWzYSQz8i0Yi8XH6DjO9k-Jb9n-LliX1iJHtpA/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,
- First go to HTML Editor
- Paste below whole code in it
- Hit Preview button
- Customize the gadget by changing the CSS values as you wish.
- When you done all customizations copy the code from <style> to till </style> tag
- Now go to Blogger Dashboard > Layout
- Find your Buzzboost widget and click on Edit Icon (Small Wrench Icon)
- Add the copied code just above of the code which is already present.
- Finally save your gadget and you are done.
<style> /* ============ Feedburner Buzzboost Widget Customization Style By helperblogger.com ============= */ div.feedburnerFeedBlock ul li { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yEJKIXLDb8bDAsFWF8dGwK_yjx5BZB0qkhfmPQepWNkMBBPutUOrGcAMv7hCJ1k3KWoUHc7wNfc0nFPYGM9aNWoqKtggRObql4vNt3WOUtUb6dYdzlYUyTDG5vZQCHTxBs-V79qwgZE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdtUSvuPqoMmaFN67ghDtCQ_etHlvCP6zXuWi4HyF_PRMNh7pqDzZ6VSw1S8eblOc75y_WdSlR7lhGbtiGxtY1nyvs3YeiqyhbVs1gRbWzYSQz8i0Yi8XH6DjO9k-Jb9n-LliX1iJHtpA/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>
Post a Comment