Blogging Editor's Choice How To

How To Add Static Facebook Like Box With Smart Jquery Hover Effect

In my previous articles, I’m sharing “How To Add Facebook Like Button in Blogger Blogs” and also “How To Add Facebook Like Box in Blogger”. Here in this article, i’m telling you “How To Add Static Facebook Like Box With Smart jquery Hover Effect” into your blogger blogs. Here i’m show you how to add floating Facebook like button blogger widget which is showing at the left corner of your blog with show on mouse-over. If you want to see how it is showing in blog, see demo below :
How To Add Static Facebook Like Box With Smart Jquery Hover Effect

How To Add Static Facebook Like Widget in Blogger Blogs

Step 1 – First of all go to your Blogger.Com account.

Step 2 – Go to your blog “Template” and click on “Edit HTML” button.

How To Add Static Facebook Like Box With Smart Jquery Hover Effect

Step 3 – Now in “Edit HTML” press CNTRL+F . A right corner search bar appear for searching.
How To Add Static Facebook Like Box With Smart Jquery Hover Effect

Step 4 – Now Search below line of code.

</head>

Step 5 – Now copy below code and paste it just above the “</head>” section tag.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

Step 6 – Now simply save your template.

Step 7 – Then go to your blog “Layout” section. Add a New Gadget and then select out the “HTML / JavaScript” widget.


Step 8 – Now copy below code and paste it in the “HTML/JavaScript” widget.

<style type=”text/css”>
#fbplikebox {
display: block;
padding: 0;
z-index: 99999;
position: fixed;
background: #ffffff;
}
.fbplbadge {
background-color: #3B5998;
display: block;
height: 150px;
top: 50%;
margin-top: -75px;
position: absolute;
left: -47px;
width: 47px;
background-image: url(“http://3.bp.blogspot.com/-1GCgbuSZXK0/T38iRiVF41I/AAAAAAAABpg/WlGuQ3fi-Rs/s1600/vertical-right.png”);
background-repeat: no-repeat;
overflow: hidden;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
</style>
<script type=”text/javascript”>
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = “medium”; // Duration of Animation
w2b(“#fbplikebox”).css({right: -250, “top” : 100 })
w2b(“#fbplikebox”).hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b(“#fbplikebox”).show();
});
})(jQuery);
/*]]>*/
</script>
<div id=”fbplikebox” style=”display:none;”>
<div class=”fbplbadge”></div>
<iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FTechora%2F129843672350
7151&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;                                                                               border_color=%23C4C4C4&amp;stream=false&amp;header=false” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:250px; height:250px;” allowtransparency=”true”></iframe>
</div>

Step 9 – Now replace “Red Colored” Facebook URL with your own Facebook custom URL , and save your widget .

Remember Some Thing About URL : 


The : is equal to %3A
The / is equal to %2F

Step 10 – Now after saving your widget click on “View Blog” and see out the Static Facebook Fan Box Widget into your blogger blog.

About the author

Tech Ora

Dixit Dhinakaran is 21 years old, a web-based entrepreneur and owner of TechOra.net. Dixit enjoys learning new tips and tricks related to technology. And what makes him stand out of crowd is his friendly attitude of sharing what he learns. He is a music Addict too!

How To Add Static Facebook Like Box With Smart Jquery Hover Effect

In my previous articles, I'm sharing "How To Add Facebook Like Button in Blogger Blogs" and also "How To Add Facebook Like Box in Blogger". Here in this article, i'm telling you "How To Add Static Facebook Like Box With Smart jquery Hover Effect" into your blogger blogs. Here i'm show you how to add floating Facebook like button blogger widget which is showing at the left

Pin It on Pinterest

Share This

Share This

Share this post with your friends!

Send this to friend