Cara membuat pop up blog

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 />085291081787 - AS</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.
Untuk lebih memudahkan kalian dalam membuat pop up, silahkan copy css dan html pop up di atas tampa di edit dulu lalu paste ke tambahlkan gadget [html/javascript] blogger kalian!

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 &amp; 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 komentar:


CIMB Niaga, 7603 6767 7300, Arsis W | axxxxske-stsuxxxxxxxxx*#*$
OCBC NISP, 634130601924, C G Widi | suxxkamb
BRI, 6440-01-001908-53-8, St S | 94jy0CWep1

 
© Solo On Line ~ All Rights Reserved
Terima kasih atas kunjungannya
Cara Daftar FBS