Monday, 30 January 2012

Jquery Pop Up Facebook Like Box For Blogger - V3




Please Note - This is V3 of pop up facebook like box not custom facebook like box.
Facebook plays most important role in increasing traffic on your blog.You will watch facebook like box on every blog.After posting many widgets about facebook now I am posting a pop up widget for facebook like box with cool background image.Here I am giving a list of some facebook widgets.Actually this widget code was generated by Nitin Mehta - Making Different. So thanks to him...


List Of Some Facebook Widgets



How To Add Jquery Pop Up Like Box ?



Here are three steps to add Jquery pop up like box to your blog

Step 1 - Adding the Jquery plugin  
(Note - Ignore this step if you have already added the Jquery plugin)


  • Go to Blogger Dashoard > Design > Edit HTML.
  • Search for </head> tag and add below code just before it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

Step 2 -Adding The Scripts
  • Go to  Blogger Dashoard > Design > Edit HTML.
  • Search for </head> tag and add below code just before/above it.

<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:"600px", inline:true, href:"#mdfb"});
}
});
</script>


Step 3 - Adding The HTML.
  • Now Go to Edit Layout > Add A Gadget > HTML/JavaScript
  • Paste below code and save it
<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#000;'>        
<center>
<table align="center" background="http://4.bp.blogspot.com/-1jHU--_SEOg/Tx0a68EkOWI/AAAAAAAACdc/bzFCJ3SLibQ/s1600/md123.JPG" border="0"  style="width: 465px; height: 300px; "><tbody>
<tr><td height="330" width="465">
<div align="left">
<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="153138708123803" connections="10" width="330" height="300" css="https://gj37765.googlecode.com/svn/trunk/html/mddemo/[www.gj37765.blogspot.com]fblikeboxwithbgimg.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.btsnts.blogspot.com">Blogger Widgets</a></p>
</div></div>


That's it.


7 Comments : Read Them Below Or Add One

  1. its not working on my blog
    http://premium-area.blogspot.com

    ReplyDelete
  2. Neither on mine. Maybe I found a mistake in the 5th row of the second step script code 'visited=flase'. Unfortunately it doesn't work anyway

    ReplyDelete
    Replies
    1. Thanks man,I will update the tutorial soon.I didn't checked it yet because I didn't created this gadget but I am working on it and I will update it soon.

      Delete
  3. its not working on my blog
    http://wwwmohsinjutt.blogspot.com

    ReplyDelete
  4. Not Found

    The requested URL /svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js was not found on this server.

    ReplyDelete

If you want to be informed about any replies then click on "Subscribe by email" (present below of comment box).PLEASE DO NOT SPAM