How To Add JQuery Pop-Up For Facebook Like Box in Blogger





  •  Login to blogger and go to Design-->Edit HTML
  • Search for the tag </head> ( Using CTRL + F )
  • Copy n paste below code just above it


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="https://sites.google.com/site/topbloggerinworld/colorbox-min.js"></script>
<link rel="stylesheet" href="https://sites.google.com/site/topbloggerinworld/fbpopup.css" type="text/css" />
<script type="text/javascript">
    jQuery(document).ready(function(){
       if (document.cookie.indexOf('visited=flase') == -1) {
           var fifteenDays = 1000*60*60*24*30;
           var expires = new Date((new Date()).valueOf() + fifteenDays);
           document.cookie = "visited=true;expires=" + expires.toUTCString();
       $.colorbox({width:"600px", inline:true, href:"#mdfb"});
           }
    });
    </script>
Now save your template
Adding HTML Code

In your blogger --->Design--->Page elements--->Add a gadget
Choose HTML/Javascript From list
Copy n paste below HTML code into it

<div style='display:none'>
       <div id='mdfb' style='padding:10px; background:#fff;'>         
<center>
<table align="center" background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVQMVMxu6D9TPARAUTX9eQNS7_UZc3yesfe_Hq0uC-SUzeZmwXxiJfq6cTk58D6Hi0cL6yrrZcmB4uTU-Pu-9sN3qSipXf6LHSTsKZs3lxI0ilyOhhK61EkmD1KSLbOntvHNxZdR8qMflb/s1600/adsense+background+image%2528linktohow.blogspot.com.jpg.png" border="0" height="300" style="width: 505px;"><tbody>
<tr><td height="345" width="505">
<div align="right">
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> 
<script type="text/javascript">FB.init("32eb3732082b27e7c314feb421a56208");</script> 
<fb:fan profile_id="197027040378524" connections="10" width="360" height="270" css="https://sites.google.com/site/topbloggerinworld/mdfacebook.css"></fb:fan>
</div></td></tr></tbody></table></center>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.Prohackersden.blogspot.com">Blogger Widgets</a></p>
</div></div>

Edit
Replace in above red colored number with your facebook page id
Now save the widget and you have done !!!

Drop Your Comments and Question below :) 
Leave a Comment

0 comments:

Post a Comment