Friday, January 14, 2011

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

0 comments

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

0 comments:

Post a Comment

Followers

Blogumulus by Roy Tanck and Amanda Fazani
Free Blogger Tips, Hacks, Widgets, Templates and more