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

6 comments:

  1. Hi guys, Please I have a request to admin or anyone else to help me about slideshow of Featured Posts and Menu bar. I want like this one in that blog (http://oldblog.iloveallaah.com/) or something similar to it, Please I need your help guys. my email is : sympa.berber@yahoo.com any adive or suggestion. Thank you all.

    ReplyDelete
  2. @Freedem of Free Softwares

    Read this:

    http://bdlab.blogspot.com/2010/04/moving-jquery-image-slider-for-featured.html

    ReplyDelete
  3. @ Admin

    Please can you help me to include that slideshow on my blog, it work but messing everything on my page, Please can you help me online. I live in Morocco my time is GMT. I can give you my account and fix me that : http://antivirusrescue.blogspot.com/

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

    Blogger Help Στάλες στο γαλάζιο

    ReplyDelete