Sunday, 23 September 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.

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('http://2.bp.blogspot.com/-rqTfjVmZa7E/T9YCXvRJHZI/AAAAAAAAA3k/Zf8CoGVPPwY/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('http://3.bp.blogspot.com/-c7xZLjOGXfA/T9YCW2k4SeI/AAAAAAAAA3c/m7QCfq0mbUQ/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.

No comments:

SJ Network Live Stream

SJ Network Daily Motion Live Stream