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 :

1. LANGKAH PERTAMA


1. Login ke Blogger.
2. Masuk ke Rancangan pilih Edit HTML.
3. Cari kode ]]></b:skin>
4. 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;
   }
2. LANGKAH KEDUA
   1. 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>


3. LANGKAH KETIGA
   1. 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>
4. Klik tombol Simpan Template, sekarang lihat blog anda

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

1. Masuk ke Rancangan pilih Elemen Halaman.
2. Klik Tambah Gadget.
3. klik tanda + pada HTML/Javascript.
4. 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>
5. Klik tombol simpan.
6. Lihat blog anda sekarang.