Add The Floating Follow Me On Twitter Badge To Your Blog

Posted : Tuesday, January 05, 2010 | Post Author : Paul Crowe | 10 comments

Twitter is a great way to connect with the readers of your blog and find people with similar interests who you can inform about your blog.First up if you have a blog and you don’t have a Twitter account you are missing out, get one now.You can get more traffic to your blog from Twitter and it’s actually good fun.

Click here set up your Twitter and we can continue…Ready ?

Twitter can be as almost effective as Followers and Rss feed at keeping people connected to your blog and updated when you publish new content.When someone arrives on your blog you want to have the options for them to connect with you in prime positions.Your Rss feed link should be near the top of the page if you use followers this should have a prime position,similarly you should have a link to follow you on Twitter easily accessible.

The Follow on twitter badge we will be adding in this post is the one I’m currently using (I’m always changing this blog it may be different by the time you read this )

Here’s a preview :

The image is fixed to the side of your blog and stays in position when the page is scrolled, when clicked it will open your Twitter Profile in a new window for the reader to follow you.

Lets add it to your blog

1.Click Layout–>Edit html for your blog
(Tick the ‘Expand widget template’ box.)

Blogger layout


edit html blogger


Expand widget templates blogger

2.Find the following piece of code in the html:
(Click ‘CTRL and F’ for a search bar to find the code)


3.Add the following piece of code Directly Above it :

#float_corner {
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth – offsetWidth);}


This will position the image just up from the bottom left corner of the page.
You can change this just change the following attributes : bottom :left
Change them to make the image appear were you like :

-top left
-top right
-bottom left
-bottom right

You can also change 10px to move the image position up and down the page and 3px to move the image in and out from the side of the page.

4.Now find this code in your html :


5.And place this code Directly Above it :

<a href=’’><img alt=’Best Blogger Tips’ src=’’/></a><div id=”float_corner”>
<img src=”” border=”0″ /></a>

You Must change the following attribute :

ENTER YOUR TWITTER URL HERE – Replace with the address of your twitter profile.


Once you have made these changes save your template and the image has been addedYou can make of find a different image and use that, if you need help with that let me know.You can follow me on Twitter here: Follow @paulcrowepro

We have lots more Twitter Gadgets And Tips for you to check out.

Drop Your Comments, Views And Questions Below.


  1. Algarve Tour GuideJanuary 6, 2010 at 4:07 PM

    Hi Paul,
    How are you?
    I am really glad meet you!
    There are a lot of usufull free SEO tricks Here…
    You got a very usefull website!
    Tanks a lot 4 share such usefull information!
    I Tweet It!


  2. Hi,

    This is a tremendous tutorial and i have not seen this type of use of twitter icons before.

    I particularly like the way in which you have made this training easy for a non techie/programming type like myself.

    Great work




  3. Thanks very much Richard,

    I think the fact i thought myself everthing i know about web design and working with code it helps when i write tutorials.

    Glad you like the Twitter icon i love it myself, it’s practial and looks good..



  4. Hi,thanks for the post…i found it really useful and easy to understand…^^


  5. Great stuff adnileon, if you need any help with anything else just ask.


  6. Thank you! It worked! I now need to add another underneath. I want to use a facebook one as well as the twitter. But when I add the code again the first one doesn’t show up? Thanks!


  7. @Katrina, you need to add all the code a second time.So add the code for your twitter badge then add the first section of code again, but this time change –




    Then add the second section of code but change –

    div id=”float_corner”


    div id=”float_corner1″

    Of course you will also change to a facebook badge and URL.If your still having trouble send me the facebook image and URL via the contact form and i will send you back the code.



  8. hi! i’m indonesian people, your blog is so GOOD!


  9. Thanks you are a super-kind, genius! I am so excited to be able to have a follow me button! I would like to find one that suits my blog though, is it easy to change?

    You are BRILLIANT!


  10. hi, How can I add Follow me on Facebook button for my blog?