Bismillah. Alhamdulillah. Dari judul artikelnya saja sudah bisa di tebak, bahwa artikel kali ini akan membahas popup window. Popup window sering kali dianalogikan sebagai cara yang kurang disukai oleh para visitor blog karena popup window yang keluar pada suatu halaman kadang kala membuyarkan konsentrasi mereka saat sedang sibuk mencari-cari sesuatu yang dibutuhkan. Popup Window memang salah satu cara para blogger untuk bisa menyampaikan sesuatu yang di anggap cukup penting atau sekedar untuk menampilkan iklan sebagai sarana untuk menambah penghasilan. Bahkan ada beberapa blogger yang menyamarkan popup window-nya dan ada pula yang menggunakan metode double click to close (dua kali klik untuk menutup) popup window. Terserah para pemilik blog akan menggunakan metode apa, dan kali ini Blogger Tune-Up akan mencoba memberikan satu widget popup window yang bisa di geser.
Fasilitas Draggable Popup Window
- Click & Drag yang berfungsi untuk menggeser jendela
- Min & Max yang berfungsi untuk menampilkan (maximize) atau melipat (minimize) isi popup window
- Close untuk menutup popup window
Kelebihan Draggable Popup Window
- Kompatibel dengan berbagai browser
- Tersusun dari kode-kode yang sangat kecil namun sangat fungsional
- Mudah digunakan
- Open Source
- Desain yang elegan (CSS3) dengan efek yang indah (jQuery)
Kekurangan Draggable Popup Window
- Masih melibatkan tag body
- Tidak menggunakan cokie sehingga popup window akan keluar disetiap load halaman
- Script terbagi dua bagian yaitu JavaScript murni dan script jQuery
- Dan bug-bug lainnya masih di telusuri
- Posisi popup window tidak tetap
Kode CSS Draggable Popup Window
Jika anda pengguna Blogger, tempatkan kode CSS ini diatas tag ]]</b:skin>.ads_popup_window{
left:300px;
top:100px;
width:500px;
position:absolute;
z-index: 100;
padding: 8px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 15px;
-moz-box-shadow: #600 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, Arial,Helvetica,sans-serif;
text-shadow:0 1px 0 #FFFFFF;
}
.popup_heading{
float:left;
width:480px;
cursor:move;
position:relative;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
background: #ff0000;
background: -moz-linear-gradient(center top , red, #454545) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 0, 0, .9)),to(rgba(69, 69, 69, .9)));
border: 1px solid #494949;
color: #FFF;
padding: 4px 2%;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
font-weight: bold;
}
.ads_buttons{
position:absolute;
left:10px;
top:2px;
cursor: pointer;
}
.drag_area{
float:right;
width:92%;
text-align: right;
}
.ads_content{
float:left;
width:96%;
font-size:12px;
padding:2%;
}
.ads_content img {
height:100px;
width:480px;
margin : 4px 0;
}
.ads_buttons {
padding-top: 1px;
}
.left{float:left}
p{float:left; width:100%; padding-left:10px; line-height:18px;}
ul li{float:left; width:95%; padding:5px 0 5px 30px; background:url(images/arrow_small.gif) no-repeat 15px 9px; list-style:none}
ul li a{color:#666; text-decoration:none;}
ul li a:hover{color:#09f; text-decoration:underline}
Kode HTML Draggable Popup Window
Bagi pengguna Blogger, kode HTML ini bisa saja ditempatkan pada Template atau di Gadget HTML/JavaScript, namun harus diperhatikan modifikasi kode penting dibawah ini:
Cari tag <body> lalu tambahkan kode seperti dibawah ini:<body onmousemove="dragWin(event, 'popupWin')">Lalu tambahkan kode dibawah ini dibawah kode diatas atau didalam Gadget HTML/JavaScript:
<div class="ads_popup_window" id="popupWin">
<div class="popup_heading">
<div class="drag_area" onmousedown="mouse_down(event, 'popupWin')" onmouseup="mouse_up(event,'popupWin')">Klik & Drag</div>
<div class="ads_buttons"><img src="images/home.png" class="ads_close" alt="" /> <img src="images/up.png" alt="" id="minWin" /><img src="images/down.png" style="display:none" alt="" id="maxWin" /></div>
</div>
<div class="ads_content">
<!-- Ganti dengan kode Iklan atau informasi disini -->
</div>
<a style="text-decoration: none !important; color: #00f; text-align:right; display: block; font-size: 10px;" href="http://modification-blog.blogspot.com/" target="_blank" title="Ads Popup">Widget by <span style="color: #333;">Blogger</span> <span style="color: #f00;">TuneUp</span></a>
</div>
Kode JavaScript Draggable Popup Window
Tempatkan kode JavaScript dibawah ini diantara tag <head></head> :<script type='text/javascript'>//<![CDATA[Keterangan:
var dragElement = false;
var xDif = 0;
var yDif = 0;
function mouse_down(event, elementName) {
var leftDim = document.getElementById(elementName).offsetLeft;
var topDim = document.getElementById(elementName).offsetTop;
dragElement = true;
xDif = event.clientX - leftDim;
yDif = event.clientY - topDim;
}
function dragWin(event, elementName) {
if (dragElement == true) {
document.getElementById(elementName).style.left = event.clientX - xDif + 'px';
document.getElementById(elementName).style.top = event.clientY - yDif + 'px';
}
}
function mouse_up(event, elementName) {
dragElement = false;
document.getElementById(elementName).style.left = event.clientX - xDif + 'px';
document.getElementById(elementName).style.top = event.clientY - yDif + 'px';
}
$(document).ready(function() {
$(".ads_close").click(function () {
$("#popupWin").hide(200);
});
$("#showWin").click(function () {
$("#popupWin").fadeIn('fast');
});
$("#minWin").click(function () {
$(".ads_content").slideUp("slow");
$(this).hide();
$("#maxWin").show();
});
$("#maxWin").click(function () {
$(".ads_content").slideDown("fast");
$(this).hide();
$("#minWin").show();
});
});
//]]></script>
- Jangan lupa untuk menambahkan framework jQuery agar efek Draggable Popup Window bisa berjalan dengan baik.
- Mohon ma'af tips trik kali ini tidak spesifik dan jelas untuk para pengguna Blogger karena memang script yang dibuat bisa diterapkan untuk berbagai platform website.
