How To Add Stylish Popup Facebook Like Box In Blogger

Thank you for visiting HelpBlogger! If you want to grow your adsense revenue then this is the best blog for you!


To be successful in blogging you should be make your present on social Media. As anyone know Facebook is the largest social website in the world if you are managing the Facebook page for your blog then there is a simple but most powerful way to promote your FacebookPage from your own blog.

If your Facebook page have massive likes then it means when you will share a single post on your Facebook page it will show on the timeline of your all Facebook Page liker's which mean more traffic will come through that post on your blog.
How To Add Stylish Popup Facebook Like Box In Blogger
To promote your Facebook page and get more likes and traffic on your blog here I am sharing the powerful Facebook Popup stylish like box widget for your blog which will execute when any visitor will open your blog and it give the choice to the reader he/she can like your blogofficial Facebook Page.
Live Demo
This is one time show Popup Facebook Like Box widget mean when a user firstly meet this popup box then same time its cookie will be saved in their browser and when next time he/she visit your blog it will not show him/her again.

How to Add Stylish Facebook Popup Like Box to Blogger?

Firstly go to your blogger account
Go to Layout >> Add Gadget >> HTML/Javascript

Paste the following code in the box:
<style type="text/css">
#nblpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:320px;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#nblpop a.bsclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind("load", function() {
// Animate Top
$('#nblpop').animate({top:"50px"}, 1000);
// Widget by www.newbloggerlab.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<br />
<div id="nblpop">
<!-- Widget by www.newbloggerlab.com Start --><br />
<center>
Don't Forget To Join Our Community!
<center>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F
HelpBlogger24&amp;width=292&amp; height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp; show_border=true&amp;header=false" style="border: none; height: 258px; overflow: hidden; width: 292px;"></iframe></center>
<!-- Widget by http://helpblogger24.blogspot.com End -->
<a class="bsclose" href="https://www.blogger.com/blogger.g?blogID=8207929278442401970#">×</a>
</div> </div> 
4. Replace HelpBlogger24 with your Facebook page name.
5. You can change Don't Forget To Join Our Community! with your own message.
6. Widget is installed

Customization
You can use your preferred custom height and width.
In this widget default height is height:320px; and width is width:300px;
You can change it as you like that suits you. But the default works best.
Final WordsThis was a short tutorial on how to add stylish Facebook popup like box to Blogger. We will bring lots of awesome Bogger widgets in coming days. Keep Blogging !

0 comments :

Post a Comment