Friday 31 May 2013

Add Floating Likebox To Blogger

  1. Go To Blogger > Design > PageElements
  2. Click on "Add a Gadget"
  3. Choose HTML/JavaScript Widget
  4. Paste the following code inside it,

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNb_k_RMvVUl9LSoE-x_FDhdYalskWdjmqIXOlkhBcESMF_DlMyeCVU0Dvp5hOMhfVcoBfnVd8vlGBxW2kGbT4lEfzlfHczemj5BDfjMDlXh6vB5U914J77R_CN4lyraRyJfMPkX0KfenJ/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.MyBloggerTricks.com">My Blogger Tricks</a></span></div></div>


If you have not yet created a Facebook Username to brand your Fan Page then create it in seconds by clicking this link Once your create a username then replace bloggertricks with your newly created username

    6.  Save your widget
    7.  Now go To Design > Edit HTML
    8. Search for <head> and just below it paste the following JQuery code, (You can ignore this step if Jquery Link is already added in your template)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>


9.  Save your template and you are all done!
Visit your Blogs to see it floating at the right side of your webpage. I hope this widget helps you in increasing the number of your Facebook Readers.

=========================================================================
If you have and problem you can ask in comment section below...
=========================================================================

umang

Hi this is umang, Founder of TechnoRoots.i am a computer science student and a very passionate techno lover guy who loves technology more than anything else. Stay in love with TechnoRoots for getting all the latest updates in Tech and Computer World.

1 comments:

 

Share it

twitter  facebook  google plus  linkedin 

Total Pageviews

Disclaimer

All the links and files in this website is not hosted by technoroots.in. If any blog or website having any query with the content we post, please contact us at support@technoroots.in

Softwares-Let's Explore The Software World | 2014

E:support@technoroots.inDeveloped By : Umang Patel Gadget Geeks