Friday, September 27, 2013

How to Add Floating Facebook Like Box in Blogspot

Today Facebook like box is a great way to promote blog or web. It increases visitors in a great deal and helps a lot to inform/advertise the new published posts to the visitors. In a word, it works just a strong advertisement. In my resent post, I discussed on how to create Facebook like page. I also published a post how to add Facebook like page in blogger. But, my today's post is something different from that post. That post was for static like box. But today's post is about floating like box. The main feature of it is it will remain hidden on the right side of the screen and it will show only the Facebook icon. When a visitors place the cursor on the icon, the full box will come on the screen. In a word, it is amazing, wonderful and attractive ones. To create it is very easy. Just two minutes will needed. Just follow a simple tutorial:

► At first log in to your blogger account.
► Then go to Layout.
► Click on add a gadget.
► Then click on HTML/JavaScript.
► Then copy and paste the following code.
► At last, click on save button.



<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("http://techteachingbd.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.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%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframesrc="http://www.facebook.com/plugins/likebox.phphref=http%3A%2F%2Ffacebook.com%2FIT Training&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.techteachingbd.blogspot.com"> it training</a></span> </div> </div>­­­­­­­­­­­­­­­

Note: You have to do a simple work! Just replace IT Training with your face book like page URL. If you haven't yet created Facebook like page, create it now just within 2 minutes!

Related Links:

1 comment:

  1. nice bro i like your blog and i also publish Another Cute and Shiny facebook floating likebox for blogger http://tricksgack.blogspot.com/2014/06/shiny-facebook-floating-likebox-for.html

    ReplyDelete