Add Facebook JQuery Popup like box with BackGround Image in Blogger

As you know Facebook is the largest social media site in world and billion of people are attached to it. You can share your thoughts and ideas with your friends on Facebook. Specially if you have Blogs or Websites then you must want to be popular on facebook. Facebook is that place where you can have more and more back-links. If you have a Website/Blog without interconnected social media then your Website/Blog may be worthless. So here I'm going to introduce a think that is very useful for your Blog ranking. So that is known as.

Facebook popup Widget:

How it is useful for your Blog/Website? It is useful as a visitor click on your website there will be automatic popup of this widget. If a visitors wants to like your facebook page, he will like the page without doing anything further.

Add this Widget on your Blog:

Firstly open the Blog on which you want to add this widget
Go to > Layout > Add a Gadget
Select HTML/JavaScript after this
Put this code given below

<script src="http://makingdifferent.github.com/blogger-widgets/[www.gj37765.blogspot.com]jquery.colorbox-min.js"></script>
<style type="text/css">
#colorbox, #cboxOverlay, #cboxWrapper{
position:absolute;
top:0;left:0;
z-index:9999;
overflow:hidden;
}
#cboxOverlay{
position:fixed;
width:100%;
height:100%;
}
#cboxMiddleLeft,#cboxBottomLeft{
clear:left;
}
#cboxContent{
position:relative;
}
#cboxLoadedContent{
overflow:auto;
}
#cboxTitle{
margin:0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic{
position:absolute;
top:0;left:0;
width:100%;
}
#cboxPrevious, #cboxNext, #cboxClose,#cboxSlideshow{
cursor:pointer;
}
.cboxPhoto{
float:left;
margin:auto;
border:0;
display:block;
}
.cboxIframe{
width:100%;
height:100%;
display:block;
border:0;
}
#cboxOverlay{
background:#000000;
opacity:0.5 !important;
}
#colorbox{
/*box-shadow*/
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{
width:14px;
height:14px;
background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 0;
}
#cboxTopCenter{
height:14px;
background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x top left;
}
#cboxTopRight{
width:14px;
height:14px;
background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px 0;
}
#cboxBottomLeft{
width:14px;
height:43px;
background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 -32px;
}
#cboxBottomCenter{
height:43px;
background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x bottom left;
}
#cboxBottomRight{
width:14px;
height:43px;
background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px -32px;
}
#cboxMiddleLeft{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -175px 0;
}
#cboxMiddleRight{
width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -211px 0;
}
#cboxContent{
background:#fff;
overflow:visible;
}
#cboxLoadedContent{
margin-bottom:5px;
}
#cboxLoadingOverlay{background:url(http://3.bp.blogspot.com/-7VRvnW_MUSw/TwRGXjXjloI/AAAAAAAACM0/5K-J5jgkxo4/s1600/%255Bwww.gj37765.blogspot.com%255Dloadingbackground.png) no-repeat center center;
}
#cboxLoadingGraphic{background:url(http://3.bp.blogspot.com/-xjj51r2lm2M/TwRGaKezqHI/AAAAAAAACNI/lKX9_-YUUdY/s1600/%255Bwww.gj37765.blogspot.com%255Dloading.gif) no-repeat center center;
}
#cboxTitle{
position:absolute;bottom:-25px;
left:0;
text-align:
center;width:100%;
font-weight:bold;
color:#7C7C7C;
}
#cboxCurrent{
position:absolute;
bottom:-25px;
left:58px;
font-weight:bold;
color:#7C7C7C;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
position:absolute;
bottom:-29px;
background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0px 0px;
width:23px;
height:23px;
text-indent:-9999px;
}
#cboxPrevious{
left:0px;
background-position:-51px -25px;
}
#cboxPrevious.hover{
background-position:-51px 0px;
}
#cboxNext{
left:27px;
background-position:-75px -25px;
}
#cboxNext.hover{
background-position:-75px 0px;
}
#cboxClose{
right:0;
background-position:-100px -25px;
}
#cboxClose.hover{
background-position:-100px 0px;
}
.cboxSlideshow_on #cboxSlideshow{
background-position:-125px 0px;
right:27px;
}
.cboxSlideshow_on #cboxSlideshow.hover{
background-position:-150px 0px;
}
.cboxSlideshow_off #cboxSlideshow{
background-position:-150px -25px;
right:27px;
}
.cboxSlideshow_off #cboxSlideshow.hover{
background-position:-125px 0px;
}
#mdfb{
font:12px/1.2 Arial,Helvetica,san-serif;color:#666;
}
#mdfb a,#mdfb a:hover,#mdfb a:visited{
text-decoration:none;
}
.mdbox-title{
background:#000;
color:#fff;
font-size:20px !important;
font-weight:bold;
margin:10px 0;
border:20px solid #ddd;
/*border-radius*/
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
/*box-shadow*/
-webkit-box-shadow:5px 5px 5px #CCCCCC;
-moz-box-shadow:5px 5px 5px #CCCCCC;
box-shadow:5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px;
font-family:arial !important;
}
.mdbox-tagline{
color:#999;
margin:0;
text-align:center;
}
#mdsubs-container{
padding:35px 0 30px 0;
position:relative;
}a:link,a:visited{
border:none;
}
.demo{
display:none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -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>
<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<center>
<table align="center"background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4cptHG_RVvBXf13QfdM2u1uuLqS-3HkYITDtW5dZJE2Zh5GJ24KLsn1vSi0phf-IHY1VmlFtqvaJ6npKeNfyyPN7YjwZU2adRH-9NL5_8VvpGq4hkSUGhe6QI8Tp4jOA5fMqQHzv9-Vb/s1600/adsense+background+image%2528gj37765.blogspot.com.jpg.png" border="0" height="300" style="width: 505px;">
<tbody>
<tr>
<td height="345" width="505">
<div align="right">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/earnmoneyonline72&width=350&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:250px;" allowtransparency="true">
</iframe></div>
</td>
</tr>
</tbody>
</table>
</center>
<p style=" float:right;margin-right:35px;font-size:9px;">
By <a style=" font-size:9px;color:#3B78CD;text-decoration:none;" href="http://makemoneyonline72.blogspot.com/2015/01/add-facebook-jquery-popup-like-box-with.html">MakeMoneyOnline72</a> | <a style=" font-size:9px;color:#3B78CD;text-decoration:none;" href="http://makemoneyonline72.blogspot.com/2015/01/add-facebook-jquery-popup-like-box-with.html ">Get This !</a>
</p>
</div>
</div>

Recommended: How to Make Money through Facebook.

Customize:

Replace the earnmoneyonline72 with your facebook page name.
If you want every time popup of this widget simply replace true with false

Note: By adding this code on Blog if it doesn't appear, it means there is no JQuery script in your template. So in order to appear this Facebook popup box you must add Jquery script in your template. How? Follow the given steps.