Add Facebook Popup Like Box Widget To Blogger

♠ Posted by at Sunday, May 31, 2015 in ,,,, at Sunday, May 31, 2015
Social bookmarking is a part of SEO. It helps to increase the traffic of your blog. so social bookmarking is the instant way to get more traffic. So this tutorial will help you to increase your fans and branding. 

Follow step by step methods how to add Facebook popup like box widget to blogger.



1) Log in to Blogger account

2) Go to Design >> Page Element / Go to Layout option

3) Click on Add Gadget and Select "HTML/JavaScript"

4) Paste the 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/24propertyhall
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://www.24propertyhall.com">Blogger widget</


5) Scroll down and change - https://www.facebook.com/pages/24propertyhall 

with your Facebook Page Url

6) Save "HTML/Javascript" and your work are done.


If you like my post then share on Facebook, Twitter, Google Plus and LinkedIn.


0 comments:

Post a Comment

Advertisement :