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

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

By
Tech Ora
-
0
SHARE
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 :
SEE DEMO OF THIS WIDGET
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.

RELATED ARTICLESMORE FROM AUTHOR