Animated (On Hover) Fixed-Floating Twitter-Follow Me Badge

Get more twitter followers, by adding a Twitter Follow-Me/Us badge to your blog, which is quite similar to the fixed-floating feedback badge.
This tutorial will quickly explain you, how to add a fixed-floating twitter follow me badge to your blog’s layout.

Animated (On Hover) Fixed-Floating Twitter-Follow Me Badge

Steps to follow:
1. Log in to Blogger
2. Go to Layout -> Edit HTML, and find this code in the template:

</head>

3. Immediately ABOVE/BEFORE that code, paste these lines of code:

<!–FOLLOW-ME-STARTS–>
<style type=’text/css’>
.feedbacktw {
width: 31px;
height: 116px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(https://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:20%;
right:2px;
}

.feedbacktw:hover {
width: 31px;
height: 116px;
display: block;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(https://i26.tinypic.com/xpu99c.jpg);
position:fixed;
top:20%;
right:10px;
}
</style>
<!–FOLLOW-ME-STOPS-Widget-by-https://bloggerstop.net–>

4. Finally in Layout -> Page Elements -> Add a Gadget (HTML/JavaScript type), add this code:

<!–FOLLOW-ME-STARTS–><a style=”display:scroll;” href=”http://twitter.com/BloggerStop” class=”feedbacktw”> </a><!–FOLLOW-ME-STOPS–>

Change the link in RED color to your own Twitter profile.

The two images used in this hack are designed by me. Presently I have made the images with only black and blue background colors. You may use both/any one in your blog. If you do not want to show a different image on mouse-hover then delete the .feedbacktw:hover code in step 3, and add only this code:

<!–FOLLOW-ME-STARTS–>
<style type=’text/css’>
.feedbacktw {
width: 31px;
height: 116px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(https://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:20%;
right:2px;
}
</style>
<!–FOLLOW-ME-STOPS-Widget-by-https://bloggerstop.net–>

In case you want the same follow-me badge with some other background color (other than black and blue), then tell me the hex-HTML-color code through comments below…

Leave a Reply

23 Comments on "Animated (On Hover) Fixed-Floating Twitter-Follow Me Badge"

Notify of
avatar
Sort by:   newest | oldest | most voted
Reza Winandar
Guest

This tutorial really helps me for customize my friend's blog.

View Comment
Admin
Guest

Hi. I have a request for you. How can I change that Post comment button's name and preview.

View Comment
Divya Sai
Guest

That's great Reza…

@ Admin
Here's the article you requested:
https://bloggerstop.net/2009/01/remove-post-comment-link-and-text.html

Regards
Sai

View Comment
admin
Guest

Yeah I know that. But i am talking about another one. http://annirobin.blogspot.com Here is the blog which was fully changed embedded comment form like name of Select profile, name/url, Anonymous and Post comment name in button etc. How can I change my embedded comment like this blog? Can you help me?
Best Regards

View Comment
CraLBilogcu
Guest

nice hacks 🙂

View Comment
Kyle Hemker
Guest

I'm sure this is cool, but I really, don't like twiter

http://www.youtube.com/v/1NCcNN3T1a4&feature

View Comment
Manish
Guest

hi

i wanna tell u someting

Theres a blog http://wonderful-tricks.blogspot.com/

whcih has some of your content totally copied and not even linking

please dont forget to ad the blog to CONTENT THIEVES 😎

cheers

View Comment
bloggertrics
Guest

Hi.nice hacks. I have a request for you,can i translate this post in Greek and post it on my blog ;comment image

View Comment
Divya Sai
Guest

Hello 'bloggertrics'

You can re-publish this article, but attribution (with a link back to bloggerstop.net) is necessary…

View Comment
blogger tricks
Guest

Of course,Thank you very much,you are INSPIRATION

View Comment
Jugaad_Owner
Guest

just wanted to say thanks

http://www.technomantra.com

View Comment
Mohammad Mustafa Ahmedzai
Guest

Thks Dsai, I could succesfully insert this animated effect to my social media icons but with a little alteration.

Dsai I guess you have mistakenly taken the class as class="feedbackb" rather class="feedbacktw" Kindly correct that.

With love,
MOHD__
Author: MBT

View Comment
Divya Sai
Guest

Thanks Mohd, I have corrected the post.

View Comment
weGIF
Guest

Thanks for the great ideas i have learned. Gif Photo Animation can be helpful for anyone who would like to experience the Amazing weGIF Animation Software of its satisfying results.

View Comment
Sai @ BloggerStop.Net
Guest

@WeGIF,

I am impressed with your service, contact me if you need a review of your website here on BloggerStop.

View Comment
thesydneygirl
Guest

FANTASTIC tutorial!!! I read other ones but this one was the best and most helpful. THANK YOU so much! 🙂

View Comment
Monica
Guest

Thanks alot for such a nice tutorial!
but i am a bit confused!
How can i add other service also in this format?
for example i wanna add a link to facebook fan page, and orkut community of my blog/site.
once again, thanks alot 🙂

View Comment
Sai - Blogger Widgets
Guest

You want to add buttons like the one shown in this post (with hover effect-which changes position) or is it ok to show buttons with hover effect (but it's a different effect, as the buttons will convert from translucent to opaque)?

View Comment
Adam
Guest

can you make one with hex code … #F0F
email code please to CorpEnergy2010@gmail.com as I am designing a site for someone and this button in that color would be AWESOME! Thanks again

View Comment
Monu
Guest

hi liked the badge you created and yo have explained each and everything in detail and i appreciate…

View Comment
wpDiscuz