17 March 2016

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.


Previous Post
Next Post

I'm Aamir Saleem, a professional blogger and SEO Consultant. I loves to write on blogging, SEO, Internet Marketing, Business, Social Media and Make Money Online. Connect Me Via !!!