Cara Menampilkan Menu Pop Up

Menu Pop Up merupakan sejenis widget melayang yang penampilnnya muncul ketika blog dibuka. Agar tidak mengganggu, menu tersebut telah dilengkapi dengan tombol close sehingga setelah pengunjung membaca isi dari menu tersebut dapat menutupnnya kembali.
Isi dari menu pop up dapat digunakan untuk menampilkan iklan atau apa saja berupa hal-hal yang penting anda sampaikan kepada pengunjung sebelum pengunjung itu membuka blog secara penuh.
Anda ingin menampilkannya..?? Ikuti langkah-langkahnya dibawah ini :

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. copy kode dibawah ini kemudian paste tepat diatasnya

#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
}

8. Copy kode dibawah ini, kemudian paste tepat dibawah kode </head>

<script src="http://sites.google.com/site/epgstudiosite/javascript/pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>

9. Copy kode dibawah ini, kemudian paste tepat diatas kode </body>

<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/epgstudiosite/image/Close.png" /></a></div>
Masukan isi dari menu pop up yang ingin anda tampilkan
</div>

10. Klik tombol Simpan Template, sekarang lihat blog anda

Menu pop up dapat juga anda tampilkan dengan cara berikut ini :

►  Masuk ke Rancangan pilih Elemen Halaman.
►  Klik Tambah Gadget.
►  klik tanda + pada HTML/Javascript.
►  Copy kode dibawah ini, kemudian paste pada kolom yang tersedia

<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 disini

</center>

<script type="text/javascript">

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

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

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

►  Klik tombol simpan.

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post