Today I'll Teach you how to add a Custom Facebook popup Like Box on Blogger Blog or anywhere. So I think Everyone know That Facebook is the largest Social network on the Earth, and this is the best and the Qualitative way to Getting visitors and Much more for Your Blogs and Sites. So I would like to share with you A Facebook like Box Simple and Good looking. Facebook like a box is the Opportunity to Get More Likes and Community Favor from All over the world. Peoples Like your page on Facebook and get Connected with your blog or a website. Some people's ignore this types of gadgets for they think with avoiding they can clean up their sites but with my experience this is the best things for our websites. Well, guys lets start.
 |
| Screenshot for Popup Box |
Here are the simple five steps for widget to our blog or website:
Website maker who use their web design using editor they'll add this to their experience or techniques well go to add Facebook like box to Your Blog:
First Login to Your Blogger Account.
Select Your Blog (For Example, PostTutorials, etc.)
Then Go To the Layout.
Add a New Widget On any Place.
Add Html Widget.
After going to this position in your blog then Paste this code to the Widget place
Following Facebook box code is here:
<style type='text/css'>#blogtariffFBpop { position:fixed !important; position:absolute; top:-1000px; left:50%; margin:0px 0px 0px -182px; width:330px; height:auto; padding:16px; background:#fff;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.posttutorials.com $('a.bsclose').click(function() { $(this).parent().fadeOut(); return false; }); }); </script><div id='blogtariffFBpop'><!-- Widget by http://posttutorials.com Start --><center><b><a class="Blogtariff">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%2Fposttutorials&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.crackitsoft.blogspot.com End --><a class='bsclose' 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://posttutorials.com/">Kashif Razzaq</a></center></div>Customization :
You can customize this widget more than better from other widgets, and I d not add any of the credits links to the widget soo When You have added a code Successfully change Post Tutorials
with Your Facebook Page Name
Now You Can Add Own Customization in Box:
For Border Image
http://goo.gl/oUKkZj
Replace This Code With Your Border image Anyone You Like.
Change Title Background With Your Website Colors:
For Title Replace this:
#e93842
For Left Border Replace this color with your own:
Black
After Doing All these steps
"Save Template "
moreover, Your Widget Has been Added.
Note: You do not Need To add any Query For this.
SEO KEYWORDS:
Facebook popup like box for blogger with timer
one time Facebook popup like box for blogger
Facebook popup like box widget for blogger
Facebook popup like box WordPress
Facebook popup like box Joomla
Facebook popup like box for website
Facebook popup like box HTML
No comments:
Post a Comment
For any Questions Comment below