Facebook Like Box With Hover Effect for Blogger

I have come up with new tutorial, In our previous post we will teach you about how to add Facebook like box into your blog and today now we are sharing another 2 Facebook Subscription widget for blogger or website.  Here I have added as the box with simple jQuery hover effect. Lets see below tutorial to add them into your blog or website.
Adding Static Facebook Pop Out Like Box Widget To Blogger layout...Now let's start adding it. Just follow below producer.

1. Login to your Blogger Account.
2. Click Layout > Add A Gadget.
3. Select HTML/Javascript
4. Then Paste The Following Code In content Box from one of code given below.

(Style I) Static Facebook Pop Out Like Box with Hover Effect

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

<style type="text/css">
img, a { border: 0; }
#on { visibility: visible; }
#off { visibility: hidden; }
#facebook_div { width: 196px;
height: 340px;
overflow: hidden; }
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
right: -200px; }
#facebook_right img {
position: absolute;
top: -2px;
left: -35px; }
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left: -2px;
top: -3px; }
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
left: -200px; }
#facebook_left img {
position: absolute;
top: -2px;
right: -35px; }
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px; }
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this)
.stop(true, false)
.animate({ right: 0 }, 500); }, function () {
jQuery("#facebook_right")
.stop(true, false) .animate({ right: -200 }, 500); });
});
</script> <br /> <div id="on"> <a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="Indian Education Blog"><img src="http://img1.blogblog.com/img/blank.gif" alt="Indian Education Blog" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><div id="facebook_right" style="top: 10%;">
<div id="facebook_div">
<img alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5Om5upjtpa3rPG4rUdYPTJqhUa6Ssk29yFkJX1wP49sGF9buwBOES0kOWQoLqLiIAr14SjR_0HTrNAwq1ggQ1NFmdlaK49QvY31-dNaRFPgmA2WWM1bjw7rLxzclRnOWL5M2-9tWDMrb/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages/ThingsGuide/281417998619583&amp;
width=200&amp;
height=346&amp;
colorscheme=light&amp;
show_faces=true&amp;
border_color&amp;
stream=false&amp;
header=false" style="border: none;
height: 346px;
overflow: hidden;
width: 200px;">
</iframe>
</div>
</div></div>

Before adding these code please replace pages/hintx/4114399451828841994 with your Facebook fan page URL.

(Style II) Facebook Stylish Popup Widget with Lightbox Effect

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

<style type="text/css">
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3Wg9j-5sGVJ-IU83GTjgqPMfLVcrfcp381nH7LjBuLmJivyrPxwYXqRrOMDLiKsfZ6fQ-DIjn1hxQ4OVmU0Jq2M1YDagRxWFvhq3uarUHC0vSBPcVxK49RP20QMCpXqM_FjFRZQevhSq/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style> <script type="text/javascript"> //<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
//]]> </script><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <script type="text/javascript"> jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/pages/ThingsGuide/281417998619583&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
</center>
</div>
</div>

Before adding these code please replace pages/hintx/4114399451828841994 with your Facebook fan page URL.

Customization: These widget only shows up the first time the user visits your page. If you would like the Facebook box to popup everytime the page loads, then remove this line of code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

If you are facing any error during adding above widgets into your blog or website then please leave your comment below, we will catch you back as soon as possible.

Advertisement