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/AVvXsEjBKeQZqYmY4ecx3jxj8KmTmzGjdwaon9u0WwhJu8MEo5UOekGH3dimas_0SwatenUX6xVRb1Oz3C2VSVgfvaMaN-kgHf7YGfn2m8VStwHFvM9YqHoHHOLoOdwGtXxRVXJUuJZnGQPDxx9T/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 !!!

Categories: tips and trick