How To Add jQuery Popup Boxes To Blogger

Friends now i share a simple trick to make a jQuery popup box in your blogger. After add this code to your  Blogger, button appear. When we hit on that button, a box will popup in your site .Try it now..

• Login to you Blogger dashboard.

• Go to templates, click on Edit HTML option and Proceed.

• Find (Ctrl+F) </head> tag.

• Paste the below  code before </head> tag and save the template.

<span id="preserve822ccda38c6941ad85c68878a85f603b" class="wlWriterPreserve"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ /***************************/ //@Author: Adrian "yEnS" Mato Gondelle //@website: www.yensdesign.com //@email: yensamg@gmail.com //@license: Feel free to use it, but keep this credits please! /***************************/ //SETTING UP OUR POPUP //0 means disabled; 1 means enabled; var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ //LOADING POPUP //Click the button event! $("#button").click(function(){ //centering with css centerPopup(); //load popup loadPopup(); }); //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); } }); }); //]]> </script></span> <style type='text/css'> #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#000000; border:1px solid #cecece; z-index:1; } #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:200px; width:350px; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px; } #popupContact h1{ text-align:left; color:#6FA5FD; font-size:22px; font-weight:700; border-bottom:1px dotted #D3D3D3; padding-bottom:2px; margin-bottom:20px; } #popupContactClose{ font-size:14px; line-height:14px; right:6px; top:4px; position:absolute; color:#6fa5fd; font-weight:700; display:block; } #button{ text-align:center; margin:100px; } </style>

 Find (CTRL+F) height:200px; width:350px;  Change box width and height.

• Save template.

• After that go to Layout.

• click on “ADD A GAGDET".

• Select HTML/Java Scripts.

• Copy and paste below code.

<div id="button"><input type="submit" value="Your-Popup-Button-Name" /></div><div id="popupContact"> <a id="popupContactClose">x</a> <h1>Enter-Popup-Title-Here</h1><p id="contactArea">Enter-Your-Popup-Content-Here </p></div><div id="backgroundPopup"></div>

Replace Your-Popup-Button-Name, Enter-Popup-Title-Here, Enter-Your-Popup-Content-Here with your data.

• Save It and click preview.

Leave a comment…………………….

Posted in: Blogs and Websites, Tricks + Hacks