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..
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&width=245&colorscheme=light&show_faces
=true&connections=9&stream=false&header=false&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 :