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

Breaking

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

8/24/2010

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


Steps to follow:

STEP #1
Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template
</head>

And immediately before it, paste 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;

}



.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://bdlab.blogspot.com-->


Now click Save Template



STEP #1 Log in to Blogger, go to Layout

page-elements

Add a Gadget of HTML/JavaScript type.


image
Then add this code in to it:.



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

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

Now click Save















Image Floating Twitter Follow Me With Different Styles












Direct link imageOn Hover Direct link
01. http://i42.tinypic.com/353cvh4.jpghttp://i42.tinypic.com/212en7t.jpg
02. http://i40.tinypic.com/j65sts.jpghttp://i44.tinypic.com/2cncvq1.jpg
03. http://i40.tinypic.com/x283dc.jpghttp://i43.tinypic.com/m9sj5y.jpg
04. http://i42.tinypic.com/30kf7mp.jpghttp://i42.tinypic.com/330ab9s.jpg
05. http://i43.tinypic.com/20hwowl.jpghttp://i41.tinypic.com/i1mauo.jpg
06. http://i43.tinypic.com/x5nygw.jpghttp://i43.tinypic.com/2nk2qn9.jpg
07. http://i44.tinypic.com/1zqsowk.jpghttp://i39.tinypic.com/33nukja.jpg
08. http://i43.tinypic.com/24c8jm9.jpghttp://i39.tinypic.com/14112c7.jpg
09. http://i44.tinypic.com/r8ug3o.jpghttp://i43.tinypic.com/18nf54.jpg
10. http://i44.tinypic.com/2rz7u9s.jpghttp://i44.tinypic.com/2gxmamx.jpg
11. http://i44.tinypic.com/6jozr4.jpghttp://i43.tinypic.com/25iaycy.jpg
12. http://i39.tinypic.com/2a68u1k.jpghttp://i42.tinypic.com/2rnk9py.jpg
13. http://i43.tinypic.com/34zjfo5.jpghttp://i43.tinypic.com/a4ak2v.jpg
14. http://i43.tinypic.com/8wjfbs.jpghttp://i41.tinypic.com/5wbecx.jpg
15. http://i42.tinypic.com/23uucco.jpghttp://i43.tinypic.com/fee7ht.jpg
16. http://i41.tinypic.com/dcfzag.jpghttp://i44.tinypic.com/200g0w4.jpg
17. http://i41.tinypic.com/2quhswn.jpghttp://i42.tinypic.com/f5a83s.jpg



Thanks to http://loneeagle110.blogspot.com/2010/04/17-styles-animated-on-hover-floating.html

No comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

Post Top Ad

Responsive Ads Here