Facebook Pop Out Like Box

Hello friends, here's another Facebook jquery pop up for facebook like box widget for bloggers (or) website. Advantages this widget is to free space on the page. Because Facebook can prevent website normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left.




Add Left Side Static Facebook Pop Out Like Box with Jquery Hover Effect




Step 1: Adding Static Facebook Pop Out Like Box Widget To Blogger layout.

Now let's start adding it...

Step 2. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.



Blogger Tips And Tricks|Latest Tips For Bloggers


Step 3. After click on Add a Gadget link A pop-up box will open now

with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.



Blogger Tips And Tricks|Latest Tips For Bloggers


Step 4. Select 'HTML/Javascript' and add the one of code given below.

Step 5. Now Click On Save 'JavaScript' You are done.



<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisnIsR9-qYM3E2hvXqf69rvE0Q_2kV5cCLl1F00KXIFV9Ot0cTFc4bArRi011FHAVYhyXZdYBatcvLLkLDm9U00iGgPosyEFzN5n3ph_reaFKBbt2PS0cs8teJD8JhEIKhxaqtbnjVPWbx/s1600/facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Blogspot-tutorial/220888831260608&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>



>> In Customize Field Replace "pages/Blogspot-tutorial/220888831260608" with your own facebook page name (Not your own profile name)


<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>


Note :If your template already have a jquery do not put again, just copy after it

Html from above a few things could be replaced :








Add Hover Style Facebook LikeBox With Button Near To Page ScrollBar


Add Hover Style Facebook LikeBox With Button Near To Page ScrollBar




<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://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" 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/AVvXsEjpR4oOQrMFokhNOuUy1zv6hxsBoEZwJyU5rQJUutEiSJHqu7hkF-fZvtgxA1IMboX9crcUHcsWQgIDAePP8p9EjNjAEWXzEf6g6RixUtE09ydcphVK5HFLB4m4KWUPwz_8MenFkrQdS4q4/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%2FBlogspot-tutorial%2F220888831260608&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>



Note:-Don’t forget to change Red colour keywords.







Add jQuery LIGHTBOX Popup Facebook Likebox To Blogger NEW


Add jQuery LIGHTBOX Popup Facebook Likebox



I had given to Facebook as jQuery popup box and jQuery to facebook emerging as the box with the background image in my previous post, if you are new here, that the first visit, now I'm back with the same widget, just change the background image and the size of this widget. I just tried this and I hope you enjoyed it.

How To Add A Awesome Facebook Fan Page JavaScript For Blogger

Go to blogger > Open layout tab

Now Add A new HTML/JavaScript widget

Now paste the code given below :




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>


<link rel="stylesheet" type="text/css" href="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/facebook-pop-old/lightbox-style-popup-facebook-likebox-widget-01.css" /><script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/facebook-pop-old/facebook-colorbox-v1.3.19.js"></script><script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"400px", inline:true, href:"#subscribe"}); } }); </script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <div style='display:none'><div id='subscribe' style='padding:10px; background:#fff;'><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2W11VCkOsz9-RSCzmPtodU3Cy4li9VH9EWMQ5a8lLzmn8uNY-t05Fv4iszx6HWkhkuUxnXEGxgpX8czAA1ounHSi8YM60WQPbKmcWTHB3OLeODIBGLAmmfiF43KCFibkV4V1WmbQahx7/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center><center><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
</div>
</div>





Note :- Do not add above red colored jQuery plugin if your blog already jQuery plugin.

Replace pages%2FBlogspot-tutorial%2F220888831260608 With your Facebook User name


Customization:


The widget saves up a cookie in the visitors computer. You can change the frequency after which the widget would appear to the visitor. Simply change the number 30 to the number of days your wish. Say you want your widget to reappear after 30 days after the first time. Than change 30 to 7.

Now you have done !!!











Add a Awesome jQuery Pop-Up For Facebook Like Box


Add a Awesome jQuery Pop-Up For Facebook Like Box


