0 Cara Membuat Kotak POP UP Dengan Tombol

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

popup adalah sebuah fitur yang akan muncul secara tiba tiba ketika tombol di tekan.

dan yang akan di munculkan oleh fitur popup disini anda bisa membuat fitur apa yang akan anda popup.
fitur kotak popup ini bisa anda gunakan untuk menampilkan script apapun,seperti widget share button,ataugoogle friend connect,facebook like box.atau pesan apapun yang mau anda tampilkan dengan fitur popup. agar terlihat lebih keren dan lebih berbeda dari blog yang lain nya.

pertama adalah login dulu ke blog klik-->layout-->edit HTML jangan lupa klik expand.

trus cari kode </head> dengan menggunakan ctrl-F atau F3 biar mempermudah pencarian.

simpan code dibawah ini tepat di atas kode </head>  .

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>
<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>
<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:450px;
width:500px;
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>

yang berwarna biru adalah lebar dan tingginya box, sesuaikan dengan keinginan anda.
lalu save template.
setelah di save, terus buka tata letak dan tambah widget, pilih HTML/JavaScript

<div id="button"><input type="submit" value="nama tombol popup" /></div>

<div id="popupContact">

<a id="popupContactClose">x</a>

<h1>nama title popup</h1>

<p id="contactArea">

code HTML yang mau di tampilkan sebagai popup

</p>
</div>

<div id="backgroundPopup"></div>

untuk yang berwarna merah silahkan anda ganti.

untuk code HTML, silahkan anda masukan code HTML widget anda sendiri,semisal like box, tombol share atau apa saja sesuai keinginan anda.

lalu save, kemudian simpan di tempat mana anda mau menampilkan tombol untuk popup nya.