mas template

Membuat Iklan Melayang dengan Tombol Close

Objek melayang atau sering juga di sebut dengan Float Top Bar, sebuah jendela kecil yang muncul dari atas halaman setiap kali kita mengunjungi Website atau Blog. Float Top Bar ini biasanya berisi Content Iklan ataupun sebuah Form SubScribe sehingga pasti terlihat oleh pengunjung Website atau Blog kita. Untuk membuat Iklan melayang seperti ini sangatlah mudah, hanya dengan beberapa langkah, maka Iklan Melayang tersebut sudah bisa terpasang pada Website atau Blog Anda.


 Oke, berikut ini adalah langkah-langkah pembuatannya :
  1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
  2. Masuk ke Tab Tata Letak
  3. Pilih Elemen Halaman
  4. Tambah Gadget Pilih HTML / JAVASCRIPT
  5. Dan copy kode di bawah ini kedalamnya yah
<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_xBW8tvgOXL4/S2eYQCC16pI/AAAAAAAABkE/f-qrOCcQZzU/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_xBW8tvgOXL4/S2eYQCC16pI/AAAAAAAABkE/f-qrOCcQZzU/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>

<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>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

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

Untuk tulisan yang berwarna merah, bisa teman-teman ganti dengan kode iklan, gambar ataupun tulisan yang diinginkan, selamat mencoba.

Semoga bermantaat
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

35 comments:

  1. thx gan ilmunya... salam kenal :)

    ReplyDelete
  2. makasih mas ilmunya, tak cobane yo

    ReplyDelete
  3. Lihat Kemnari ! terima kasih atas templete blognya

    http://hawan-putra.net

    ReplyDelete
  4. dengan yang anda raih semoga sukses selalu
    kunjungi y broo..... www.sahputraherballs.blogspot.com

    ReplyDelete
  5. elemen hlaman t4 nya di mna gan gua ni baru pemula

    ReplyDelete
    Replies
    1. masuk ke tata letak, tambahkan add gatget, pilih yg HTML. Meletakkan dimana saja yg mnyediakn add gatget.

      Delete
  6. gan masuk langsung diblogspot kami semoga berbahagia dengan istri anda ok....../?

    ReplyDelete
  7. Kode iklannya itu diperoleh dari mana ya ??

    ReplyDelete
    Replies
    1. Dari Photobucket juga bisa, klw iklannya berbentuk gambar, gambarnya di upload ke photobucket, lalu ambil copy link nya untuk mengganti tulisan ini "Masukan Kode iklan atau Gambar yang anda inginkan di sini"

      Delete
  8. thanks for shareing this tutorial. I like it.

    ReplyDelete
  9. mantap,, tapi masih bingung ,, seprti apa kode iklannya ,, apa seperti mau pasang banner ya ,, pake link tujuan dan text iklan ? mohon pencerahanya ,,,

    ReplyDelete
  10. oke ,,, maasih banget ,, saya coba sekali langsung jadi ,, siiip gan

    ReplyDelete
  11. Jadi gini caranya bikin iklan-iklan yang sering muncul setelah loading blog selesai. Saya banyak nemuin blog-blog yang pakai ini! Saya pribadi kurang suka melihatnya, karena belum apa-apa sudah mengganggu pemandangan! :)

    ReplyDelete
  12. mantab mas tutornya,..
    banyak ilmunya setelah muter2 di web ini

    ReplyDelete
  13. Gimana cara hapusnya ya gan. Sy sudah hapus, tapi tetap muncul

    ReplyDelete
  14. ini yang ane cari, thanks ya :)

    come back
    www.punyaanakcikupa.blogspot.com

    ReplyDelete
  15. akhirnya dapetnya dari kang mas kolis juga...makasih mas...

    ReplyDelete
  16. pas saya pasang kok malah buku tamu disamping malah rusak gan???

    ReplyDelete
  17. makasih banyak

    http://mas-helmi.blogspot.com

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. cara memasang iklan
    dibawah judul
    postingan blog

    SUMBER :
    http://seo-bantai.blogspot.com/2013/08/cara-memasang-iklan-dibawah-judul.html

    ReplyDelete
  20. thx info'y
    http://duniagame7.blogspot.com/

    ReplyDelete
  21. Thx infonya
    http://animasiindoku.blogspot.com/

    ReplyDelete
  22. bagus gan...jangan lupa berkunjungi ke www.sonihaji.com

    ReplyDelete
  23. Mantap, makasih, terus mengurangi lebar tampilannya bagaimana ?

    ReplyDelete
  24. thanks gan ilmunya
    www.ibnureza.com

    ReplyDelete
  25. photokecil.blogspot.com udah bisa gan, mantaapppp,

    ReplyDelete
  26. Makasih gan atas turorialnya ^_^

    http://www.cara-ngoprek.blogspot.com

    ReplyDelete
  27. work tutornya terima kasih
    janga lupa kunbalnya arifinbp.blogspot.com

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger