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.



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(http://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(http://i26.tinypic.com/xpu99c.jpg);
position:fixed;
top:20%;
right:10px;
}
</style>
<!--FOLLOW-ME-STOPS-Widget-by-http://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(http://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:20%;
right:2px;
}
</style>
<!--FOLLOW-ME-STOPS-Widget-by-http://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...

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

23 comments

Write comments
August 10, 2009 4:31 AM delete

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

Reply
avatar
August 10, 2009 7:47 AM delete

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

Reply
avatar
August 10, 2009 8:20 AM delete

That's great Reza...

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

Regards
Sai

Reply
avatar
August 10, 2009 11:56 PM delete

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

Reply
avatar
Kyle Hemker
August 14, 2009 12:48 AM delete

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

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

Reply
avatar
Manish
August 26, 2009 2:12 AM delete

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 8-)

cheers

Reply
avatar
September 04, 2009 12:42 PM delete

Hi.nice hacks. I have a request for you,can i translate this post in Greek and post it on my blog ; http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif

Reply
avatar
September 04, 2009 1:06 PM delete

Hello 'bloggertrics'

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

Reply
avatar
September 04, 2009 2:15 PM delete

Of course,Thank you very much,you are INSPIRATION

Reply
avatar
September 21, 2009 3:22 AM delete

just wanted to say thanks

www.technomantra.com

Reply
avatar
October 05, 2009 9:03 AM delete

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

Reply
avatar
October 05, 2009 12:03 PM delete

Thanks Mohd, I have corrected the post.

Reply
avatar
November 20, 2009 3:11 PM delete

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.

Reply
avatar
November 21, 2009 6:02 AM delete

@WeGIF,

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

Reply
avatar
March 21, 2010 7:51 AM delete

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

Reply
avatar
July 23, 2010 9:26 AM delete

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 :)

Reply
avatar
July 23, 2010 9:47 AM delete

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)?

Reply
avatar
October 03, 2010 5:37 PM delete

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

Reply
avatar
July 03, 2011 3:03 PM delete

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

Reply
avatar
4rx
October 11, 2011 11:18 AM delete

Nice post and very nice images but stolen from Here!!! with the same code of images,same colors BUT NOWHERE the name of MY BLOG.

Reply
avatar
April 11, 2012 10:24 AM delete

Thanks a lot. This really blended so well with my blog background. I also read the Comment Like this page, and I have learnt something new. Thanks for this info

Reply
avatar
April 11, 2012 10:26 AM delete

Sir my blog talks about blogging too, but for beginners. I am offering free banner ads space this April, and would do that for this blog if you are interested. Even anybody else can get this chance. I have 4 FREE ADS spaces this APRIL

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon