If You Have Knowledge, let others light Their candles At It. Margaret Fuller
To Know What You Know And What You Do Not Know, That is True Knowledge -Confucius

Tuesday, 17 June 2014

Add Floating Facebook Page Like Box for Blogger

It's Important for Us to add Our official page of our blog for readers to like. This will let our readers to get updated every time we post about something.

This widget will be floating on Right side, whenever someone takes mouse pointer on it will automatically open and will show your page to like. It's Looks great and beautiful.

Steps To Add This Widget
1. Go to your Blog Dashboard
2. Click on Template (Note : Make Sure to Save Backup of your Template)
3. Click on Edit HTML
4. Press Ctrl + F and Type in Search box </head>
5. Copy Below and And Paste Just Above it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.
1/jquery.min.js" type="text/javascript"></script>
6. Save Template
7. Click on Layout
8. Click on Add A Gadget and choose HTML/Javascript 
9. Copy The Code Below and Paste it.

10. Replace Red Highlighted Line with your Facebook Page URL
11. Save Arrangement. Done. Enjoy!
<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="">
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/infoneed2explore&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;"></iframe><span>Widget by :<a href="http://need2explore.blogspot.com/"> Blogging Tips and Tricks</a></span>     </div>

Floating Vertical Bar With Share Buttons widget by techiterian

No comments:

Post a Comment

Designed By Seo Blogger Templates