Add a Awesome jQuery Pop-Up For Facebook Like Box

Add a Awesome jQuery Pop-Up For Facebook Like Box

I was given you "One Time Email Subscription Pop Up"
In my older post, and now i created for facebook like box
And It's Not One time Open pop-up box , it will be open when load the page , after adding the pop-up to blogger  if you want to show pop-up in only home page , post page , particular page thanclick here to know how to do it and hows it work ..
Before start first see the demo ...

View Demo

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

• First go to Blogger>>Design>>Edit HTML
• Search for the tag </head> ( using ctrl+f)
• Copy n paste below code just above/before </head> tag.

<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>

Now add the HTML code to blogger
it's simple

• Go to Design>>Add a gadget>>
• Choose HTML/Javascript
• Copy n paste below code into it

<div style='display:none'>
       <div id='mdfb' style='padding:10px; background:#fff;'>
            <h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmakingdifferent&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe></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.gj37765.blogspot.com">Blogger Widgets</a></p>
</div>
</div>

Note:- Replace makingdifferent With your Facebook User name

Now you have done !!!