How To Add pop up Facebook Like Box For Blog and Website

Want to add pop up FB Like Box for your blog or website like this picture below?

To get this widget follow below procedure:

PART 1:

Login to Blogger-->
Design or Template-->
Edit Html Search for the </head> using (ctrl+f)

Now,paste the below code above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> <script src="https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js"></script> <link rel="stylesheet" href="https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dfbpopup.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:"400px", inline:true, href:"#mdfb"}); } }); </script>

Save Template and you are done 50%.



PART 2:

Go to page elements or layout -->
Add a Gadget--> Html/Javascript
Add the below code in Html/java script box

<div style='display:none'> <br /> <div id='subscribe' style='padding:10px; background:#fff;'> <br /> <h3 class="box-title"> Receive all updates via Facebook. Just Click the Like Button Below<center> <p style="line-height:3px;" > ▼</p> </center> </h3> <br /> <center> <br /> <br /> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FAdvance-Tuts%2F495168273846805&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=497064620317951" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe><br /> <br /> <p style=" float:right; margin-right:35px; font-size:9px;" > Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://advancetuts.blogspot.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://advancetuts.blogspot.com">Blogger Widgets</a></p> </div> </div>

Enjoy!