Tuesday, May 25, 2010

Gadget Iklan Melayang Dengan Tombol Close



Pertanyaan dari sobat blogger faktaduniaunik " Sob..klo iklan melayang tau gak??? mohon pencerahannya sob.. ? ".

Langkah-langkah sbb :

1. Login ke blogger > tata letak > elemen halaman > tambah gadget > html/javascript dan gadgetnya biarkan saja tanpa nama/judul.

2. Copas kode dibawah ini ke dalam gadget html/javascript tadi.
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
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>

Paste kodenya disini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

3. Simpan gadget dan lihat hasilnya.


Selamat Mencoba.

66 comments:

  1. mantap mas..artikel nya mari kita saling berbagi pengetahuan..

    ReplyDelete
  2. bikin inspirasi nih artikel..ehmmmmantap guns

    ReplyDelete
  3. hanspa06 > mari sob qt sharing knowledge... :)

    dimensi muslimah > mantab yaa :"> ..thx

    ReplyDelete
  4. terima kasih atas tipsnya, mungkin kalau butuh akan saya gunakan

    ReplyDelete
  5. oya sekalian ikut tukar link yah, boleh kan?

    ReplyDelete
  6. idebagusku > oke deh.. ^_^"

    ReplyDelete
  7. lha kalo buat kamu komeng saya balas komeng gimana mas
    cara meletakan tulisanya dimana

    ReplyDelete
  8. @ sigit super > kamu bkin wa bingung aj gan.. ? wkwkwkwk.. maksudnya meletakan tulisan dimananya ? :D

    ReplyDelete
  9. Wawww mudah broooo ....

    jangan lupa mampir broo
    ada a7x terbaaru rilis 18 mei 2010 di
    www requestlagu co cc

    ReplyDelete
  10. Dengar Lagu > emg mudah sob.. oke ntar wa mampir.. ;)

    ReplyDelete
  11. klo mw pasang 2 gimana sob?
    soalnya tak pasang di blogq malah jadi error
    soalny dah ada hal serupa buat message box di blogku jee :P

    ReplyDelete
  12. BIma85 > :D wkwkwkwk.. tpi apa sudah kamu coba dipasang di tempat yang berbeda yaitu 1 di header trus 1 lagi di sebelah kiri/kanan...kalau masi error jg coba digabung aj sob jdi 1.. kayak widget MP3 Downlaodku yg double widget scrolling itu.. ;;)

    ReplyDelete
  13. wew. masih belum paham nich sob, kapan2 aja aku baca lagi. linknya udah aku simpan di kompi aku .

    ReplyDelete
  14. Internet Business > oke gan.. :D

    ReplyDelete
  15. bagus boss...kalo mau lihat video lagu terbaru lihat http://videolagu.blogspot.com atau http://softdown.web.id

    ReplyDelete
  16. wah bermanfaat
    thx ya infonya, kayanya qu coba dulu sob..

    ReplyDelete
  17. Softdown > thx gan.. oke ntar wa mampir .. ;)

    Willy Weblog > silahkan dicoba gan .. :D

    ReplyDelete
  18. www.franco.web.id > silahkan dicoba gan.. :D

    ReplyDelete
  19. Good Tutorials, kreatif lgi. tambah terus tutorialnya y...
    Oiya, gimana cara buat task bar di blog kyak blog temen2 diatas?
    http://robertbongso.blogspot.com

    ReplyDelete
  20. xumbai > taksbar yg gimana gan.. yg di header ato top menu ato taksbar yg kayak ini > http://ecaknyo.blogspot.com/2009/10/cara-membuat-taskbar-melayang-di-blog.html

    atau ini

    > http://ecaknyo.blogspot.com/2010/07/cara-mengedit-top-menu-pada-template.html

    ..silahkan dilihat dahulu.. :)

    ReplyDelete
  21. maaf ini, saya sudah coba klik 2x, iklannya naik keatas tp msh nyisa dikit sekitar 2cm masih keliatan di pojok kiri atas. thx

    ReplyDelete
  22. bisa dicoba nih,,,,mas boleh aku copy ya codenya

    ReplyDelete
  23. waaa mantap niii srip nya...
    boleh aku coba ga bro.. :D

    ReplyDelete
  24. yes mantap tipsnya.... aku coba tp kalo kwalahan bantu aku ya... hehe makasih

    ReplyDelete
  25. supaya posisinya sebelah kiri atas layar gimana gan???

    ReplyDelete
  26. @BioNaturally:

    Untuk Posisi iklan melayang tampil di sebelah kanan atas.. copas kode berikut ini...cari kode "gb.style.center
    " lalu ganti seperti dibawah ini...

    center jadikan right, & valuenya yg 30 jadikan 250... contohnya seperti dibawah ini...

    gb.style.right = (250-gb.offsetWidth).toString() + "px";

    ReplyDelete
  27. Udah saya follow balik gan. Thx

    ReplyDelete
  28. klik http://setiadisaputra.blogspot.com/ dan http://miscenter.blogspot.com/ untuk sharing ilmu atau konsultasi,banyak manfaatnya kalo kita saling bertukar ilmu

    ReplyDelete
  29. @setiyadi saputra:

    oke..mari sharing knowledge gan.. :) ..wa ke TKP

    ReplyDelete
  30. mantap ni,, tp blog ane ga mw ng'close..

    ReplyDelete
  31. Keren sob infonya..

    aku juga sebelumnya paka iklan melayang, tapi yang sebelumnya itu pake Var X dan Y untuk posisinya..!

    Thanks
    salam kenal ya,

    ReplyDelete
  32. kok saya pasang di close kok g bisa ilang penuh. masih keliatan separuh

    ReplyDelete
  33. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif tanks bnget nie infonya mga makin maju ajwa...
    n tipsnya udah saya pkek nieee di www.krosokshere.co.cc,,,

    ReplyDelete
  34. numpang mampir nih bos, sekalian mau share sedikit untuk masalah teman2 yang iklannya clo di close gak mau hilang semua/ msh ada separuh,
    silahkan di ganti nilai code gb.opened : 30-w jadi 0. seperti di bawah ini :

    gb.opened ? moveGB(0, 0-w) : moveGB(20-w, 0);

    semoga bermanfaat ya...

    oya, clo teman2 da waktu berkunjung ke blog saya ya !!!
    di http://danumlanep.blogspot.com

    ReplyDelete
  35. Thankyu Thankyu.. sob!! Nice Postt

    ReplyDelete
  36. mau donlod software seo ga sob?
    main ke blogku yach

    ReplyDelete
  37. mantap...
    sayangnya ads di blogku kaga boleh dibuat melayang...
    ntar dijewer ama yg punya
    xixixix

    ReplyDelete
  38. Keren nih tutorialnya, cuma masih kurang jelas iklan yang bisa dibuat melayang ini apakah iklan teks saja atau gimana ?

    ReplyDelete
  39. kalau tanpa tombol close gmn neh??

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.