Membuat Kotak Iklan Melayang ( Pop-up ) di Blogger

Pop-up yang muncul di halaman blog ini adalah DEMO dari javascript yang terlampir.

Apa itu Pop-Up?

Secara teknis, pop-up adalah sebuah area tampilan antarmuka pengguna grafis (GUI) yang berupa jendela kecil, yang akan muncul secara tiba-tiba di latar depan antarmuka visual saat melakukan sesuatu, seperti klik sesuatu atau masuk ke halaman tertentu yang kalian pilih.

Pop-up iklan adalah salah satu dari sekian iklan online atau iklan digital yang dapat digunakan sebagai sarana untuk mempromosikan suatu barang, jasa, atau brand dari perusahaan. Pada beberapa artikel tips dan trik, kadang pengguna menggunakan istilah pop-up untuk menggambarkan menu pilihan yang baru muncul.

Kegunaan Pop-up

Pop-up sebenarnya memiliki beberapa kegunaan dan bisa digunakan untuk melakukan banyak hal termasuk di antaranya seperti

1. Pop-Up Menu

Saat melakukan klik kanan di Windows pada halaman utama, Anda akan mendapatkan beberapa pilihan dalam sebuah jendela kecil, seperti opsi Refresh, View, New, Display Settings, dan Personalize. Jendela inilah yang disebut dengan pop-up menu, yakni sebuah pop-up yang berisi elemen-elemen menu yang berfungsi untuk membuat pengguna dapat berinteraksi dengan perangkat lainnya.

2. Pop-Up Dialog Box 

Dialog box ini memiliki fungsi memberikan peringatan kepada pengguna, seperti misalnya saat pengguna mendapatkan larangan maupun melakukan sebuah kesalahan. Sebagai contohnya, saat menutup aplikasi Microsoft Word, Anda pasti akan menjumpai jendela kecil yang muncul berupa konfirmasi untuk menyimpan file, membatalkan aksi, atau melanjutkan tanpa menyimpannya.

3. Pop-Up Ads (Iklan)

Pop-up ads juga muncul di situs website tertentu jika telah terakses. Dengan kehadiran pop-up ads tersebut mengakibatkan para pengguna tidak sadar telah mengakses situs tersebut secara otomatis. Hal itu membuat pengguna harus mengikuti langkah tersebut secara terpaksa untuk melakukan aksi terhadap pesan yang muncul pada tampilan layar yang menutupi halaman yang sudah terbuka dengan iklan atau penawaran.

4. Pop-Up Graphics 

Selain itu, istilah pop-up biasanya juga  digunakan pada video game, dengan sebutan Pop-Up Graphics. Istilah ini diasumsikan pada sebuah fenomena yang terkait dengan jarak penarikan secara terbatas dalam video game beresolusi 3D. 

5. Pop-Up sebagai Notifikasi 

Pop-up dapat menampilkan notifikasi atau pemberitahuan secara khusus yang mengambang pada layar desktop PC atau smartphone Android agar pengguna dapat melakukan suatu aksi berupa memilih, mencentang, atau melihat info pada layar tersebut. 

6. Sebagai Alert System 

Pop-up juga bisa menjadi alert system yang menunjukkan kepemilikan dari desktop PC atau smartphone Android jika mengalami masalah, misalnya saat mengalami crash pada aplikasi atau tidak berjalan dengan dengan normal, maka pop-up akan muncul untuk memberitahukan bahwa aplikasi sedang berhenti atau ada peringatan lainnya.

Membuat iklan Pop-up 

Jadi, pop-up sebenarnya bisa di fungsikan sebagai apa saja sesuai kebutuhan, fungsinya tidak semata-mata hanya sebagai menampilkan iklan saja. Tetapi kali ini saya akan membahas cara membuat iklan pop-up di blogger menggunakan bahasa javascript.

Oke, sekarang tinggal ikuti langkah-langkah berikut

1. Buka Dashboard Blogger Kalian
2. Langsung Pergi Ke Tata Letak
3. Tambahkan Gadget (Terserah Anda ingin meletakkan nya di posisi mana, karena hasilnya akan tetap sama)
4. Pilih HTML/JAVASCRIPT
5. Paste  kode javascript dibawah ini didalam box Gadget.

 <style type="text/css">  
 #topbar{  
 position:absolute;  
 padding-left:0%;padding-top:0%;  
 background-color: #fff;  
 width: 350px;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 session  
 var startX = 30 //set x offset of bar in pixels  
 var startY = 5 //set y offset of bar in pixels  
 var 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.length  
 end = 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").offsetHeight  
 var 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://2.bp.blogspot.com/-LulegGbMOGg/WtXNoBj4ypI/AAAAAAAAC0A/mtrYswv6iTw6QD2FiGgrhAniP3N6XNMnQCLcBGAs/s1600/close2-24.png" alt="close"/></a>  
 <br/><center>DEMO Pop-up</center><center>Selamat Datang di blog-15minutes.blogspot.com</center><br/>  
 </div>  
 <div style="background: #fff;">  
 </div></div>  

Setelah itu simpan dan lihat hasilnya. 

Script diatas juga bisa Anda rubah sesuai selera dan kebutuhan.

Semoga bermanfaat.

DEMO Pop-upSelamat Datang di Xhref.blogspot.com