Home / Blogger / widgets / Shiny Facebook floating likebox for blogger

Shiny Facebook floating likebox for blogger

Shiny Facebook floating likebox for blogger
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHE8-R32MHtgy-tuzhTpAmAVHZVJKyxCSyd8hrTT41Frf7UQNjMU1S29e9fVOWd7ahADr1BCvjbtmybNpd-Qq5HWumABNxpOl2_9sNDfH7nCOBXZ2NE17Pyakn7CTu1d427wP0yWvaSWU/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&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;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>
  • Now find Tricksgack and replace with your facebook page username.
  • Click on Save option.
    • If the floating facbook widget is not working properly after step 1, then you need to add jquery to your site. Follow the instructions below.
  • Goto Template>Edit HTML
  • Search for <head> and just below it paste the following JQuery code.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
type='text/javascript'/>
Shiny Facebook floating likebox for blogger Shiny Facebook floating likebox for blogger Reviewed by Danish Yaqoob on 00:10:00 Rating: 5

No comments

Thanks for your comment.Keep visiting for latest updates from us.
Moreover, Subscribe Now!

Subscribe to: Post Comments (Atom)


FB Instagram Twitter Google+