Add a floting facebook like box in blogger
Are you troubled to urge additional facebook likes? Add a floating facebook like box to your journal or web site. The contrivance remains in a very fastened position on the right-hand aspect of your web site. after you hover over the blue facebook image, variety box can then slide and reveal itself victimization jquery.See Demo
Add contrivance to Your web site
Step 1
Add the subsequent code anyplace within the body section of your model. or just click the "add to blogger" button for blogspot blogs.
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSLhuaVwK39pO9M0KpDv4UVPCJDgzyxtXAvTEOzHL2kPwBV2It2eARRVD9sz09-54mcjR-iNXJ7rPD46X_Z0xiSC6Y2hfBUBMDrEZgIB_gOVUtTWzJCvRmKtpUsIV8_PLpnnp1ucr4dFAO/") 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%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><div class="theblogwidgets" style="">
<!--Brought to you by http://learnonline786.blogspot.com/2014/10/how-to-add-floating-facebook-like-box-in-blogger.html--><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages/Learnonline786blogspotcom/782722665126829&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;color:000;"></iframe></div></div>
Step 2
If the floating facbook contrivance isn't operating properly once step one, then you would like to feature jquery to your site. Follow the directions below.
1.Go to Design>Edit HTML
2.Search for<head> and just under it paste the subsequent JQuery code.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
How to customise
Where to realize the code?
In order to realize the hypertext mark-up language go to the blogger dashboard>Layout. Click "edit" on the "HTML/Javascript" gadget.
Enter your facebook username
Search for the road of code below and replace theblogwidgets together with your own facebook page username. If you do not have a username you'll be able to simply produce your own here.
facebook.com%2FYourusername
0 comments:
Post a Comment