» » » » How to Modify Feedburner Buzz Boost Widget?

How to Modify Feedburner Buzz Boost Widget?

, ,
Adding recent posts or recent comments widget for blogger lots of scripts and codes or widgets available online, but adding it by means of Feedburner buzzboost is another way to get interact with visitors/readers very easily.

By default Feeburner recent posts or recent comments widget available with bullet list, this widget can be modified by using CSS trick with simple modification. Webmasters don�t need to work hard for modification of Feeburner buzzbosst widget. Here, BlogTariff educates you about to modify widget by using button type images with simple tips makes your widget more attractive with hover effect and visitors/readers engage on blog. Let�s begin Tutorials for modification of widget.

Step1

How to Modify Feedburner Buzzboost Widget?

Sign into your blogger account
Click on �Design (Layout in the new blogger Interface)� Page elements link tab
Select �HTML/Javascript� widget and copy the code under Step 3
Step 2
If you�ve generated code on Feedburner then follow the below step 3
Or else if you�ve generated code then crate script code


Go to Feedburner account
Click on �Publicize� and �Buzzboost�
Select number of posts to display and necessary items to display and �Save� button.
After successful pressing �Save� button Script code generated and copy that code in any Notepad.
Step 3

Copy the below code and paste in �HTML/Javascript� widget
<style>
/* Feedburner Buzzboost Widget blogtariff.com*/

div.feedburnerFeedBlock ul li {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhjWgm4lQdYSd_eCJredtkQQOFueqwhWLi1XbkDdf_Tmf6VRdH7B4cnzLavGGe3SmIJm1nrKmUUWkjpjsxh8lUUfqzV5tTPdau1n2vjjABYceFVOKKRku9RQa9eqEjK1b7i2xefjKHA0/s1076/redheart.jpg) no-repeat 2px;
    list-style-type: none;
    margin: 0 0 5px 0px;
    padding: 5px 5px 5px 30px !important;
    border: 1px solid #e5e5e5;
    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/AVvXsEgToTX_zPk3Su3DU1vD15cVNrAhSFVDW_wtPT7_Da8WKhcOmiIEqlaoeCRuOzNp7WllOWsIIBGvaMvhDF_tqlEib02ozFxBjwFu2Zes9e65H4eAviQ1kclZOlGlvQQZmDKl1G2afLtWPQ8/s960/blogtariff.com-correct.gif) no-repeat 2px;
    border: 1px dashed #222222;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

div.feedburnerFeedBlock ul li a:hover {
    text-decoration: none;
}

div  #creditfooter {
    display: none;
}

/* Feedburner Buzzboost Widget Style By blogtariff.com ============= */

</style>

<script src="http://feeds.feedburner.com/blogtariff?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/blogtariff"></a><br/>Powered by FeedBurner</p> </noscript>


Save the widget and Template to preview your experiment.
That�s it you�ve done

Customization

  • Replace the above highlighted code with your Feedburner Buzzboost script code
  • If you want to add your own images then create 22x22 size button type images and replace the above code image URL with your hosted image URL.