Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

Sliding / Slipping Down (Popup) Facebook Like Blogger Widget

1 min read

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 slipping or sliding down popup 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. View demo here!

facebook-like-widget-blogger

Adding FB Like Box to Blogger

  • Sign-in to your Blogger blog’s dashboard and go to its “Template” section. Then edit its HTML
  • In HTML editor, press Ctrl+F and find </head> tag and then paste below provided code just above </head>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#supportiveFB').animate({top:"50px"}, 1000);
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
  • Now again pressĀ  Ctrl+F and find ]]></b:skin>. After finding this tag, paste below CSS code just above ]]></b:skin>
#supportiveFB {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#ECF3F1;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;
}
#supportiveFB 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;
}
  • Save your template and close HTML editor
  • Now go to your blog’s layout and add a new gadget as HTML/JavaScript with below provided code
<div id='supportiveFB'>
<!-- Widget by www.supportivehands.net Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F[highlight]itcongress[/highlight]&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:250px; height:258px;" allowtransparency="true"></iframe></center>
<!-- Widget by www.supportivehands.net 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=" https://supportivehands.net/popup-sliding-down-facebook-like-blogger-widget/">FBPopup</a></center>
</div>
  • Change the highlighted value in above provided code with your Facebook fan page ID
  • Save layout of your blog and visit your blog to see the widget in action!

This was the short tutorial for adding this attractive sliding/slipping down Facebook like widget to your Blogger blog. If you didn’t understand the tutorial or need any additional help, you can ask me in comments.

Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

How to Add “Contact Me” Form and Sticky Button…

Google’s Blogger is though providing a brilliant free blog hosting, but some limitations are also there on Blogger. One of these limitations is, Blogger...
Rehmat Alam
2 min read

Attractive Floating Social Media Buttons Widget for Blogger

Are you searching for a social media profiles widget for your blogspot blog? If yes, then my recommended social media widget will surely make...
Rehmat Alam
2 min read

Related Posts with Thumbnails Widget for Blogger Blogs

This widget will display related posts under each post in your Blogger blog. The uniqueness of this widget is that it displays related suggestions...
Rehmat Alam
1 min read

Leave a Reply

Your email address will not be published. Required fields are marked *