After my recent Adsense Popup widget. Now I decided to present some fresh for what comes with a nice jQuery Popup Box to Facebook as. This is an excellent widget to enhance taste. You can see most of the sites or blogs that are used to increase pop unpaid, fans and supporters. This popup jQuery cute for Facebook As the box is a great blogger widget. As soon as the new visitors coming to your blog will display the pop visitors, which can help increase the size and get more traffic to my next tutorials Facebook.In I'll try to make it more interactive with links to social media profiles and a complete version with all its contents, which can need.Check out show down and I will show you how to add jQuery Popup cute for Facebook as the box to Blogger or WordPress?




Add Facebook Likebox Popup To Blogger

Go To Blogger > Design
Click choose a gadget
Select HTML/javascript widget
Paste the following code inside it



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/facebook-pop-old/lightbox-style-popup-facebook-likebox-widget-02.css" /><script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/facebook-pop-old/facebook-colorbox-v1.3.19.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <!-- This contains the hidden content for inline calls --> <div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe></center>

</div>
</div>




Note:- Replace pages%2FBlogspot-tutorial%2F220888831260608 With your Facebook User name







Facebook Popup Widget with Lightbox Effect


Facebook 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/AVvXsEi3hbc3O0XzN5NdzJwIlnWoTWqnGsTROuuSzxhNhKzJ41J-k4nns9p9lHL-2lY6JtcgR7frBrNJ7buwJDplK_4WBL0gA4lIAM5WFEFCi1PqHp6xPQylMO3l63aUzPiOUoBXuEiYfQfLXBSU/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://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" 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/Blogspot-tutorial/220888831260608&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>



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


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













3+ Ways To Customize The Facebook Fan Box Widget With CSS

The Facebook plugin style is unfortunately not an easy task because the details are very limited shared in the Facebook Developers page. Custom Plugins will help you stand out as a brand and market your business as well. In April 2010, Daddydesigns posted a tutorial on how to style and make the modifications to the box fan on Facebook. Your tutorial was well received, but with the introduction of Facebook as the box instead of Fan Box, change in algorithms made ​​it difficult to modify the plugin using the same guide. After several trial and error, managed to make the necessary changes made ​​by DaddyDesigns small to fully customize the box with flavors like custom fonts and colors. This surely would not have been possible with your help bright.


Customize Facebook Like Box With CSS to blogger

it's simple

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.


Note:- Replace pages%2FBlogspot-tutorial%2F220888831260608 With your Facebook User name


Customize Facebook Like Box Using CSS Style 1:-


Custom Facebook Like Box




<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK6Ob82ool5Apnetf8JQA2CDqtXV49q6USAfsx32KMAyQJHn3Ie7hQXjToI7aE9AcaExoKz22nEvU7iIohzs135sdm0zoEE0QlSq15RTqV_W0SjySyUHy4NPuDVNwAtyS0VaCFurmK6Ib-/s1600/fan-01-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&amp;width=250&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23f4f4f4&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>


And now click Save


Style 2:-


Custom Facebook Like Box




<div style="-moz-box-shadow: 0px 15px 20px 0px #777777; -webkit-box-shadow: 0px 15px 20px 0px #777777; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 270px; margin: 30px; padding: 10px 0 10px 10px; width: 250px;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&amp;width=250&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23f4f4f4&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>


Style 3:-


Custom Facebook Like Box




<div style="background: rgb(0, 255, 0);background: -moz-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -webkit-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -o-linear gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -ms-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&amp;width=250&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23f4f4f4&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>


Style 4:-


Custom Facebook Like Box




<div style="background: rgb(255, 192, 203);background: -moz-linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: -webkit-linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: -o-linear gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: -ms-linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&amp;width=250&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23f4f4f4&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>





Your personal Facebook as the box is ready to be served! That's it. Paste this code anywhere you want and your personalized style box is displayed to perfection. If you have any problems let me know. I will post more designs and tutorials on this topic on this week.


Credits: Readers are requested to kindly link back to this page if they wish to share this working tutorial with their visitors. It's the only tutorial published after Daddydesigns tut which provides a modified solution.





