Cara Sederhana Pasang Jendela Pop-up Melayang dengan Kode HTML
Selasa, 15 Desember 2020
Tulis Komentar
![]() |
Tampilan jendela popup. Gambar: editing pribadi |
Jendela popup ini pernah saya terapkan di Blog ini. Saat itu tujuan saya memasang
jendela pop-up untuk mempromosikan barang dagangan saya sendiri berupa
macam-macam sandal buatan lokal (Bandung). Namun karena dirasa mengganggu maka
saya copot jendela popup tersebut.
Dapat dimaklumi bahwa segala jenis promosi iklan yang mengganggu apalagi berupa jendela popup tak disukai oleh para pengunjung blog. Beda halnya jika digunakan untuk keperluan lain seperti pengumuman atau lainnya.
Bagi yang belum mengetahui, jendela pop-up adalah tampilan yang muncul ketika
kita mengakses sebuah situs seperti yang terlihat pada gambar atas. Biasanya
untuk menghilangkannya, cukup klik tanda silang (x) dibagian yang sudah
ditentukan si pembuat.
Jendela popup gunanya bukan hanya untuk mempromosikan suatu produk. Anda bisa
juga memasangnya untuk moment-moment tertentu. Misalkan ketika hari raya idhul
fitri, anda bisa memasangnya dengan tampilan berupa kalimat "Selamat Hari Raya
Idhul Fitri" dan lain-lain.
Bagi anda yang ingin mencoba memasang jendela pop-up, berikut kode HTML-nya:
<style type="text/css">#topbar{position:absolute;padding-left:0%;padding-top:0%;background-color: #999;width: 340px;heigth:280px;visibility: hidden;z-index: 100;}</style> <script type="text/javascript">var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser sessionvar startX = 30 //set x offset of bar in pixelsvar startY = 5 //set y offset of bar in pixelsvar verticalpos="fromtop" //enter "fromtop" or "frombottom"function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function get_cookie(Name) {var search = Name + "="var returnvalue = "";if (document.cookie.length > 0) {offset = document.cookie.indexOf(search)if (offset != -1) {offset += search.lengthend = document.cookie.indexOf(";", offset);if (end == -1) end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end))}}return returnvalue;}function closebar(){if (persistclose)document.cookie="remainclosed=1"document.getElementById("topbar").style.visibility="hidden"}function staticbar(){barheight=document.getElementById("topbar").offsetHeightvar ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;var d = document;function ml(id){var el=d.getElementById(id);if (!persistclose || persistclose && get_cookie("remainclosed")=="")el.style.visibility="visible"if(d.layers)el.style=el;el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};el.x = startX;if (verticalpos=="fromtop")el.y = startY;else{el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;el.y -= startY;}return el;}window.stayTopLeft=function(){if (verticalpos=="fromtop"){var pY = ns ? pageYOffset : iecompattest().scrollTop;ftlObj.y += (pY + startY - ftlObj.y)/8;}else{var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;ftlObj.y += (pY - startY - ftlObj.y)/8;}ftlObj.sP(ftlObj.x, ftlObj.y);setTimeout("stayTopLeft()", 5);}ftlObj = ml("topbar");stayTopLeft();}if (window.addEventListener)window.addEventListener("load", staticbar, false)else if (window.attachEvent)window.attachEvent("onload", staticbar)else if (document.getElementById)window.onload=staticbar</script><div class="clear"></div><div id="topbar"><div style="text-align: right;"><a href="" onclick="closebar(); return false"><img src="https://1.bp.blogspot.com/-w8r2c9UH4V8/X86mH8GW2oI/AAAAAAAADlc/Da7xVb-k2XAkG70LqT5wduVROmxFjJQOQCLcBGAsYHQ/s640/tombolclose.png" width="25"/></a><br/><center><span style="color: white; font-size: small;">Klik (x) untuk menutup</span></center><center><b><span style="color: white;">Jangan lupa! Klo mo beli sandal ama admin aja ya, tersedia sandal Bandung kwalitas premium, 100% dijamin Ori</span></b><br/><center><a href="https://sandalbandung.web.id"><img border="0" data-original-height="648" data-original-width="2024" height="50" src="https://1.bp.blogspot.com/-Z0KOdrcCQsA/X890l3KItwI/AAAAAAAADl8/mJIwUzLlxr8OC0MshyPouEcPz7rw9cYgQCLcBGAsYHQ/w200-h64/AddText_12-08-07.13.23.png" width="150" /></a></center></center></div><div style="background: #999;"></div></div>
Penjelasan:
- Hijau: warna background jendela popup, anda bisa merubah warna dengan cara menggantinya dengan kode warna sesuai selera.
- Merah: ubah dengan kalimat yang anda inginkan.
- Biru: Hyperlink gambar, ganti dengan gambar yang anda inginkan.
Cara pasang:
Caranya sederhana alias tanpa menambahkan CSS yang rumit seperti tutorial 'tetangga sebelah' yang mengharuskan edit melalui layout/template.
Pasang kode HTML tersebut cukup di widget blog: Dasbor > Tata letak > Tambahkan Gadget > HTML/Javascript (tanpa judul) > Simpan.
Selamat mencoba, semoga berhasil.
Belum ada Komentar untuk "Cara Sederhana Pasang Jendela Pop-up Melayang dengan Kode HTML"
Posting Komentar