Add Stylish Facebook Like Box Slider/Pop up Widget For Blogger

Facebook is a great source of traffic if you succeed in building a good list of fans there. To help you out in increasing Facebook likes for your fan page, I have brought a beautiful widget for your Blogger blog which will increase Facebook likes dramatically.
This widget adds a Slider or Pop up box to your Blogger blog. Let’s learn how to add this widget to your Blogger blog. But before adding this widget to your blog, you may like to see it in action.

☻ HOW TO ADD FACEBOOK LIKE BOX POP UP WIDGET IN BLOGGER

1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

]]></b:skin>

3) Now Paste the Code Shown Below just Before it.

#Facebook-popup {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;}
#Facebook-popup a.close {position:absolute;top:-10px;right:-10px;background:#fff;font:bold 16pxArial, 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;}

4) Now Find the Code shown below using [ctrl+F] (Use In HTML Box)

</body>

5) Now Paste the Code Shown Below just Before it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
$(&#39;#Facebook-popup&#39;).animate({top:&quot;50px&quot;}, 1000);
$(&#39;a.close&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='Facebook-popup'>
<center><b>Don't Forget To Join With Our Community</b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=URL HERE&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>
  <a class='close' href='#'><b>x</b></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://pctoolstips.blogspot.in/2013/09/add-stylish-facebook-like-box-sliderpop.html">Pc Tools Tips</a></center>
</div>

6) Customize your setting.Find any word click Ctrl+F.

♥ Replace it URL HERE with your Facebook Fan Page URL.

7) Now Save your template.

Browse More Articles

Tweet

Written by pipspiper

Happy? Funny? Sad? Angry? Feeling depressed? Contemplating to bang your head to the wall? Speak your mind out in the comments box below!