Social Media Magazine

How To Add Stylish Floating Facebook Like Box Widget In Blogger

Posted on the 10 August 2013 by Mohammed39
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 bbloggertutorialswith your facebook page URL or user name. Now you can see the result and be happy. :-d

Back to Featured Articles on Logo Paperblog

COMMENTS ( 1 )

By kanasu
posted on 27 December at 16:21
Report spam/abuse

Hey, thanks a lot.. It's working in my blog.. :)

Magazines