Cara Membuat Menu Pop Up Yang Praktis

Cara membuat menu pop up. Menu Pop Up yaitu widget melayang yang muncul ketika blog dibuka. Menu Pop Up ini dilengkapi dengan tombol close sehingga setelah pengunjung membaca isi dari menu tersebut dapat menutupnnya kembali, sehingga tidak mengganggu. Isi dari menu pop up dapat digunakan untuk menampilkan iklan atau apa saja hal-hal yang penting anda sampaikan kepada pengunjung sebelum pengunjung membuka blog secara penuh.
Anda ingin melihat contohnya ? Berhubung saya tidak memasang pop up ini, dulu pernah sudah saya hapus, maka lihat saja pop up Fansfacebook di blog teman saya klik disini.

Sudah selesai lihatnya? Baik kalau berminat menampilkannya, silahkan ikuti cara-caranya berikut ini.

1. Masuk ke Rancangan ----> pilih tata letak
2. Tambah gadget
3. Pada jendela baru scroll ke bawah lalu temukan html/javascript 
4. Copy kode di bawah ini dan pastekan ke kolom yang tersedia

Ini dia kodenya :


<style type="text/css">

#gb{

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbcontent{

float:right;

border:2px solid #000000;

background:#ffffff;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">

<a href="javascript:showHideGB()">

.:[Close][Klik 2x]:.

</a>

</div>

<center>

Masukan isi menu pop up Anda disini

</center>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.center = (30-gb.offsetWidth).toString() + "px";

</script></div></div>

5. Kalau sudah, klik simpan, dan lihat blog Anda !

Catatan : Sebenarnya ada juga cara yang lain, yaitu dengan cara memasang kode di dalam template/edit template. Di waktu yang lain insya Allah akan diposting. Selamat mencoba, semoga bermanfaat !