Pop up yang akan saya bahas ini adalah jenis pop up melayang geser ke kanan.
Pop up ini dalam dunia internet marketing biasanya sebagai tempat untuk menulis sales latter,promosi atau penawaran.
Selain itu pop up ini juga bisa untuk meletakkan form kontak dan script iklan adsense.
Selanjutnya langsung saja untuk segera mengetahui cara membuat pop up blog jenis melayang geser ke kanan tersebut silahkan ikuti penjelasan saya berikut ini!
Pertama lihat format penulisan css dan kode html untuk pop up yang ada di bawah ini:
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:30px;
width:500px;
float:center;
cursor:pointer;
background:url('') no-repeat;
}
.gbcontent{
float:center;
border:9px solid #006600; background:#006600;
padding:1px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 125-w) : moveGB(125-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.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<table width="100%" align="center" cellpadding="5" cellspacing="0">
<tr>
<td ><p align="center"><font size="3" face="Georgia, Times New Roman, Times, serif"><u><blink><span style="color:#ffff00;"><b>Selamat datang<br />di<br /> Panduan paling mudah cara daftar dan belajar forex</b></span></blink><br /><br />
</u><font face="Verdana" size="2" face="Georgia, Times New Roman, Times, serif">Semoga bisa membantu Anda</font></font></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div align="center">
</div>
<div align="center"><font face="color:#ffff00;" size="3">Dalam bisnis forex salah satu kunci untuk meraih kesuksesan [dapat laba] adalah punya strategi trading forex</font></div>
<div align="center"><font face="color:#ffff00;" size="2"><br /><br />Jika Anda belum punya,dapatkan strateginya!<br />087835278694</font></div>
<div align="center">
<div style="border: solid 0px #000000;">
<div style="text-align:center">
<a href="javascript:showHideGB()">
<span style="color: yellow;">[X]</span><br />
<div align="center">
</div></a></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.down = (125-gb.offsetWidth).toString() + "px";
</script></div></div></div></td></tr></table></div></div>
Keterangan css dan html pop up di atas:
Lihat tampilannya seperti apa?
Kalau sudah tahu tinggal mengedit.
Seperti itulah trik atau cara membuat pop up blog jenis melayang geser ke kanan,semoga bermanfaat.
Tetapi jika dengan tampilan pop up yang itu kalian tidak suka,kalian bisa mencoba pop up yang lainnya.
Misalkan pop up yang ada tombol close'nya.
Mau mencoba?
Berikut ini script pop up yang ada tombol close'nya:
Cara membuatnya mudah,cukup kalian copy kemudian paste di tambahkan gadget html javascript blogger kalian.
Pop up ini dalam dunia internet marketing biasanya sebagai tempat untuk menulis sales latter,promosi atau penawaran.
Selain itu pop up ini juga bisa untuk meletakkan form kontak dan script iklan adsense.
Selanjutnya langsung saja untuk segera mengetahui cara membuat pop up blog jenis melayang geser ke kanan tersebut silahkan ikuti penjelasan saya berikut ini!
Pertama lihat format penulisan css dan kode html untuk pop up yang ada di bawah ini:
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:30px;
width:500px;
float:center;
cursor:pointer;
background:url('') no-repeat;
}
.gbcontent{
float:center;
border:9px solid #006600; background:#006600;
padding:1px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 125-w) : moveGB(125-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.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<table width="100%" align="center" cellpadding="5" cellspacing="0">
<tr>
<td ><p align="center"><font size="3" face="Georgia, Times New Roman, Times, serif"><u><blink><span style="color:#ffff00;"><b>Selamat datang<br />di<br /> Panduan paling mudah cara daftar dan belajar forex</b></span></blink><br /><br />
</u><font face="Verdana" size="2" face="Georgia, Times New Roman, Times, serif">Semoga bisa membantu Anda</font></font></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div align="center">
</div>
<div align="center"><font face="color:#ffff00;" size="3">Dalam bisnis forex salah satu kunci untuk meraih kesuksesan [dapat laba] adalah punya strategi trading forex</font></div>
<div align="center"><font face="color:#ffff00;" size="2"><br /><br />Jika Anda belum punya,dapatkan strateginya!<br />087835278694</font></div>
<div align="center">
<div style="border: solid 0px #000000;">
<div style="text-align:center">
<a href="javascript:showHideGB()">
<span style="color: yellow;">[X]</span><br />
<div align="center">
</div></a></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.down = (125-gb.offsetWidth).toString() + "px";
</script></div></div></div></td></tr></table></div></div>
Keterangan css dan html pop up di atas:
- 50 adalah ukuran jarak atas pop up.
- 30 dan 500 adalah ukuran luas pop up.
- 9 adalah ukuran tebal tipisnya kotak pop up.
- #006600; adalah warna garis tepi atau border pop up.
- #006600; adalah warna background atau latar pop up.
- Kata-kata warna merah dengan latar putih adalah kata-kata yang harus kalian ganti dengan kata-kata kalian sendiri.
Lihat tampilannya seperti apa?
Kalau sudah tahu tinggal mengedit.
Seperti itulah trik atau cara membuat pop up blog jenis melayang geser ke kanan,semoga bermanfaat.
Tetapi jika dengan tampilan pop up yang itu kalian tidak suka,kalian bisa mencoba pop up yang lainnya.
Misalkan pop up yang ada tombol close'nya.
Mau mencoba?
Berikut ini script pop up yang ada tombol close'nya:
<style type="text/css">#gb{position:fixed;bottom:100px;right:300px;z-index:+1500;}* html #gb{position:relative;}
.gbcontent{float:right;border:20px solid #666666;background:#000000;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-100;gb.style.bottom = x.toString() + "px";gb.style.right = 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"></div>
<center>
<p><p/><p><p/>
<a href="http://www.rahasiawebsitepemula.com/?id=yede" target="_blank"><span style="color: yellow;"><b>Rahasia Website Pemula</b></span></a><br />
<span style="color: white;">Satu-satunya bisnis online untuk pemula</span><br />
<span style="color: white;">Yang memiliki metode belajar online & offline</span><br />
<a href="http://www.rahasiawebsitepemula.com/order.php?id=yede" target="_blank"><span style="color: red;">Join free</span></a><br />
<span style="color: white;">Sekarang juga</span><br />
<span style="color: white;">Dapatkan free download :</span><br />
<span style="color: white;">E-book pengantar bisnis online tingkat dasar</span><br />
<span style="color: white;">E-book panduan membuat blog yang SEO friendly</span><br />
</p></p></p></p>
<p><p/><a href="javascript:showHideGB()">[X]</a></p></p></center><script type="text/javascript">var gb = document.getElementById("gb");gb.style.center = (20-gb.offsetWidth).toString() + "px";</script></div></div>
.gbcontent{float:right;border:20px solid #666666;background:#000000;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-100;gb.style.bottom = x.toString() + "px";gb.style.right = 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"></div>
<center>
<p><p/><p><p/>
<a href="http://www.rahasiawebsitepemula.com/?id=yede" target="_blank"><span style="color: yellow;"><b>Rahasia Website Pemula</b></span></a><br />
<span style="color: white;">Satu-satunya bisnis online untuk pemula</span><br />
<span style="color: white;">Yang memiliki metode belajar online & offline</span><br />
<a href="http://www.rahasiawebsitepemula.com/order.php?id=yede" target="_blank"><span style="color: red;">Join free</span></a><br />
<span style="color: white;">Sekarang juga</span><br />
<span style="color: white;">Dapatkan free download :</span><br />
<span style="color: white;">E-book pengantar bisnis online tingkat dasar</span><br />
<span style="color: white;">E-book panduan membuat blog yang SEO friendly</span><br />
</p></p></p></p>
<p><p/><a href="javascript:showHideGB()">[X]</a></p></p></center><script type="text/javascript">var gb = document.getElementById("gb");gb.style.center = (20-gb.offsetWidth).toString() + "px";</script></div></div>
Cara membuatnya mudah,cukup kalian copy kemudian paste di tambahkan gadget html javascript blogger kalian.
0 comments:
Posting Komentar