How to install Facebook pop up widget for blogger ? : code

Facebook pop up widget is a great widget developed for blogs.its coded in CSS ,scripts so you need CSS ,script support, for blogspot.com its just enough.This widgets pops up after your website or blogs gets loaded.

I have also posted the screenshot and sample video of the widget.

For installing this widget you need to follow these steps:

watch this video to see demo of the widget:

STEP 1:

Go to your blogger account ,then select the option layout.

STEP 2:

Select add a gadget link from the layout section.

STEP 3:

A pop up window will appear on click 'add a gadget'.now you have to select 'HTML/JAVA SCRIPT'

gadget.

STEP 4:

Now copy the below code and paste it to the content section .There is no need of entering title. 

<style type='text/css'>

#ajstylesFBpop {

position:fixed !important;

position:absolute;

top:-1000px;

left:50%;

margin:0px 0px 0px -182px;

width:300px;

height:auto;

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;

}

#ajstylesFBpop 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 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() {

// Animate Top

$('#ajstylesFBpop').animate({top:"50px"}, 1000);

// Widget by www.nickcyber.blogspot.com

$('a.bsclose').click(function() {

$(this).parent().fadeOut();

return false;

});

});

</script>

<div id='ajstylesFBpop'>

<!-- Widget by www.nickcyber.blogspot.com Start -->

<center><b><a class="ajstyles">Don't Forget To Join With Our Community</a></b></center>

<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ffreecyberworld&amp;width=292&amp;height=258&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:292px; height:258px;" allowtransparency="true"></iframe></center>

<!-- Widget by www.nickcyber.blogspot.com End -->

<a class='bsclose' href='#'>&times;</a>

<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://www.nickcyber.blogspot.com">Ajstyles</a></center>

</div>

Now replace the highlighted portion with your facebook page ID.

Save it ....and that's it you are done.

If you got any trouble then you can comment below.