How to add Scrolling Pop Up Facebook Like Box Widget

How to add Scrolling Pop Up Facebook Like Box Widget

Add a beautiful Facebook pop up like box into your blog. This Facebook pop up widget is scrolling in its fixed position on screen. This is very beautiful and easy to load on blogs. This widget is very useful must add into your blog.

This widget is specially designed for to get more likes on Facebook. This pop up widget has many features but the main feature is that to load it on blogs very easily and fast it has also a scrolling effect. It means that it will move from top to down when you will moving your page from top to bottom.

This widget also have a close button on the right hand side visitors can also close this widget to click on close button. So lets have look the live demo of this widget.

How to add Scrolling Pop Up Facebook Like Box Widget ?

• Open your blogger account.
• Goto on layout click on Add a Gadget then select HTML/JavaScript.
• Copy the below code and paste it HTML/JavaScript.

<style type='text/css'>
#truebloggingtricksFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FFCC00;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;
}
#truebloggingtricksFBpop a.truebloggingtricksclose {
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
$('#truebloggingtricksFBpop').animate({top:"50px"}, 1000);
// Widget by www.truebloggingtricks.com
$('a.truebloggingtricksclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='truebloggingtricksFBpop'>
<!-- Widget by www.truebloggingtricks.com Start -->
<div style="text-align: -webkit-center;">
<span style="font-family: Georgia, Times New Roman, Times, serif;"><span style="font-size: 15px; line-height: 14px;"><b>Don't Forget To Join With Our Community</b></span></span></div>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftruebloggingtricks&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=true&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center>
<!-- Widget by www.truebloggingtricks.com End -->
<a class='truebloggingtricksclose' href='#'>×</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.truebloggingtricks.blogspot.com/2013/08/scrolling-pop-up-facebook-like-box_4.html">True Blogging Tricks</a></center>
</div>

• Replace truebloggingtricks with your facebook usename.
• Change #FFCC00 with your choice to change a widget color.
• Click on save button and you done it.

Now visit to your blog and see Scrolling Pop Up Facebook Like Box.

How to add Scrolling Pop Up Facebook Like Box Widget

Please Give Us Your 1 Minute In Sharing This Post!

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Powered By: chdhrybrothers.blogspot.Com