Scrolling Facebook Popup Like Box Widget for Blogger

We have already got many Facebook Popup widget which just popup every time when we visit pages. And some widgets designed to one time popup style thus a visitors don't feel annoy. Generally we use this widget to get more Facebook likes.

So I just designed this Facebook Popup like box with scrolling effect, that means when you add this widget then it will appear with popup style and it will scroll top to bottom when you just move your mouse from top to bottom.

     Live  Demo

               

And also included a closing option if visitor wish to close it instantly. So this is really bit unique concept and simply nice. In addition you can change the widget color according to your desire. Hope this widget you would like and help to increase more Facebook Fan.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<style type='text/css'>
#ShoutMeTricksFBpop {
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;
}
#ShoutMeTricksFBpop 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
$('#ShoutMeTricksFBpop').animate({top:"50px"}, 1000);
// Widget by www.shoutmetricks.blogspot.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='ShoutMeTricksFBpop'>
<!-- Widget by www.shoutmetricks.blogspot.com Start -->
<center><b><a class="ShoutMeTricks">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%2FMVTricks&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.shoutmetricks.blogspot.com.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://shoutmetricks.blogspot.in/2013/06/scrolling-facebook-popup-like-box.html" >+Get This Widget</a></center>
</div>

Customization

• Change FEFEFE to get different color in widget.
• Change MVTricks this with your facebook id