Facebook Like PopUp Box For Blogger


Facebook Is A Most Popular Social Website And That's Why we Can Use For Our Blogs And Products For Sharing With Others, Also Facebook Is Allow To Make Page And Group For Our Blogs And Websites So We Can Use Easily This Products And Features Of Facebook To Make Good Social Visibility Of Our Blog From All Social Networks.

Why I Should Use PopUp Box On Blog ?

There Are Many Reasons Why We Should Use PopUp Like Box, First Of All We Can Get Big Audience Means Visitors From Facebook PopUp Box Because Any Visitor Come To Our Website The PopUp Will Come And User Can Easily Like Our Facebook Page From That So No Need For Any Advertising For Our Products And Posts Or Pages For Our Blog, In Next Point User Can See How Much Blog Popular By Our Facebook Like. So We Must Have To Use Facebook PopUp Like Box On Blogs And Websites.


Advantages And Disadvantages Of  Facebook PopUp Like Box :-

There Are Many Advantages As I Mention Above But Also Some Disadvantages Of This PopUp Like, Some Person Make This PopUp Visible On All Pages Of Blogs It Will Irritate Blog Readers And In Other Some Bloggers Use Timing On Popup So This Is Most Irritate Widget For Readers And It Will Cause Less Visits On Blog.


Before Adding Widget Let's See Demo Of This Widget On CoolBlogTricks Lab,
  Demo

So Now Let's See How To Install(Add) This Widget On Blogger Blogs :-

Step 1 :- Open "Blogger.com" Open Your Blog "Dashboard"--> Choose "Layout".
Facebook Like PopUp Box For Blogger

Step 2 :- In Layout Click On "Add A Gadget" Scroll Down And Click On "HTML/JavaScript".

Step 3 :- Copy Below Code And Paste In "HTML/JavaScript" [Changes Must Be Done Before Paste Code Which Is After Code].

===========================================================

<style type='text/css'>
#CBTPopUp {
position:fixed !important;
position:absolute;
top:-999px;
left:49%;
margin:0px 0px 0px -181px;
width:299px;
height:auto;
padding:17px;
background:#ffffff;font:normal Dosis, Georgia, Serif;
color:#111111;
border:1.5px solid #333333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.5);
box-shadow:0px 1px 2px rgba(0,0,0,0.3);
-webkit-border-radius:10.1px;
-moz-border-radius:10.1px;
border-radius:10.1px;
}
#CBTPopUp a.bsclose {
position:absolute;
top:-10.1px;
right:-10.1px;
background:#ffffff;
font:bold 17px Arial, Sans-Serif;
text-decoration:none;
line-height:21px;
width:21px;
text-align:center;
color:#000000;
border:2px solid #333333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.5);
box-shadow:0px 1px 2px rgba(0,0,0,0.5);
-webkit-border-radius:21px;
-moz-border-radius:21px;
border-radius:24px;
cursor:pointer;
}
</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
$('#CBTPopUp').animate({top:"49px"}, 999);
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='CBTPopUp'>
<!--Start -->
<center><b><a class="Tecno Park">Must Join With Our Community</a></b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F
tecnoparks&amp;width=291&amp;height=259&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:291px; height:259px;" allowTransparency="true"></iframe></center>
<!--End -->
<a class='bsclose' href='#'>&times;</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000000; text-decoration:none;">Get This Widget At </span> <a target='_blank' style="font-size:xx-small; color:#3976cc; text-decoration:none;"
href="
http://xpresstune.blogspot.com/2013/07/facebook-like-popup-box-for-blogger.html">Tecno Prak</a></center></div>
===========================================================
Note :-  You Have To Change This Code,
  • Change Red  Section With Your Facebook Page Username.

 Step 4 :- Now Just Have To "Save" Gadget And See Your Blog Now.
Share this article :

2 Comments:

  1. WOW, I searched for this EVERYWHERE, I tried other codes and it didn't work, I don't know why :/ I was giving up hope and thought to use this last one! IT WORKS!!!!!!!!!!!!!!!!!!!!!!!! :) :D Thank you for posting it ^_^

    My Blog: http://thestarlight92.blogspot.com/

    ReplyDelete