Widgets

add facebook floating box on your blog

I found a script online that adds a floating Facebook button to right side of your blogs or websites. The button upon clicking slides towards left revealing a Facebook Like Box. It is an excellent coded slider that Hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button.  You can use the same code to add it to your websites or any webpage you may have. So lets add this cool Floating Like Box to your blogger blogs.

Facebook Floating like box is very easy to use. You also  see this on many  website / blogs. Make your blog  more attractive by using  this social  media  widget in Blogger. Many other websites  also share this widget but i also  share this beautiful  widget with you. This widget  is pop out when   mouse cursor hover  it otherwise this  is fixed on the right      side of   your blog page. You  can change its position but it looks attractive on the  right side. This widget has built in CSS, JavaScript, and HTML etc..


Recently we shared simple Facebook like box widget. Now today I am sharing another New Floating Facebook like Box Widget for Blogger. Facebook pop up like box now a days used by many bloggers and webmaster to increase their Facebook fan page traffic in short period of time. You just need to put small code to your Blogger Blog. Today I will show you How to Add New Floating Facebook Like Box Widget For Blogger.
  • follow the steps to add this like box to your blog.
  • Here are the two simple steps to place this sliding like box on your blog.
  • first of all goto the blogger > template > Edit HTML.
  • Now Find </head> by using (CTRL+F).
  • Now paste the code given here above the </head> tag.
===========================================
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
=================================================================


  • Now click on Save template.
  • And go to blogger > layout.
  • And Click on "add a gadget" and add a HTML/javascript gadget.
  • Now paste the code given here is that box.
=================================================================

<a href="http://hotspotech.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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/AVvXsEi2kM39okFxPHkGyRyhp5ZhaQGxjx74kvR__NysXPVEltOHnjh-Zb3mn7xx_yeQX62SPUTX8ShyYC9f4yrYbwlMs_39oKM5H4MsP-4VbqWj5osBYL_VnhnLVCJr-ONA-g4UZtZ80EwLPwzf/s1600/facebookbadge.png") 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=https://www.facebook.com/Hotspotech&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> / <a href="http://mybloggerwidgets.blogspot.com/">+Get This!</a></span></div></div> 
</div>
=================================================================

  • Now replace https://www.facebook.com/Hotspotech with your facebook page name.
  • And now click on save gadget and paste it anywhere you want.
  • Finally all done!!

0 comments :

Blogger Widgets