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...

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts