This is my first blogger widget.As we all know that Blogging is the new trend for young students and ever professionals.Everyone is struggling to get more and more facebook likes on their blog page.They share their blog on facebook and other social networks to get more likes.Today i am going to share a stylish and shiny facebook floating widget for blogger.By putting this widget on your blog you can get more likes.The widget remains in a fixed position on the right-hand side of your site. When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.Let's start follow me carefully.
- First of all Login to your blogger account.
- Goto your blog layout.
- Click on Add a widget.
- Select HTML/Javascript widget.
- Paste the following code in the HTML/Javascript box.
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".tglikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .tglikebox{background: url("http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhatsVwy74kF6qKRmFPw06k0Z0AjzXnyRQirg6JMebrS9v-PhemxB5E6gGUTMJVcl47W-4wVpM1cvyjt4nF1kG6Aey5gOSQYT1RLJLUKjdGigu8anvUEcqvZznNnQuG4G03Re9j23d0gok/s1600/fb+badge.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .tglikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .tglikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .tglikebox span a{color: gray;text-decoration:none;} .tglikebox span a:hover{text-decoration:underline;} } </style> <div class="tglikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftricksgack&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by:<a href="http://www.tricksgack.blogspot.com">Tricks Gack</a></span></div></div><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
type='text/javascript'/>
EmoticonEmoticon