Visit her blog to see pop Facebook. To check the widget and again just delete the cookies on your browser and refresh the page to see that return. That's a cool Facebook widget pop up that surly increase their Facebook fan count.Thanks back to MBT or Harish for the original gadget.










248 comments:

  1. That's a very cool idea for my blog, thanks! Definitely would try this soon.

    ReplyDelete
  2. Thanks::

    I will test on my blog http://www.newsarkarijobs.com

    ReplyDelete
  3. thanks and thanks...
    http://www.funnspot.com

    ReplyDelete
  4. its a nice widget. I used it for my blog. but i want another facebook like box widget. A widget which will let the facebook like box appeared in the center before opening a website. when we close that box site will be in front of you .

    ReplyDelete
  5. Thanks for the post...I have read out your post..This is full of information...I want to say thanks for sharing the such type of valuable information.....

    ReplyDelete
  6. It was very interesting for me to read that blog. Thanks the author for it. I like such topics and everything that is connected to them.

    ReplyDelete
  7. It was very interesting for me to read that blog. Thanks the author for it.I like such topics and everything that is connected to them. I would like to read more soon.

    ReplyDelete
  8. That's a very cool idea for my blog, thanks! Definitely would try this soon.

    ReplyDelete
  9. many many thx for nice information i am finding this information at last o get it again thx dear

    ReplyDelete
  10. Thanks for this information and beautiful gadget.

    ReplyDelete
  11. Nice, post for SEO beginners also for me.
    I like it......

    http://sunilseoservices.blogspot.in/

    ReplyDelete
  12. Thanks for this very useful popout

    ReplyDelete
  13. oh thank you for all group of you 24work I like this website it is easy for me to design my blog better from day to day i hope you have any new style about blog in the future

    ReplyDelete
  14. Very Nice Popup.. Creative and elegant. I'll try this. Thanks for the code.

    ReplyDelete
  15. great website, looks very clean and organized. And very interesting to read Your the article!

    buy sell domains
    google pagerank
    Free PC Games

    ReplyDelete
  16. how to Add social networks "facebook-twitter-feedburner-googleplus" with Jquery Effect jut wow !

    http://blogger-he.blogspot.com/2012/07/hello-guys-today-illshow-you-wonderful.html

    ReplyDelete
  17. It was very interesting for me to read that blog. Thanks the author for it.I like such topics and everything that is connected to them. I would like to read more soon.

    ReplyDelete
  18. I amazing trick actually i was looking for that I would like see more more soon.

    ReplyDelete
  19. wow Very Nice CSS and HTML Navigation Widget,I like it
    Thank you for sharing with us

    ReplyDelete
  20. Awesome trick about facebook plugins.

    http://webdevelopmnetphp.blogspot.in/

    ReplyDelete
  21. '(***WeLcOmE***) www.FuNmAzANeW.blogspot.com FuNmAzANeW is the BeSt Web Site Of Entertainment and Many More ThinGS For U.

    ReplyDelete
  22. Thanks for useful new ideas for us waiting for newmore soon.

    ReplyDelete
  23. very nice tips great work.
    http://www.facebook.com/pages/Desi-Bateen/474189379298442?ref=hl
    www.desibateen.blogspot.com

    ReplyDelete
  24. hey dear suggest me some new widgets for this web..

    thank yew:)

    http://goo.gl/fTGgK

    ReplyDelete

  25. I think the admin of this site is truly ωorking hагd in fаvor of his sitе, sincе herе every material is quаlity baѕeԁ stuff.
    Feel free to surf my weblog - techedian

    ReplyDelete
  26. Hello everybody, here every one is sharing these kinds of familiarity, thus it's good to read this webpage, and I used to pay a visit this website daily.
    My page :: captain black pipe tobacco review

    ReplyDelete
  27. I just like the helpful information you supply for your articles.

    I will bookmark your blog and take a look at again right here
    regularly. I'm somewhat sure I will learn many new stuff proper here! Good luck for the next!
    My blog post :: Erinmore mixture

    ReplyDelete
  28. That's a very cool idea for my blog, thanks! Definitely would try this soon

    ReplyDelete
  29. thanks
    http://nokiaashagames.blogspot.com/

    ReplyDelete
  30. Whаts up this іs somewhat оf οff topiс but I
    was wanting to know if blogѕ usе WΥSIWΥG editоrs or
    if you have to manually code with HТML. I'm starting a blog soon but have no coding expertise so I wanted to get guidance from someone with experience. Any help would be enormously appreciated!

    Also visit my blog post effective twitter Marketing
    Also visit my web blog - twitter for my business

    ReplyDelete
  31. I'm glad i stumbled upon your post. I've been looking for this gadget for a very long time. Thanks for taking your time out on this

    ReplyDelete
  32. Great post. I used to be checking continuously this blog and
    I am inspired! Extremely useful info specially the final section :
    ) I care for such info much. I was looking for this certain
    info for a very lengthy time. Thank you
    and good luck.
    Take a look at my page :: http://finndinpartner.com/blogs/entry/How-To-Come-Across-Someone-s-Electronic-Mail

    ReplyDelete
  33. great inspiration.. great

    ReplyDelete
  34. Nice post.... thanks for haring it

    ReplyDelete
  35. Your website post site is great!!!
    http://www.ccolumns.com/2012/05/now-day-every-person-using-internet.html
    your blog is good! I'll visit again :)
    God Bless You

    ReplyDelete
  36. Your post seems good as I have added a like box to my blogger blog. Now I need to remove its border. Can you please help me?

    ReplyDelete
  37. thankssssssssss a lottttttttt

    ReplyDelete
  38. Thank's my friend for your informations..

    ReplyDelete
  39. for latest tip and tricks
    http://networkworldz.blogspot.in

    ReplyDelete
  40. The you very much friend. This guide made my blog looking fat better. Keep this up.

    ReplyDelete
  41. thank's man this is a nice blog
    Good work admin

    ReplyDelete
  42. cool bro i like your site this is really good for beginners.
    i am bookmarking my site to yours
    Download Latest PC Games
    and Download Free Softwares

    ReplyDelete
  43. Nice post.... thanks for your information...

    ReplyDelete
  44. I Like it.. Thank you for your information

    ReplyDelete
  45. For blogging tips and tricks, smile, laugh, story, jokes and many more visit this blog

    ReplyDelete
  46. For blogging tips and tricks, smile, laugh, story, jokes and many more visit this blog
    http://honney2bunny.blogspot.in

    ReplyDelete
  47. FoR SMS
    http://readhindisms.blogspot.com/

    ReplyDelete
  48. For learning about blogging and making money online visit www.techisyed.blogspot.com

    ReplyDelete
  49. this post is so useful according me, and i going to try it, thanks for your information, maybe another day i will visit this site. yah,, i have just add your link to my blog, so i can accept your posting fast, thanks brother. this is my blog, may you visit back, thanks
    http://babajoeblog.blogspot.com/

    ReplyDelete
  50. NICE POST HERE IS MY SITE IT WORK FINE http://weglobeentertainment.blogspot.com/

    ReplyDelete
  51. Nice post.... thanks for sharing it...http://www.techkgp.com

    ReplyDelete
  52. This is an amazing and interesting sharing for us. It really helped me I am glad that i visit here.

    Regards
    Android Application Developers

    ReplyDelete
  53. nice post.really work all for me

    ReplyDelete
  54. Modern times when internet has so much facility of gossip and stuff, your articles have awfully refreshed me.
    buy followers

    ReplyDelete
  55. thanks

    http://techforbogra.blogspot.com/

    ReplyDelete
  56. I was just fed up with the usual facebook box which it offers. Its quite dull and boring. Thanks for what you have offered. Let me see if I can configure this on my wordpress website!

    ReplyDelete
  57. I come through many article but in that your article is very technical and wonderful. i got very interesting information in technical ways. thanks for share this :D

    ReplyDelete
  58. Really Very helpful post with broad and clear discussion. Please visit my blog " jobrule.blogspot.com " and see the beauties of blogger widget. i want your positive suggestions to make my blog more better. Thanks in Advance

    ReplyDelete
  59. thanks sir for this, please can you use the latest blogger template to describe this??

    ReplyDelete
  60. I have tried on my site it works perfectly fine .thanks for great post..keep doing the same

    ReplyDelete
  61. I was looking for the same , just installed it on my blog. Keep sharing great content. Cheers!

    ReplyDelete
  62. I think many times i visited your site and its really awesome. I got the solution properly. Finally i am gonna to bookmark your site.

    And one more thing is about your Blog Title. "24 work" its attractive. :)

    ReplyDelete
  63. It's awesome mate. I have seen this type of pop out on many sites and i was looking for one. Thanks a lot buddy.

    ReplyDelete
  64. Wow! What a great post.I just found this blog. I'll definitely be back. Facebook Technology is the best please to buy facebook likes online.

    ReplyDelete
  65. Thanks for the tutorial, it gets peoples attention but its somehow annoying.

    ReplyDelete
  66. very nice was looking for this in a while

    ReplyDelete
  67. i installed this in my blog,but it only active in internet explorer and not loaded in google chrome or firefox .please help me to solve this problem please

    ReplyDelete
  68. Nice post
    Thanks for sharing

    Also visit my blog : http://techfinite.net

    ReplyDelete
  69. how to make the like box which occurs on the start of blog like urs.. plz reply

    ReplyDelete
  70. Pop out applications are really helpful especially if they are not annoying to the users.

    ReplyDelete
  71. Its informative i like it. It's a good article. Its more attractive and effective for people.

    Completed Essays

    ReplyDelete
  72. u r really suo his tperb I like your all post thanks also I use to my blog u can see it there http://beginer2c.blogspot.in

    ReplyDelete
  73. Thanks alot, it helped exposing my page

    ReplyDelete
  74. Great to see all new page design... Because I am getting bored by seeing old traditional look.. I want to try it now.. Thank you.. for sharing..

    ReplyDelete
  75. i ve done it with my blog.u can look bcos its very nice one for more likes also.thanks admin... www.mediafitters.blogspot.com here u can look this widget.

    ReplyDelete
  76. Thanks...I like This site very Much....
    www.serialkeynumbers.blogspot.com

    ReplyDelete
  77. thanks i have used this code on Hollywood Beauties

    ReplyDelete
  78. Thanks mate, i have used this code on two of my blogspot blogs.

    ReplyDelete
  79. thanks man
    http://hackytime.blogspot.in/

    ReplyDelete
  80. Your blogs are easily accessible and quite enlightening so keep doing the amazing work guys. piratage facebook

    ReplyDelete
  81. That's a very good idea, thanks! Definitely would try this soon.

    ReplyDelete
  82. Yeah, thanks for this useful information, i'll try soon

    ReplyDelete
  83. I actually found this blog and that is amazing thing I enjoy reading this easy to understand stuff. Keep it up. infographic design

    ReplyDelete
  84. WOW ! I got confused in between so many choices . Thanks man !
    How to make a blog in blogger

    ReplyDelete
  85. Thanks bro. Another widget added to my blog http://cybertrickzz.blogspot.com/ . bro could u pls visit my blog and help me making it much more better. By Adding widget like dropdown menu its creating prblm in adding it. thanks

    ReplyDelete
  86. Thanks bro. Another widget added to my blog http://cybertrickzz.blogspot.com/ . bro could u pls visit my blog and help me making it much more better. By Adding widget like dropdown menu its creating prblm in adding it. thanks

    ReplyDelete
  87. Thanks. It's working great. Please check my website.

    ReplyDelete
  88. Thanx bro....

    Computer Tips & Hacks
    www.comptrickzs.blogspot.com

    ReplyDelete
  89. I will try to put facebook pop up tab on my blog thanks for share this beneficial information :thanks
    Dubai Expat Abu Dhabi Escort Service

    ReplyDelete
  90. Replies
    1. Thank you so much
      please visit my facebook for the another widget blog

      Delete
  91. Is it possible to make facebook to float?

    ReplyDelete
  92. Thanks..your blog is very cool.....plz check my blog..
    http://comptrickzs.blogspot.in/

    ReplyDelete
  93. It is very informative blog. for more useful info go on

    http://suitablez.blogspot.com/

    http://styleshubs.blogspot.com/

    ReplyDelete
  94. Thank for a great information. I agree with all your points you have made.your blog is very useful for me thanks again.
    Dubai Dames escorts

    ReplyDelete
  95. your post about blogs really useful for me thanks. visit us:- www.dubaidames.com

    ReplyDelete
  96. Thanks for nice blog ,and a useful information.
    Dubai Escorts

    ReplyDelete
  97. I like your thoughts and the stuff you have written so politely.

    Best regards from All Dubai Escorts

    ReplyDelete
  98. Thanks for a nice article .This is very useful for Dubai escort


    ReplyDelete
  99. Thanks your blog is not awesome but fantastic.

    http://www.update29.com/

    ReplyDelete
  100. Thank you very much for sharing.

    ReplyDelete
  101. This is so good I have been looking for something along the line of this and I have found it now I will use it in my Netmart Product Reviews.

    ReplyDelete
  102. This is just getting so good I don't know how many of these widget I have used so far on how to make money website keep up the good work.

    ReplyDelete
  103. Thanks for great tutorial :)
    it's absolutely helpful and also informative

    ReplyDelete
  104. thanks . i use this in my site http://www.alltechbd.tk/

    ReplyDelete
  105. Oh man you done a great job in this article I like it very much. Keep it up.

    ReplyDelete
  106. Thank you! It really worked for me :)

    ReplyDelete
  107. Its really very useful information and awesome. I got the solution properly. Finally i am going to bookmark your site.

    ReplyDelete
  108. Amazing so simple it is. Thanks for sharing.

    ReplyDelete
  109. Thank you so Much.

    Please take a review on mine blog too :

    www.onlyloudest.com

    ReplyDelete
  110. i want to make a website ....... do u help me ?????

    ReplyDelete
  111. I actually found this blog and that is amazing thing I enjoy reading this easy to understand stuff....

    ReplyDelete
  112. The information in this blog is extremely useful for the people.
    buy real facebook likes

    ReplyDelete
  113. very good post love your blog and it's content from SORT OF INFORMATION

    ReplyDelete
  114. I used Facebook Lightbox on my blog and it decreased my pageviews. The method you shared is much better than lightbox. Thanks for sharing.

    ReplyDelete
  115. Thanks, this is really helpful for me to be applied to my blog. I hope you share another great things for us. By the way i have been posted an article about motorcycle in my blog titled yamaha r25. This bike is the real motorsport for you to have. But if you prefer in soccer, then jadwal piala dunia 2014 must be something you've been waiting for. Hopefully you'll be like those post!

    ReplyDelete
  116. i am unable to add facebook pop up . please send code to my blog. i am forwardimg my details.
    my blog sreedharfreelancer.blogspot.com.
    {
    "id": "1536553336",
    "first_name": "Sreedhar",
    "gender": "male",
    "last_name": "Tirunagari",
    "link": "https://www.facebook.com/sreedhar.tirunagari",
    "locale": "en_US",
    "name": "Sreedhar Tirunagari",
    "username": "sreedhar.tirunagari"
    }

    ReplyDelete
  117. Wow, It's working properly on my.

    thanks a lot..! :)

    ReplyDelete
  118. Very nice article i like it very much.

    ReplyDelete
  119. thanks for your tutorial, it was simple step to understand it.

    ReplyDelete
  120. wow it was a easy way to get many facebook likers also. Thanks for sharing

    ReplyDelete
  121. Great Article. it’s Really Helpful and Enjoyable Post for Every Blogger. Thank you very much for Sharing with us. ColourCote

    ReplyDelete
  122. very nice widgets facebook yes .. cool looks good..

    ReplyDelete
  123. Good share,, your information is very nice :D

    ReplyDelete
  124. Is the widget still working? Please do let me know, as I'd like to try it on my blog as well. thanks in advance.

    ReplyDelete
  125. Thanks for share your blog very amazing

    ReplyDelete
  126. Very Nice Post Brother.
    Keep it Up :-)

    Regards : Tuts Point PK

    ReplyDelete
  127. Thanks for the great article. It is great place for bloggers to hangout for great blogger resources. You Rock!!!

    ReplyDelete
  128. Nice widget..gonna install on my blog..Geek Inspiration...thanks buddy

    ReplyDelete
  129. Hello Brother, Nice Posting I will Very Enjoy Your Blog Post.This is help for me and other readers. Good to see You Good posting and Keep more posting www.Firstbloggertricks.com

    ReplyDelete
  130. Don't works the widget, and the demo, please, can't you repair it please, can't you change it, thanks.

    ReplyDelete
  131. Aaape is paryas ke lia bahut bahut dhanyawad

    ReplyDelete
  132. Thanks For Sharing This Website. Really Thanks For This Post.

    kingtricks.com

    ReplyDelete
  133. This post is really useful for me. Thanks a lot for sharing

    ReplyDelete
  134. THANK YOU AND WELCOME

    ReplyDelete
  135. av just put this in my site http://www.themorningtribune.com/

    ReplyDelete
  136. thanks your info ..good job (y)
    follback :)

    http://balikpapannewspastibisa.blogspot.com/

    ReplyDelete
  137. thanks for sharing fb pop up code......but sometimes it will irritate to visitors.

    ReplyDelete
  138. Thanks for sharing fb pop up code.....but sometimes it will irritate to visitors

    ReplyDelete
  139. hey dear suggest me some new widgets for this web..thank yew:)

    good luck (Y)

    ReplyDelete
  140. Thanks Alot For Info . Your Blog Awsome :)

    ReplyDelete
  141. Nice post Admin :)

    http://www.wayforblogging.com

    ReplyDelete
  142. Nice Post,

    Keep writing the same articles. We are glad to be associated with this.

    Regards
    Goa Escorts

    ReplyDelete
  143. Thnx alot Sir its Looking amazing on my blog :) http://seomaseed.blogspot.com/

    ReplyDelete
  144. Thanks guys!! Extremely cooperative post that has helped me a lot….
    facebook instagram

    ReplyDelete
  145. cheers! You have really allured me; I have no words to explain my feelings about your post.
    instagram

    ReplyDelete
  146. nice post thanks for sharing this useful post . Keep posting such posts
    http://www.offlinework.com

    ReplyDelete
  147. this is really great and helpful article for me thanks

    ReplyDelete
  148. That's very cool and I was looking for this for my site! Thank you.

    ReplyDelete
  149. Beautiful, im going to share this!
    http://www.wakeupreview.com/

    ReplyDelete
  150. Facebook is one of the strong source for traffic. Thanks for Sharing this awesome tips.

    ReplyDelete
  151. thanks awesome.. post and information...

    ReplyDelete
  152. This's a great tutorial for newbie. Nice sharing

    ReplyDelete
  153. its a nice widget. I used it for my blog. but i want another facebook like box widget. A widget which will let the facebook like box appeared in the center before opening a website. when we close that box site will be in front of you .
    Beauty
    ~ OBAT KUAT
    ~ obat kuat

    ReplyDelete
  154. have you got html code for floating FB like box to show bottom corner of the page? thanks

    ReplyDelete
  155. This is Very Interesting Tutorial , For Add Facebook Pop Out Like Box On Blogger Website , I like Thank You For Sharing me ,

    Have a Great Ahead ,

    ReplyDelete
  156. I really enjoyed reading your well written article. It looks like you spend a lot of effort and time on your blog.

    ReplyDelete
  157. really helpful facebook box. thanks for sharing it with us..
    also visit: SEO TIP

    ReplyDelete
  158. This is cool idea i will added to my website thank you sir

    ReplyDelete
  159. It's Amazing ,,, Working Great in my Website... See Here :-->> http://sohnapunjab.in

    ReplyDelete

 
Top