Monday, June 11, 2012

Add Cool Jquery Popup Facebook Like Box To Blogger


Actually Social bookmarking is also part of Seo. It helps
to drive quality traffic to our blog. So,social bookmarking  is
instant way to get get traffic. Facebook is no 1 social network
in the present, So, its helps to get traffic to our website lot.
If we have a fan page with more of fans, it will helps to get
lot of traffic.So this tutorial will help to increase your fan.
When visitors viewing your website. this jquery popup
Facebook like box will appear.it will helps to grow up your
fans.If visitors already liked your fan page,they can close this
popup with clicking close button.Hope this will useful to
bloggers.Follow steps to add it to your blog.Its easy.

Jquery slider Facebook Like box.
Other Facebook widgets.

jquery-like-box

1.  Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.

<style>#simplemodal-overlay{background-color:#aaaaaa;cursor:wait;}/* Container */#simplemodal-container{height:360px;width:360px;background-color:#fff;border:5px solid #000000;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;}
#simplemodal-container a.modalCloseImg{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg401DlJuXyRUrTRbU19_ZJB0Sphl-dkaS-OBcMgcyqZfWzklcdyNyqrtwAD2VyLWyVrJ2ymzzp2TUsg190rboB_jHNVkSyJMtOufsEZe74WaXIb6pic7ODRLWdYSzwEGgxkAPPRXArfBk/s1600/Close-2-icon.png') no-repeat;width:40px;height:60px;display:inline;z-index:3200;position:absolute;top:-15px;left:350px;cursor:pointer;}
#simplemodal-container a.modalCloseImg:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5HQu1Qr_4tdL4TXErBlQBl4MQ0kf5m-N4wgPVNjCv8b5_s6L-NLmEDBga8uP2Q4KHyIbO017HztP3UxauHaHjdaj7zvWUAknNQuIOCPb_bDGtDCJl5XOEAWEjSvHOskBbssW3mkw4C_o/s1600/Close-2-icon+copy.png') no-repeat;width:40px;height:60px;display:inline;z-index:3200;position:absolute;top:-15px;left:350px;cursor:pointer;}
#simplemodal-container #basicModalContent{padding:8px;}#btfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666;}#btfb a,#btfb a:hover,#btfb a:visited{text-decoration:none;}
.btbox-title{background:#16b7f4;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:2px solid #ddd;border: 1px solid 
#939191;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;line-height:15px;font-family:arial !important;}
.btbox-tagline{color:#999;margin:0;text-align:center;}#btsubs-container{padding:35px 0 30px 0;position:relative;}a:link, a:visited{border:none;}.demo{display:none;}</style>
<script type="text/javascript" src="http://bloggertrixx.googlecode.com/files/jquery2.js"></script>
<script type="text/javascript" src="http://bloggertrixx.googlecode.com/files/jquery.btrix.js"></script>
<script type="text/javascript" src="http://bloggertrixx.googlecode.com/files/bloggertrix1.js"></script><div style='display:none'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id='exit_content' style='padding:10px;'> <h3 class="btbox-title">
 <center>Like Us On Facebook</center>
<p style="line-height:3px;margin-top:-10px;" ></p></h3>
<center><div class="fb-like-box" 
data-href="https://www.facebook.com/pages/Blogger-Trix/110888928990749" 
data-width="292" data-show-faces="true" data-stream="false" data-header="false"></div></center><p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:5px; color:#3B78CD; text-decoration:none;" href="http://bloggertrix.com">Blogger widget</a> | </p></div></div>

* Scroll Down and Change
                                      
https://www.facebook.com/pages/Blogger-Trix/110888928990749


    With your fan page URL

4. Save HTML/Javascript. you are done.

14 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. @shikhil sharma
    Its come up,when you move your courser top of your blog.You can try timer like box below.

    Jquery Popup Facebook Like Box With Timer For Blogger

    ReplyDelete
  3. nice post tried this for my gaming website
    www.coizome.blogspot.in

    ReplyDelete
  4. It's also doesn't work for me.But I really like that widget.Please do u try me for again?

    ReplyDelete
    Replies
    1. yeh, you can try. if you have a problem regarding this,
      just contact me..

      Delete
  5. Doesnt work for me, whats the problem?

    http://www.yourdailypornmovies.blogspot.com

    ReplyDelete
  6. Nice Post
    http://fikrismea.blospot.com/

    ReplyDelete
  7. how do we control that this pop out appears many times

    ReplyDelete