http://bloggertutorialtipstricks.blogspot.com/ 2005-01-01 monthly 0.8 Blogger Tips and Tricks | Blogger Tutorials | Widgets and SEO Tips

Blogger Tips and Tricks is an Online Tutorials Blog For Blogger Tricks, SEO Tips For Bloggers, Gadgets, Widgets and Plugins For Blogspot.

Thursday 11 July 2013

Facebook like popup box for blogger blogs gadget

Well here i am making a Facebook like popup box for blogger which is also nice to install.When you install it it and when someone visit you any blog page it will display on the front which ask you to like the page and its very simple and clean.

Here is screenshot of this widget



So you have to do these steps to install it on your blogger blog


          1.  Go to blogger dashboard  >  Layout
          2.  Now click on  >  Add a gadget
         3.  A box will appear select  >  HTML/Java Script box by scrolling until you find it
          4.  Now paste this code into the box and click on  >  Save




<!-- Widget by www.bloggertutorialtipstricks.blogspot.com start -->
<style type='text/css'>
#MbgadgetFBpop {
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;
}
#MbgadgetFBpop 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
$('#MbgadgetFBpop').animate({top:"50px"}, 1000);
// Widget by www.Mbgadget.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='MbgadgetFBpop'>
<!-- Widget by www.Mbgadget.com Start -->
<center>
<b><a class="Mbgadget">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%2FApk4bd&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.bloggertutorialtipstricks.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 gadget at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href=" http://mbgadget.blogspot.com/2013/04/facebook-like-popup-box-for-blogger.html">Facebook like Box</a></center>
</div>

Remember, At end of this code you will find  Apk4bd words replace it with your own fb like page username.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© Blogger Tips and Tricks | Blogger Tutorials | Widgets and SEO Tips
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top