Friday, April 7, 2017

Facebook Like Box with Hover Effect for Blogger

Hello blogger, in this post I will like to share you some two different types of Facebook like box with Hover effect. Kistharah is always ready to give suggestions, technical support, information and many other things. Coming to the tutorial, in our previous post we thought you about how to add Facebook like box into blogger 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. Before starting the tutorial, let us see why Facebook is very important for Blogger.

It has been a dream of every blogger to be successful in his career but not everyone is successful in blogging. Some push up their hard work and don't lose hope while others leave the ground. Well, Blogging is never ending game, it will grow up more and more! Blogging success appears with several things such as you'll be getting high traffic, earning increases, fans and follower’s increases, being popular and people also talk about you and your blog. Well, having a high number of social followers is great as it helps you to drive quick traffic, finding out the average of your followers and also knowing more about them.

No doubt, you may have created a Facebook fan page of your blog. But what about page likes? Are they increasing, decreasing or no movement? Well, Most of the new blogs have very fewer likes as the page doesn't reach to the high audience. It's recommended to use some type of Facebook like boxes in our blogs to increase likes and also converting blog visitors into Facebook fans.

Don't get worried if you're thinking about readers will get annoyed. This like box is designed and developed differently. When this widget appears, it throws a cookie into the user's operating system which helps this widget to control its appearance. Means through the use of that cookie it will not annoy readers by coming again and again. So, it only appears once to the visitors. But yes, if someone clears cookies than it might come back but only for one time because it will again send cookie into visitor's system.

After the great functions of this widget, it also has cute look in design. It appears with a loving effect and the whole box has also cool design. First, it has a title "can also be called message" which appears at the top center. That title or message forces visitors to like your page. Second, It has the main thing "Like Box" that is actually official Facebook like a box. At third and last, there is a close button that is a way to go to your blog by closing that Pop Up like box. So now step into our tutorial session.

This is a quick and simple tutorial, hence I assure you that with just 5 minutes of our presous time you can add 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.


 

        Click here for Demo


 

Before adding these code please replace https://www.facebook.com/addictedtovideos with your Facebook fan page URL.

Customization: This widget only shows up the first time the user visits your page. If you would like the Facebook box to pop up 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.

I’m sure this will help those who are looking for ways to modify their Blog with great designs.If you feel my Blogg helpful please share this post with your friend and follow us for more methods.
 <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(http://1.bp.blogspot.com/-nvVQjfAIh-k/UlbI1yuR1ZI/AAAAAAAABxE/WVaa-sZSBGs/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://www.jobsmag.in" rel="dofollow" target="_blank" title="JobsMagBlog"><img src="http://img1.blogblog.com/img/blank.gif" alt="JobsMagBlog" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.jobsmag.in" rel="dofollow" target="_blank" title="JobsMag.In"><img src="http://img1.blogblog.com/img/blank.gif" alt="JobsMag.In" 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=https://www.facebook.com/addictedtovideos&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 https://www.facebook.com/addictedtovideos with your Facebook fan page URL.

Customization: This widget only shows up the first time the user visits your page. If you would like the Facebook box to pop up 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.

 

0 comments:

Post a Comment