Searching...
Monday, 24 December 2012

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

Get more twitter followers, by adding a Twitter Follow-Me/Us badge to your blog.
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: 136px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:35%;
left:2px;
}

.feedbacktw:hover {
width: 31px;
height: 136px;
display: block;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/xpu99c.jpg);
position:fixed;
top:35%;
leftt:10px;
}
</style>
<!--FOLLOW-ME-STOPS-Widget-by-http://rnhckr.com-->
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/rnhckr" 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:hovercode in step 3, and add only this code:
<!--FOLLOW-ME-STARTS-->
<style type='text/css'>
.feedbacktw {
width: 31px;
height: 136px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:35%;
right:2px;
}
</style>
<!--FOLLOW-ME-STOPS-Widget-by-http://rnhckr.com-->

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




0 comments:

Post a Comment