Once this widget is installed on your blog, your visitors will be shown a pop up box with the option to like your Facebook page even include Feedburner subscription widget whenever they visit your blog.If your blog visitors use different browsers then don't worry because this widget tested on popular browsers i.e. Chrome, FireFox, internet explorer, and etc.Let's start working on this tutorial.
How To Add JQuery Pop-Up Facebook Like Box To Blogger?
- Go to Blogger Dashboard -> Layout -> Add A Gadget -> Add HTML/Javascript
- Now Copy and Paste The Following Code Inside It
<style>
/* Social Traffic JQuery Pop-Up BlogsDaddy.com
*/
#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;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#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/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ul1OYJAH4j22qYfDFd0I9wuJTc03lrAFMkjrFI7mgZ-A2y2Ibqvb0r1pVEpqJCyWyuI-uEcq2xmip7B8GqqUXdR8pCEs6DVvwIjbOtN2LaHaYjCxFs0me3eVHYu5GxyM0ss0CzYKPq8/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ul1OYJAH4j22qYfDFd0I9wuJTc03lrAFMkjrFI7mgZ-A2y2Ibqvb0r1pVEpqJCyWyuI-uEcq2xmip7B8GqqUXdR8pCEs6DVvwIjbOtN2LaHaYjCxFs0me3eVHYu5GxyM0ss0CzYKPq8/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/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/AVvXsEjwAzBrPhvEUM6VLEbN-wjp0VzuX95sCPaoKOd1xyjNCPizRpCRVz7CWQkUABJCUrXMnPcuSUmilRGKecU42n0FAFB01kZmJc7Rq7DcobMWCDQeJtN8mtcY1nkZ-1tR54cEDtDDsnK_CyY/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NkYtN8DnV5reDGT9fjWTsYTJgxYkGZmwiCNWrgYiTKURlQ2JQ6sXVSIMyDgc0by2TMV432OA_FdvBJWJbluFl85YPURRfcPpjE5OO4e8Q-i3VGYh2th-MpAlq9BAWPIBuqoSnO9coDk/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/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/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;}#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ul1OYJAH4j22qYfDFd0I9wuJTc03lrAFMkjrFI7mgZ-A2y2Ibqvb0r1pVEpqJCyWyuI-uEcq2xmip7B8GqqUXdR8pCEs6DVvwIjbOtN2LaHaYjCxFs0me3eVHYu5GxyM0ss0CzYKPq8/s400/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ul1OYJAH4j22qYfDFd0I9wuJTc03lrAFMkjrFI7mgZ-A2y2Ibqvb0r1pVEpqJCyWyuI-uEcq2xmip7B8GqqUXdR8pCEs6DVvwIjbOtN2LaHaYjCxFs0me3eVHYu5GxyM0ss0CzYKPq8/s400/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/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/AVvXsEjwAzBrPhvEUM6VLEbN-wjp0VzuX95sCPaoKOd1xyjNCPizRpCRVz7CWQkUABJCUrXMnPcuSUmilRGKecU42n0FAFB01kZmJc7Rq7DcobMWCDQeJtN8mtcY1nkZ-1tR54cEDtDDsnK_CyY/s400/loadingbackground.png) no-repeat center center;} #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NkYtN8DnV5reDGT9fjWTsYTJgxYkGZmwiCNWrgYiTKURlQ2JQ6sXVSIMyDgc0by2TMV432OA_FdvBJWJbluFl85YPURRfcPpjE5OO4e8Q-i3VGYh2th-MpAlq9BAWPIBuqoSnO9coDk/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/AVvXsEiwLDNJfcIdThayx3HMOVKz5enDkvSIywOHQ-WoBE341cYwFH0v-zrUHxyGmFYgQTRu0uuU2ee7Lb9iom_r6p5nGwlPqjrRDXxzdltJaOmbGoNmJGSjl83XqU8Gb9JWJeto4lesbxVFjfo/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;} /*-----------------------------------------------------------------------------------*/
/* Social Traffic JQuery Pop-Up BlogsDaddy.com
/*-----------------------------------------------------------------------------------*/
#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: #F66303;
font-size: 18px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
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;
}
/* ---------BD Subscribe NOW Form---------- */
.box-title1 {
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
margin: 10px 0;
}
.enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
.submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/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*30;
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%2FBlogsDaddy&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>
<div class="box-title1 ">
<center>
<h3 style="color:#F66303;">You Can Also Receive Free Email Updates:</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="BlogsDaddy" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
</div>
<!--Please Do Not Remove or Edit Credits -->
<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.blogsdaddy.com">Blogger Widgets</a></p>
</div>
</div>
How to Customize This Widget
- The above text in Blue color can be change to any other title that you like, or you keep it same as default.
- Replace blogsdaddy with your RSS Feed Email Username.
- Replace BlogsDaddy with your own Facebook page username.
- *30 changing this value will refresh the cookies more quickly. By default you users will be able to see this pop out once in 30 days, but if you want to make it more frequent then reduce its value. Remember: This may irritate your visitors so be careful before making any changes.
- Now Click on the save button and now check your blog.
0 comments:
Post a Comment