In this widget Jquery Popup is used by which popup only appears when new or unique visitor comes to your blog. This widget can be used both in Wordpress and Blogger. Lightbox effect is used widely in widgets of Blogger. It looks awesome. It will support you to rise your Facebook Followers prominently and our former version will assuredly surge the total of your RSS subscribers. This helps you to grow up your blog traffic from social media. This Popup Widget is also customizable. In this article, I will show you How to Add a JQuery Pop up Facebook Like Box to your Blogger Blog.
(See Demo Image Here)
How this Popup works?
This popup appears just the once to every fresh visitor. The ip address of the visitor is stored in browser cookie and as the page loads again the widget won’t be called again for the same visitor thus eliminating the chances of bugging regular readers. Because of course it will look weird if the popup appears again and again on every page view. It will appear both on homepage and subpages depending which page the visitor is accessing. I have set the cookie refresh time to 20 days, which means that this light box will appear again for the same visitor after 20 days. We can easily set the number of days to prompt the visitors about your Facebook Fan page. Let’s start adding widget.
Adding Facebook Popup Like Box in Blogger.
STEP-1: Login To Blogger Dashboard.STEP-2: Go to "Layout" tab.
STEP-3: Click on "Add a Gadget".
STEP-4: Select HTML/Javascript option.
STEP-5: Paste the Following Code inside it.
STEP-6: Click on "Save" and Enjoy!
<style>
#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:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZeEPmqR2995T-WB6Eh8z9e2fxmu1yZwEEtVQ6ufgYfLD_njzDBaJ1ioqm8f7WjWcCd7KbAFqNf7YJPP7IsoyhVoepRbDBPAkHfftD3n1E1leJAKYPlf_tT6HfPcOVZU-A_y9GPeOKMM/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWLxA5qLbUBaJimJSPQQtrG342lhus-eVRAxKutYMX_28GUzBXvoQ_zojC2jkV76dbUsdmMc7vmVw4VIwFgK0EOG11ouu89ZHLA-wkiNgnxJE5_GVwexB6ADT7XyTd-fkI2Ab2WilSrU/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZeEPmqR2995T-WB6Eh8z9e2fxmu1yZwEEtVQ6ufgYfLD_njzDBaJ1ioqm8f7WjWcCd7KbAFqNf7YJPP7IsoyhVoepRbDBPAkHfftD3n1E1leJAKYPlf_tT6HfPcOVZU-A_y9GPeOKMM/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZeEPmqR2995T-WB6Eh8z9e2fxmu1yZwEEtVQ6ufgYfLD_njzDBaJ1ioqm8f7WjWcCd7KbAFqNf7YJPP7IsoyhVoepRbDBPAkHfftD3n1E1leJAKYPlf_tT6HfPcOVZU-A_y9GPeOKMM/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWLxA5qLbUBaJimJSPQQtrG342lhus-eVRAxKutYMX_28GUzBXvoQ_zojC2jkV76dbUsdmMc7vmVw4VIwFgK0EOG11ouu89ZHLA-wkiNgnxJE5_GVwexB6ADT7XyTd-fkI2Ab2WilSrU/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZeEPmqR2995T-WB6Eh8z9e2fxmu1yZwEEtVQ6ufgYfLD_njzDBaJ1ioqm8f7WjWcCd7KbAFqNf7YJPP7IsoyhVoepRbDBPAkHfftD3n1E1leJAKYPlf_tT6HfPcOVZU-A_y9GPeOKMM/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZeEPmqR2995T-WB6Eh8z9e2fxmu1yZwEEtVQ6ufgYfLD_njzDBaJ1ioqm8f7WjWcCd7KbAFqNf7YJPP7IsoyhVoepRbDBPAkHfftD3n1E1leJAKYPlf_tT6HfPcOVZU-A_y9GPeOKMM/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZeEPmqR2995T-WB6Eh8z9e2fxmu1yZwEEtVQ6ufgYfLD_njzDBaJ1ioqm8f7WjWcCd7KbAFqNf7YJPP7IsoyhVoepRbDBPAkHfftD3n1E1leJAKYPlf_tT6HfPcOVZU-A_y9GPeOKMM/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU377w88jANSyCsHMrdROExPMH0AOaC2-cyUimzM1zg_4Lv9MKhBHzI9x4TWU9jEJb3wSyXJlArzniESbSONnma2_Pyz2vG5hJ7Crx69JzCvDPLGsf33vvtNAC2A2rtEBytSdbN0upqXQ/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivDdXYQlOEGee9RRZ0na89znH-AfQxgnIk48P8YF0v1HeYfKUn4GiDCJ77fE_ALJrTIj-2-KLZbH23XuMrzDL1jwiO1PtUiNsG5u8zjNxKTQzgJ0AP_sGCLwkBNMdkHnXbjw-rKZnbUu8/s400/loading.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZeEPmqR2995T-WB6Eh8z9e2fxmu1yZwEEtVQ6ufgYfLD_njzDBaJ1ioqm8f7WjWcCd7KbAFqNf7YJPP7IsoyhVoepRbDBPAkHfftD3n1E1leJAKYPlf_tT6HfPcOVZU-A_y9GPeOKMM/s1600/controls.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;}
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #0364F6;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #0364F6;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #0364F6;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://downloads.mybloggertricks.com/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*20;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-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%2FBollywood.HD.Songs&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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.bestbloggertricks.com">Best Blogger Tricks</a></p>
</div>
</div>
Customization:
- Replace Bollywood.HD.Songs with your facebook username.
- (Note: If your Facebook URL is too long and contains numbers then you may first create a branded Facebook username in seconds at Facebook.com/username)
- Drag the widget to anywhere on your right sidebar.
- If you want to prompt the likebox every time the visitor enters your blog then simply replace true with false.
Still if you need any help, feel free to comment below! Your comment will be appreciated!
Allah Hafiz till next post!
0 comments:
Post a Comment