How to create floating RSS, Twitter and Facebook banner for Blogger blogs

Want to add custom banners (RSS, Twitter, Facebook, etc.) on your blogger site just like mine? It is definitely a more convenient way of giving emphasis on certain items on your blog. Here’s how to do it:

Step 1: Go to Layout view in your Blogger account

* Login to your blogger account
* From your dashboard, click Layout.
* Under the Layout tab, select “Edit HTML“. Here, you will see codes for your template.

Step 2: Add the follow code in your template

* Under edit template, find the “]]>” tag and insert this code just above it (before the “]]>” tag).

/*——- Floating banners by Jeypriey ——–*/
#rss-follow { border: 0;position: fixed; top: 180px; right:0;}
#twitter-follow { border: 0;position: fixed; top: 310px; right:0;}
#facebook-follow { border: 0;position: fixed; top: 440px; right:0;}
/*———————————————*/

Note: By default, the floating banners will be shown on the right side of the screen. However if you want to put it on the left side, just change the “right:0;” into “left:0;“. This is how it should look like.

/*——- Floating banners by Jeypriey ——–*/
#rss-follow { border: 0;position: fixed; top: 180px; left:0;}
#twitter-follow { border: 0;position: fixed; top: 310px; left:0;}
#facebook-follow { border: 0;position: fixed; top: 440px; left:0;}
/*———————————————*/

* Find the “” tag in the template code. Add the following codes below or after the “” tag.

Follow Me on Twitter
Subscribe to Feeds
Add in Facebook

Note: Change the bolded texts with your respective accounts.

Step 3: Save the code by clicking “Save Template”.

You’re DONE! Check your blogger homepage to see the results. If you encountered any difficulties or problems in implementing the code, just leave a comment. :)



You may also like to read:


One Response to How to create floating RSS, Twitter and Facebook banner for Blogger blogs

  1. Click On Portal February 19, 2010 at 8:58 AM #

    I can’t find it in yours, is there an example?

Leave a Reply