Membuat Widget Pop Up Windows di Blog

Widget yang tampil seperti mengambang di blog, biasanya sering untuk memasang script iklan PPC. Karena memang widget ini tampilannya paling menonjol yaitu tampil di depan, tengah atau sebelah kiri sesuai keinginan pemasang semua bisa di setting melalui pengaturanya. Keunikan lain script ini adalah jika pengunjung melakukan scroling ke bawah halaman blog anda tetapi widget ini akan selalu berada di bagian bawah blog anda atau sesuai dengan pengaturan sehingga pengunjung dapat melihat dengan jelas apa saja yang kita pasang dalam widget ini, contoh iklan PPC.

Langsung aja cara buatnya :

1. Login to Blogger kemudian pilih "Layout"
2.Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy Paste Script Berikut :

<style type="text/css">
#gb{
position:fixed;
top:325px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:30px;
width:960px;
float:center;
cursor:pointer;
background:url('') no-repeat;
}
.gbcontent{
float:center;
border:1px solid #A5BD51;
background:#000000;
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">

SCRIPT IKLAN PPC ANDA DISINI / APA SAJA YANG INGIN DITAMPILKAN!

<div style="text-align:right">
<a href="javascript:showHideGB()">
[Close]
<a href="http://www.seby-antoe.com/2009/09/membuat-widget-pop-up-windows-di-blog.html" target="_blank">
[Widget By Seby-Antoe]
</a>
</a></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.down = (125-gb.offsetWidth).toString() + "px";
</script></div>

Keterangan :
+ Angka 30 adalah tinggi kota widget, ganti dengan ukuran yg anda inginkan.
+ Angka 960 adalah ukuran lebar kotak wodget, bisa anda edit dengan ukuran yg anda inginkan.
+ Angka 325 adalah ukuran letak widget ini di halaman blog anda artinya semakin besar angkanya anda edit maka widget ini akan semakin kebawah, begitu juga sebaliknya.
+ Angka #000000 adalah kode warna background widget ini. Silahkan anda edit dengan warna yg sesuai dengan background blog anda.
+ Ganti Tulisan SCRIPT IKLAN PPC ANDA DISINI / APA SAJA YANG INGIN DITAMPILKAN! Dengan script keinginan anda.

4. Simpan dan lihat hasilnya.


Selamat Mencoba ... !!!

+ Mohon anda tidak menghapus link redirect Sumber widget ini. Terima kasih atas penghargaan anda tidak mengganti link redirect ke artikel ini.

Posted by : Coboy
Source : http://www.seby-antoe.com