Automatic Timed & Self-Closing JQUERY Facebook Popup Like Box For Blogger
Often the goal for a website is to generate sales, increase
subscription rates, and develop loyal readership. Internet marketers are more
familiar to this principle than any others are working online, and part of
their success formula is the use of forceful and effective call to action,
which is oftentimes contained in a pop-up box or lightbox. Creating your own pop-ups for your website is
not an easy task. You need to have knowledge of programming to be able to
generate the codes that define your intended pop-up.
The plugin depends on jQuery, so be sure to include the library. Any
recent jQuery version will do. We include plug-in file very similar to jQuery
library file in the <head> of the document.
1. Go to your blogger dashboard>> Template>> Edit Template
2.hit Ctrl+F and find </head> and past the following jquery code before </head>.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
3. again find the following code in your template.
]]></b:skin>
4. and paste the below code before/above ]]></b:skin>..
/*css for fbpopup*/
#fbpopupdata {
background-color: none;
position:absolute;
z-index: 9999;
display: none;
padding: 0;
border: 10px solid #446c95;
-webkit-background-clip: padding-box;
/* for Safari */
background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
width: 420px;
height: 300;
overflow: auto;
left:50% !important;
margin-left:-220px;
margin-top:auto;
box-shadow: inset 0 1px rgba(0,0,0,0.1);
}
#fbpopupdata span {
font-size: 12px !important;
font-weight: normal !important;
}
#fbpopupdata h1 {
background: #446c95 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNvq16cvExAtzJfA6xxVt6aDUDhzMVNlRPBv5jUdFvMGPtpaVunwj_3SD0RWYDt2vyJlA_p5NOQR4n2zVCGn_ezBwWOLXWo_H7hJZbdH1NRFnm0ZjyHhxwXARN4gXu5eIBkf09Uw1RqjQ/s1600/aktechz-fb-lock.png) 98% 30% no-repeat;
border: 0px solid #3b5998 !important;
color: #FFF !important;
font-size: 20px !important;
font-weight: 700 !important;
padding: 5px !important;
margin: 0 0 10px 0 !important;
font-family: arial !important;
overflow: hidden !important;
}
.fbpopupdatadata {
font-size: 12px !important;
font-weight: normal !important;
height: 275px !important;
padding: 1px !important;
background: #fff !important;
border-bottom: 0px solid #ddd;
overflow: show !important;
}
#fbpopupdatafooter {
text-align: right;
font-size:12px;
background: #F2F2F2 !important;
height: auto !important;
padding: 10px !important;
overflow: hidden !important;
}
#fbpopupdatafooter p {
text-align: right;
font-size:12px;
}
#fbpopupdataclose {
float: right;
background-color: #446c95 !important;
border: 0px solid #ccc !important;
color: #fff !important;
font-weight: normal !important;
padding: 5px 35px !important;
text-decoration: none !important;
display: inline-block !important;
font-family: arial !important;
outline: none !important;
font-size: 12px !important;
margin: 0px !important;
box-shadow: inset 0 1px rgba(0,0,0,0.1);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
}
5. and last and final step,find the </body> by pressing ctrl+f and just paste the below code, before </body> tag.
<!-- Facebook POPUP LikeBox With Timer Code Start --> <script type='text/javascript'> jQuery(document).ready(function() { function fbpopupdatafunc() { var sec = 60 var timer = setInterval(function() { $("#fbpopupdatafooter span").text(sec--); if (sec == 0) { $("#fbpopupdata").fadeOut("slow"); clearInterval(timer); } },1000); var fbpopupdatawindow = jQuery(window).height(); var fbpopupdatadiv = jQuery("#fbpopupdata").height(); var fbpopupdatatop = jQuery(window).scrollTop()+50; jQuery("#fbpopupdata").css({"top":fbpopupdatatop});} jQuery(window).fadeIn(fbpopupdatafunc).resize(fbpopupdatafunc) //alert(jQuery.cookie('sreqshown')); //var fbpopupdataww = jQuery(window).width(); //var fbpopupdatawww = jQuery("#fbpopupdata").width(); //var fbpopupdataleft = (fbpopupdataww-fbpopupdatawww)/2; var fbpopupdataleft = 500; //var fbpopupdatawindow = jQuery(window).height(); //var fbpopupdatadiv = jQuery("#fbpopupdata").height(); //var fbpopupdatatop = (jQuery(window).scrollTop()+fbpopupdatawindow-fbpopupdatadiv) / 2; jQuery("#fbpopupdata").animate({opacity: "1", left: "0" , left: fbpopupdataleft}, 0).show(); jQuery("#fbpopupdataclose").click(function() { jQuery("#fbpopupdata").animate({opacity: "0", left: "-5000000"}, 1000).show();});}); </script> <div id="fbpopupdata"> <h1>Join Us On Facebook <a style="font-size:12px; color: white; float:right; margin-right: 15px; text-align: inherit; text-decoration: none;" href="http://androidgeekhub.blogspot.com" rel="nofollow" >Get Widget</a></h1> <div class="fbpopupdatadata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F/androidgeekhub&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:show; width:400px; height:250px;" allowtransparency="true"></iframe></center></div><div id="fbpopupdatafooter">Please Wait <span>60</span> Seconds<br/><a href="wwww.myblogger-tricks.com" target="_blank" id="fbpopupdataclose" onclick="return false;">Close X</a></div></div> <!-- Facebook POPUP LikeBox With Timer Code End –>
Okay we've done it
Please change highlighted text with your own Blogger and FB urls.
Also see:- Here is Another type of facebook popup box.
Please change highlighted text with your own Blogger and FB urls.
Also see:- Here is Another type of facebook popup box.
