Add JQuery Popup Facebook Like Box With Background Image Widget

Facebook is largest Social Media website and almost all webmasters and bloggers use this website to promote their blogs and sites. And this always proved much helpful in increasing backlinks to their blogs. Ordinary Facebook like boxes cannot boost up your Page likes, so today I am giving you an amazing and beautiful Popup Facebook Likebox enabled with JQuery. When any visitors opens your blog, Like Box pops up and force visitor to like your Page. I already shared two different Facebook popup Like Boxes but today I'm sharing another unique JQuery Popup Facebook Likebox With Background Image for Blogger.

(See Demo Image Here)

How to Add Popup Facebook Likebox in Blogger?

STEP-1. Installing JQuery Plugin:

1. First of all you have to Add jQuery Plugin in your Blog Template.
2. Go To >> Blogger Dashboard >> Template >> Edit HTML.
3. Add the below line of code before </head> tag, and save your template.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

(Note: If your Blog already have this plugin then Ignore this STEP-1 and Jump to STEP-2)

STEP-2. Adding Widget  to Blogger:

1. Login to Blogger Dashboard.
2. Go to Layout >> Add a Gadget >>.
3. Then Paste the Following coding inside it.
4. Then Click on Save and enjoy!

<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/AVvXsEhySCaP0kb5uzr-tty2dOb5a_inTu2QumWEU7KbX-VEQbaj_cRn_QbisYjBeIvA-R-28FRuaB5Use0L2L3bv2H2dU5F1NSfYXuCOA2y8mFwJ3rOqsUrJc3D5EfY_gWVFuQpEKzA8F7dMgma/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/BestBloggerTricks&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://www.bestbloggertricks.com/">BestBloggerTricks</a> | <a style=" font-size:9px;color:#3B78CD;text-decoration:none;" href="http://www.bestbloggertricks.com/2014/03/jquery-popup-facebook-likebox-for-blogger.html">Get This !</a>
</p>
</div>
</div>

Customizations:

• Replace BestBloggerTricks with your Facebook Page Username.
• If you want to show pop-up every time when load page, simply replace true with false.

Congratulations: You have successfully Added JQuery Popup Facebook Likebox With Background Image in you Blog. Still if you have any query/question feel free to ask me via comment box given below. Also Follow us on social media site and share that post with your friends.

Allah Hafiz till next post..