Add (10) Floating 'Twitter follow badge widget' on Blogger

Add (10) Floating 'Twitter follow badge widget' on Blogger
You may be seen these floating ‘Twitter follow badge widget’ on many blogsites, which widget appears left or right side of blogs and floats. These badge widgets helps you to get twitter audience faster and easily. For your consideration here I present to you 10 different styles of ‘Twitter follow badge widget’. These widgets come up with lightly coded with CSS3, easy customizable and 10 different styles to choose. Let’s see how they looks like, how to add it on your Blogger blog, how to configure.

1. Twitter house badge (On mouse hover, twitter bird appears)
Twitter follow badge widget


<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:10%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-floattwitter img{height:100px; width:100px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://1.bp.blogspot.com/-FnPwfMji_iE/VPGiP2nDG_I/AAAAAAAAFeo/XkPeWVxl45M/s1600/1.png" onmouseover="this.src='http://4.bp.blogspot.com/-_lNzvpPSix8/VPGiZSa8UXI/AAAAAAAAFew/9YDy_As9Wis/s1600/2.png'" onmouseout="this.src='http://1.bp.blogspot.com/-FnPwfMji_iE/VPGiP2nDG_I/AAAAAAAAFeo/XkPeWVxl45M/s1600/1.png'" /></a>
<!--crawlist.net float ends-->
</div>


2. Little Twitter bird badge
Twitter follow badge widget


<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-floattwitter img{height:100px; width:100px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://4.bp.blogspot.com/-VXkgdQSgdlE/VPGc6HM1zAI/AAAAAAAAFdc/wAo5S7l8RkA/s1600/2.png"/></a>
<!--crawlist.net float ends-->
</div>


3. Cute Twitter bird badge
Twitter follow badge widget


<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-floattwitter img{height:100px; width:100px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://1.bp.blogspot.com/-XFU_NcSzpg8/VPGdCMQmI4I/AAAAAAAAFdk/bjZ-U4i9TW4/s1600/3.png"/></a>
<!--crawlist.net float ends-->
</div>



4. Twitter bird on branch badge
Twitter follow badge widget


<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://3.bp.blogspot.com/-kSGozRg45Yw/VPGdMAXNFrI/AAAAAAAAFds/iJxuzxx9TMI/s1600/4.png"/></a>
<!--crawlist.net float ends-->
</div>



5. Twitter rocket badge
Twitter follow badge widget


<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://2.bp.blogspot.com/-TJOyRVwOdxg/VPGdVjLuOBI/AAAAAAAAFd0/CieRtVJhvxQ/s1600/5.png"/></a>
<!--crawlist.net float ends-->
</div>



6. Twitter planet badge
Twitter follow badge widget

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://2.bp.blogspot.com/-Z34bUAEsYFk/VPGdfO2f6WI/AAAAAAAAFd8/V0uYv3E5Gb4/s1600/6.png"/></a>
<!--crawlist.net float ends-->
</div>


7. Twitter icon badge
Twitter follow badge widget


<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://3.bp.blogspot.com/-eqZurryVL8Q/VPGdrlY1inI/AAAAAAAAFeE/dLZl5dj2zZ4/s1600/7.png"/></a>
<!--crawlist.net float ends-->
</div>


8. Spinning Twitter sticker badge
Twitter follow badge widget

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-rotate a:hover {background-color: transparent;} #ks-rotate img { -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #ks-rotate img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
#ks-floattwitter img{height:90px; width:90px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter"><div id="ks-rotate">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://1.bp.blogspot.com/-GrGmdg9Aq6M/VPGd0ixqIRI/AAAAAAAAFeM/w5j-k8inTbw/s1600/8.png"/></a>
<!--crawlist.net float ends-->
</div></div>


9. Christmas ball Twitter badge
Twitter follow badge widget

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-rotate a:hover {background-color: transparent;} #ks-rotate img { -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } #ks-rotate img:hover { -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); opacity:.7}
#ks-floattwitter img{height:100px; width:100px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter"><div id="ks-rotate">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://2.bp.blogspot.com/-syvBR97fedo/VPGd9ylSLTI/AAAAAAAAFeU/oT4pAmFo2Pw/s1600/9.png"/></a>
<!--crawlist.net float ends-->
</div></div>


10. Smart Twitter badge
Twitter follow badge widget

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-floattwitter img{height:70px; width:70px;}#ks-floattwitter img:hover{ opacity:.8;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="http://4.bp.blogspot.com/-PkOUTJXwrFw/VPGeI-R6gAI/AAAAAAAAFec/JAZ_p5FDHxI/s1600/10.png"/></a>
<!--crawlist.net float ends-->
</div>

How to install:
  • Log in to your Blogger, select your blog
  • Go to ‘Template’ tab, select ‘Edit HTML’
  • Search (Using Ctrl+F or Cmd+F) inside code snippet for </head>
  • Copy and paste any code above </head>, And configure:

How to configure:
  • Collect your Twitter profile’s direct address link and paste ‘em on default link. Hit ‘Save Template’ And see your widget in live action
  • You can also change the size of the badges; just change the Height and Width value.
  • All badge will be appear on the right side, if you want them to show on left side just change the value right:0px; to left:0px;
Don’t forget to mention how they working on your blogsites. Goodluck and Chill….

Popular posts from this blog

Add Cool Social Media Sharing icons below posts in Blogger

Easily Get 50000 free Backlink for your website

13 Best Forum CMS/Script to use

7 best CMS/script for building Social networking website

Read Download Stephen King's Novels ePub & Apk

Read Download ePub Harry Potter Books & Apk

10 Best Free Flash Editor software to use

12 best free Article Rewriter/Spinner you can use

Top 6 Best Alternatives to ZBIGZ

6 Best Local Web Server software