Recently we shared simple yet
stylish floating facebook like box widget. Now we came with Another New Floating Facebook Like Box Widget For WordPress ! This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. Its widget for WordPress. You can find
floating facebook like box here. Now lets move to how you can add this in blogger I will show you How You Can Add Another New Floating Facebook Like Box Widget To WordPress?
Add Floating Facebook Like Box Widget To WordPress !
- Go to Dashboard > Appearance > Widgets > Available Widgets.
- Drag Text widget into a sidebar.
- Paste in the code.
- Save.
<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnrZWNbWt2W6KTpy__NJxSpbAM4Tm6FD0A2P8S2GObz2MN8bjAxSoWx5xYRUehQxKtoS1FXVjUhFrtNPnc8hp-6ftyGlsPZ2I1nS9ZHIQZNZ22ywUAlKwQsem1QGTAkVObZo3FeiSL-1Y/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="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips&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://www.AllBloggingTips.com"> All Blogging Tips</a></span>
</div>
</div>5. Click on Save button and done !
Note:-Replace allbloggingtips With Your Facebook User name.
5. Save your widget.
Now this is most important part. If you missed it the widget will not works.
6. Goto Appearance > Editor
7. Than goto > Header.php
8. Now Place below code just before <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
9. Click Save.
Now Visit your blog to see it that its working
. Hope you enjoy the post.
