Friday, September 27, 2013

How to Add a Facebook Popup Like box to Blogger/Blog that scrolls down.

Another cool thing that will power up your facebook likes, is here. I have been seeing so many other bloggers doing this and I liked it, so I thought why not do it as well. So here I have decided to show you on how I added a pop up Facebook like box on my blog. I hope that you will find it easy to do so. But make sure that before you like it to your Facebook  ensure that you have an easy url that leads you your page. If you don't create a url by going here CLICK HERE and give your Facebook page its user name and a good url.

Now lets see how we can get this done.

This is how it will pop up. But this one usually slides with the pages.



How to Add ‘Tech-Scrolling Facebook Popup Like box widget for blogger?
Sign into your blogger account
Select ‘Layout’ link tab
Click on ‘Add a Gadget’ and select ‘HTML/Javascript’ link tab widget
Now copy the below code and paste in it.

<style type='text/css'>
#blogtariffFBpop {
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;
}
#blogtariffFBpop 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
$('#blogtariffFBpop').animate({top:"50px"}, 1000);
// Widget by www.blogtariff.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='blogtariffFBpop'>
<!-- Widget by www.blogtariff.com Start -->
<center><b><a class="Blogtariff">Don't Forget To Join me on my page </a></b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fkingfaznelcaseb&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.blogtariff.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.whispernaija.com/2013/05/how-to-add-facbook-popup-like-box.html">whisperNaija</a></center>
</div>

HOW YOU CAN TURN IT TO YOUR

Replace FEFEFE color code with your choice color code by using our Color Chart
Replace kingfaznelcaseb word with your facebook page ID
- See more at: http://www.whispernaija.com/2013/05/how-to-add-facbook-popup-like-box.html#sthash.nWONSgI0.dpuf 

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Favorites More