Automatic Timed & Self-Closing Facebook Popup Like Box For Blogger
1. Go to your blogger dashboard>> Template>> Edit Template
2. and add the following jquery link before closing "</head>" or after opening "<head>" tag.
<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 closing b:skin tag.
#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/AVvXsEhPZ39eT_lnPSwoGr5PCsQBpwkSCf5l2uB-hshGSwMkOSu-lXb6Cpw19OK3tP0i4uXVhg9PFeMSPqO2grngaqTwjB6Z0Y43GYHcUkmcfFB-FaZYUWs3aUFKQSnceVh8bQplNJUDuFNGkZU/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. last and final step, just paste the below before closing your </body> tag.
<!-- Facebook POPUP LikeBox With Timer Code Start --><script type='text/javascript'>jQuery(document).ready(function() {function fbpopupdatafunc() {var sec = 60var 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="www.myblogger-tricks.com" rel="nofollow">Get Widget</a></h1><div class="fbpopupdatadata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https://facebook.com/TalhaWebz&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 –>
6. Please change highlighted https://facebook.com/TalhaWebz with your own facebook url.
8.Enjoy it post your reviews
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
ConversionConversion EmoticonEmoticon