Saturday, August 10, 2013

How To Add Stylish Floating Facebook Like Box Widget In Blogger

,
Today we will learn how to add facebook like box to blogger blog with a distinctive view, wonderful and attractive format, where the facebook like box is hidden on the right side of the screen and shows only the passage of the cursor on it. to add this widget to your blog,follow these two simple steps:

STEP 1
1.  Go to Blogger Dashboard  --> Template
2.  Please! download  a copy of your template
3.  Now click on Edit HTML
4.  Use Ctrl+F to find </head>
5.  Then copy and paste just above/before it, this code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
6. Save your template.
STEP 2
1.  Now go to Layout--> click on "Add a gadget".
2.  Select "html/java script" and add the code given below and click save.
  <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://4.bp.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>     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbbloggertutorials&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.bbloggertutorials.blogspot.com"> BBloggerTutorials</a></span>     </div> </div>
Note: Replace bbloggertutorials with your facebook page URL or user name.
Now you can see the result and be happy. :-d

48 comments:

  1. Hi Dear
    Awesome Post But it's not working in My Blog
    you can visit mine www.adorablefreetricks.blogspot.com

    ReplyDelete
    Replies
    1. I will help u , What is the problem that you encounter?

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Thank You for beautiful post Its Awesome :o

    ReplyDelete
  4. Thanks dear...it is working well....thanks again.......love it very much........visit it http://malmallk.blogspot.com/

    ReplyDelete
  5. hy ayman i from indonesia this awesome tutorial :) if there is a time to stop by my blog http://imronfhatoni94.blogspot.com

    sorry if I write spam comments here ayman :)

    ReplyDelete
  6. such an informative post. I have added this gadget. Keep doing the best.
    Live Technology-A Information Technology Blog

    ReplyDelete
  7. The best of tutorial.. (k)
    bct back bw bro http://iklans-ukses.blogspot.com/

    ReplyDelete
  8. Nice post. i want to ask a question that how to change the size of like box? i mean height and width and i want to show maximum faces in box. help please my blog is http://www.onlinedokaan.com/ and here you can see my other simple facebook like box. it is my choice siz.

    ReplyDelete
  9. It works like a half only, an empty floating box! For what??? It is blog 3 i have found wit the same problem...what a crap) On your blog i can see the same crap) so for you it is not working as well)

    ReplyDelete
  10. Like look you Tutorial How To Add Stylish Floating Facebook Like Box Widget In Blogger

    Thanks bro

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. hi the widget worked - i mean it is up on my blog, but there are no pics of people who like the fb fanpage inside the widget! in fact here on your website i see the widget as empty as well - is it some setting on my computer? (i have adblock plus installed e.g.??) Please help :)

    ReplyDelete
  13. How To Add Floating Facebook Like Box in Blogger

    http://shakdock.blogspot.in/2014/02/how-to-add-floating-facebook-like-box.html

    ReplyDelete
  14. Thanks for sharing information about this topic this is very good information and it is helpful for me and great.

    http://www.i-webtechsolutions.co.uk/seo-consultant.html

    ReplyDelete
  15. why my fb is not come? please help me in http://jhonmiduk8.blogspot.com/

    ReplyDelete
  16. your blog is fantastic, checked the other blog but all errors.. yours work well!! thank you so much.. anyway, can you check my blog as I'm a newbie and suggest which widget is good? http://twomonkeystravel.blogspot.com/ thank you again!!

    ReplyDelete
  17. Hi. I think your facebook widgets is against adsense tos. it comes out on side add unit , and i can click by mystake on add. I think...

    ReplyDelete
  18. Hi,it appears empty on my blog. Could you please help me?
    http://annaparsapour.blogspot.com/

    ReplyDelete
    Replies
    1. Of course...
      First retry the steps another time If it does not work, try to change another template.
      Sorry for the delay.

      Delete
  19. thanks for the article information is very useful for me

    ReplyDelete

 

Disclaimer | Terms and Conditions | Privacy Policy | Copyright © 2012 | Template design by bbloggertutorials