Menampilkan Menu Pop Up pada Blog

Menu Pop Up merupakan sejenis widget melayang yang penampilnnya muncul ketika blog Anda dibuka. Agar tidak mengganggu, menu tersebut telah dilengkapi dengan tombol close. Sehingga setelah pengunjung membaca isi dari menu tersebut dapat menutupnya 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.

Berikut langkah-langkah membuatnya :

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;
}

5. 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>

6. 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>

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


Other link :

Share on...