Add Pop Up Facebook Like Box with email subscription form To Blogger Blog

You Have seen different Types of Like Boxes on Different Blogs, where whenever you Enter a Pop up Appears and ask you to like the Blog's Facebook page. Sometimes It also irritates visitors because of repeated appearance. So we have different Pop up Like Box which appears only once a time on you blog and you can also Customize it by adding time limit. This is a great widget to increase likes and subscribers. You may see on most sites or blogs which are using Popups to increase there subscribers, fans and followers. As soon as new visitors arrive your blog the popup will be shown to your visitors which can help you to increase likes and subscribers. This widget contains a facebook like box and email subscription form. By using this widget you can increase your facebook likes and your feedburner subscribers. Now this tutorial will show you How to Add Cute jQuery Popup For Facebook Like Box and email subscription To Blogger or WordPress.

Pop-Up Facebook Like Box with email subscription Demo

Live Demo

How To Add Pop-Up Facebook Like Box with email subscription form in Blogger

• Go to Layout and select HTML/Javascript and paste the code shown below

<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/AVvXsEhrbIx0yHT0JW1YQhE_Tx4dSnauduVAzS0XNq9fsmLkHDwPQow_rdV1sPNh4DKYqhhcgycJNX3yXZW8bIO_3tCzj0WA1bREbF45WuKZZf78KV7r8h_fKEJNOYMyKI4MUoZTkA3DkdIibks/s1600/controls.png) no-repeat 0 0;}  #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLvrongpZux5u0fyCwirtBJuapiflO55A12Bhx_vVC7TpmNk7RGwdcgZSl7FnHxhdBsw1OCuaDiSh1UZq1kN1yeB3fKbKNtdWSJjw3datrHsjfhRIBF4ntBCsfB-eQLWotC7BEExXfZEk/s400/border.png) repeat-x top left;}   #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrbIx0yHT0JW1YQhE_Tx4dSnauduVAzS0XNq9fsmLkHDwPQow_rdV1sPNh4DKYqhhcgycJNX3yXZW8bIO_3tCzj0WA1bREbF45WuKZZf78KV7r8h_fKEJNOYMyKI4MUoZTkA3DkdIibks/s1600/controls.png) no-repeat -36px 0;}   #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrbIx0yHT0JW1YQhE_Tx4dSnauduVAzS0XNq9fsmLkHDwPQow_rdV1sPNh4DKYqhhcgycJNX3yXZW8bIO_3tCzj0WA1bREbF45WuKZZf78KV7r8h_fKEJNOYMyKI4MUoZTkA3DkdIibks/s1600/controls.png) no-repeat 0 -32px;}    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLvrongpZux5u0fyCwirtBJuapiflO55A12Bhx_vVC7TpmNk7RGwdcgZSl7FnHxhdBsw1OCuaDiSh1UZq1kN1yeB3fKbKNtdWSJjw3datrHsjfhRIBF4ntBCsfB-eQLWotC7BEExXfZEk/s400/border.png) repeat-x bottom left;}    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrbIx0yHT0JW1YQhE_Tx4dSnauduVAzS0XNq9fsmLkHDwPQow_rdV1sPNh4DKYqhhcgycJNX3yXZW8bIO_3tCzj0WA1bREbF45WuKZZf78KV7r8h_fKEJNOYMyKI4MUoZTkA3DkdIibks/s1600/controls.png) no-repeat -36px -32px;}   #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrbIx0yHT0JW1YQhE_Tx4dSnauduVAzS0XNq9fsmLkHDwPQow_rdV1sPNh4DKYqhhcgycJNX3yXZW8bIO_3tCzj0WA1bREbF45WuKZZf78KV7r8h_fKEJNOYMyKI4MUoZTkA3DkdIibks/s1600/controls.png) repeat-y -175px 0;}   #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrbIx0yHT0JW1YQhE_Tx4dSnauduVAzS0XNq9fsmLkHDwPQow_rdV1sPNh4DKYqhhcgycJNX3yXZW8bIO_3tCzj0WA1bREbF45WuKZZf78KV7r8h_fKEJNOYMyKI4MUoZTkA3DkdIibks/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/AVvXsEhIardGSc4AM_5ypEqgvAyrlPJIymN5DqlpVZ27_RtfbNeieMHpQ5j5bidTYaOAsx6esOd4-1nakOZwUmcvPAdQmMvuKuQCrGQ6hAFGb50LOA0ytI6XqeqTwFQeOLfgSyGjmpp-zwzeWU8/s400/loadingbackground.png) no-repeat center center;}      #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif10DnQneP9S8Oi5CLs9fBloBVt93Jo8IcCT-Pa5kw-YVrvFk5IyHXn4jsOFUFde8ueUu8OZjROqe27oIrrvGGVh_lf1H9XxcMy1OVNyl9nL8Rw7s3meVNloaINDtM3UAFEYH497bndAE/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/AVvXsEhrbIx0yHT0JW1YQhE_Tx4dSnauduVAzS0XNq9fsmLkHDwPQow_rdV1sPNh4DKYqhhcgycJNX3yXZW8bIO_3tCzj0WA1bREbF45WuKZZf78KV7r8h_fKEJNOYMyKI4MUoZTkA3DkdIibks/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: #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;    }   .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.7.1/jquery.min.js'></script><script src="http://js.howtouses.com/blogger/facebookpopupbox.js"></script><script type="text/javascript">jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*15; 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%2Flatesthacking&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;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=latesthack', '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 == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="latesthack" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center></div> <div align='right'>mybloggertools.org</div></div></div>

• Replace latesthacking with your facebook username
• Replace latesthack with your feedburner username
• 15 is the number of days after which it will appear

Like it? Share it.