Home » » Cara Menampilkan Menu Pop Up

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
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .