Tutorial Cara Membuat Iklan Melayang Dengan Tombol Close 1 kali

Tutorial Cara Membuat Iklan Melayang Dengan Tombol Close 1 kali

Artikel hari ini merupakan artikel request dari seseorang yang mengirimkan email pada saya kemarin. Nama beliau adalah taurida, beliau bertanya bagaimana caranya membuat iklan melayang atau Floating Ads. Iklan melayang ini, saya bahkan teman-teman pasti sering jumpai di beberapa blog project traffic, maksudnya sebuah blog yang dibuat hanya untuk kepetingan traffic dengan tema blog yang hanya berupa sesuatu yang aneh, lucu, menarik , dan lain lain.

Untuk anda pengguna platform blogger silahkan lihat cara menggunakan script floating ads ini di dhaniels.com, saya pun mendapatkan kodenya di blog tersebut. Bagi pengguna wordpress silahkan ikuti cara-cara berikut.

  1. Buka file style.css anda, kemudian copykan kode css di bawah ini. Copykan saja pada baris terakhir.
    #topbar{
    position:absolute;
    border: 2px red;
    padding: 2px;
    background-color: transfarent;
    width: 700px;
    visibility: hidden;
    z-index: 100;
    }
    

    Untuk line 5 dan 6 bisa anda sesuaikan dengan keinginan anda masing-masing.

  2. Selanjutnya, anda buka Notepad kemudian copykan script dibawah ini
    <script type="text/javascript">
    var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
    var startX = 30 //set x offset of bar in pixels
    var startY = 5 //set y offset of bar in pixels
    var verticalpos="fromtop" //enter "fromtop" or "frombottom"
    function iecompattest(){
    return (document.compatMode &&; document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    function closebar(){
    if (persistclose)
    document.cookie="remainclosed=1"
    document.getElementById("topbar").style.visibility="hidden"
    }
    function staticbar(){
    barheight=document.getElementById("topbar").offsetHeight
    var ns = (navigator.appName.indexOf("Netscape") != -1) window.opera;
    var d = document;
    function ml(id){
    var el=d.getElementById(id);
    if (!persistclose persistclose && get_cookie("remainclosed")=="")
    el.style.visibility="visible"
    if(d.layers)el.style=el;
    el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
    el.x = startX;
    if (verticalpos=="fromtop")
    el.y = startY;
    else{
    el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
    el.y -= startY;
    }
    return el;
    }
    window.stayTopLeft=function(){
    if (verticalpos=="fromtop"){
    var pY = ns ? pageYOffset : iecompattest().scrollTop;
    ftlObj.y += (pY + startY - ftlObj.y)/8;
    }
    else{
    var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
    ftlObj.y += (pY - startY - ftlObj.y)/8;
    }
    ftlObj.sP(ftlObj.x, ftlObj.y);
    setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("topbar");
    stayTopLeft();
    }
    if (window.addEventListener)
    window.addEventListener("load", staticbar, false)
    else if (window.attachEvent)
    window.attachEvent("onload", staticbar)
    else if (document.getElementById)
    window.onload=staticbar
    </script>
    

    Setelah itu save, beri nama iklan.js

  3. Setelah itu anda upload file iklan.js tersebut ke dalam folder template yang sedang anda gunakan.pulic_HTML/wp-content/themes/templateanda
  4. Lalu anda buka file header.php, masukan kode di bawah sebelum tag < ? php wp_head(); ? >(tanpa spasi)
    <script language="JavaScript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/iklan.js"></script>
  5. Langkah selanjutnya masih di file header.php, cari tag <body>(tanpa spasi) kemudian copykan script di bawah simpan di bawah tag body tersebut.
    <div class="clear"></div>
    <div id="topbar">
    <a style="color: rgb(255, 0, 0); font-weight: bold; font-style: italic;" href="" onclick="closebar(); return false"><span><button>X</button></span></a><a style="font-weight: bold; color: black(51, 255, 51);"> << CLOSE
    </a><p><a style="font-weight: bold; color: black(51, 255, 51);" title="cara mudah dapatkan uang dari internet">Iklan sponsor blog ini</a>
    </p><center><strong>Script Iklan Anda</strong></center>
    <p></p><p></p></div>
    

Untuk demo dan tutorial jelasnya bisa anda baca di http://www.dhaniels.com/. Kemudian, agar tombol close harus di klik 2 kali, silahkan baca tutorialnya di http://ecaknyo.blogspot.com/, prinsip penggunaan pada wordpress sama dengan yang sudah saya paparkan di atas.

Semoga bermanfaat !

Penulis: Satrya Bima - http://www.margasatrya.com

Satrya, founder margasatrya.com yang saat ini sedang bekerja di salah satu provider theme e-commerce, Tokokoo.com sebagai Front End Developer. Mau mengenal saya lebih jauh ? Silahkan follow twitter atau kontak saya

Berlangganan Artikel Gratis !

  • andank

    maaf ijin mengamankan pertamaxxx

  • taurida

    thanx bro dah ngebantu, nanti saya coba

  • http://andreasandre.net andre

    wah seneng mampir sini, artikelnya update terus. wah yang ini keren artikelnya. trus kode iklannya di taruh sebelah mana ya mas?

    • http://www.margasatrya.com Satrya

      Sudah di edit mas, maaf lupa tidak di bold :)

  • http://www.gemilang.tv Indovision

    Ini hanya cocok pada blog khusus iklan ya, Kl sy tidak terlalu suka dgn adanya iklan melayang, Ini hanya pendapat sy aja loh …
    Sy bookmark aja. Thx

  • POOSOFT-Tips Dan Trik Komputer

    Oke Bosss…Kalaw Ane pake Plugin WP aja deh treus di compress, seru kalaw manual gini

  • http://danmey.blogspot.com/ dhanang

    bagus…. bermanfaat

  • http://www.nyubi.org/ Ngeblog Dibayar

    mantab.. banyak trik menarik disini, makasih kang ;)

  • pyoubcozjc

    menurut saya .. iklannya ganggu saja malah he he

  • ArdianZzZ

    Pertanyaannya, berapa kali kita akan “dipaksa” melihat iklan-iklan tersebut? Kalau hanya satu kali masih bisa ditolerir, tetapi kalau harus melihat setiap kali halaman direfresh itu intimidasi namanya. Ujung-ujungnya tombol close pada browser yang ditekan.

    Banyak narablog yang tidak bijak saat memonetisasi blognya. Mungkin mereka masih tidak paham dengan usabilitas & experience desain. Kemudian berpikir bahwa menggunakan iklan-iklan yang agresif akan meningkatkan keuntungan yang didapat.

  • http://andreasandre.net andre

    mas, nanya dunk. tombol2 share di sebalah kiri bikinnya gmana? ada tutorialnya ga? soalnya menarik

    • http://www.margasatrya.com Satrya

      blm saya tulis mas. Sabar yah :mrgreen:

  • icatulang

    kang lamun ane mah cukup copy script yang floating adsnya buat blogspot, tru disimpen di single.php ,,,langsung jadi ,,,,,

  • my metro

    salam tk karana kogsi ilmu… tapi saya kurang paham lagi macam mana cara mahu

    upload file iklan.js tersebut ke dalam folder template yang sedang anda gunakan..
    boeh tunjukkan cara nya tq

    • http://www.margasatrya.com Satrya

      Melalui FTP, cari folder template yang anda gunakan, kemudian upload kesitu :)

  • http://www.kawanblogger.com Kawan Blogger

    Makasih, sekarang udah jadi nih cuman belum dipasang…masih mengatur layout-nya :)

  • freezz

    kalo buat blogger gmana yah mas … ???

    • http://www.margasatrya.com Satrya

      Wah blogger bukan area saya mas, mohon maaf

    • http://www.margasatrya.com Satrya

      Eh bisa di baca disini mas hxxp://ecaknyo.blogspot.com/2010/05/cara-membuat-iklan-melayang-dengan.html :)

  • liel

    Mas..

    Setelah itu anda upload file iklan.js tersebut ke dalam folder template yang sedang anda gunakan.pulic_HTML/wp-content/themes/templateanda

    itu maksutnya apa? di bagian mana? baru punya blog.. hehehe

    thanks before

  • liel

    udah di coba.. ga bisa juga.. aneh

  • ulfiyah

    thx atas infornya sangat membantu, yg saya gunakan dulu adalah 2x klik (membosankan)

  • http://puisi-boy.blogspot.com Boy

    Thanks ya bro… tapi apa dgn cara ini terbukti lebih banyak manghasilkan ? he…he.. :)

  • yanto

    dicoba, belum berhasil !!!

  • Jimmy Ahyari

    Mantab! Tapi beberapa advertiser ada yang tidak memperbolehkan sistem floating ini.. Harus jeli membaca TOS masing-masing pengiklan.. bookmark dulu deh.. siapa tahu nanti berguna ;)

  • http://galusblog.blogspot.com/ hendra

    salam kenal..
    thanks atas infonya…

  • http://slamet-riyadi04.blogspot.com/2011/01/cara-beriklan-di-internet.html slam

    siap… mantabs

  • http://www.tergaptek.com TerGapteK.coM

    Oh.. ternyata Untuk wordpress ya..

    Makasiiih ,

    Salam kenaaal Ya sob, keren euy Blognyaaaaaaa…

  • http://bundasaski.blogspot.com/ virgie

    info yg keren…mau dicoba dl..thks ya………

  • andre

    keren bgt….

    numpang publish y gan hxtp://garobak-toeyack.blogspot.com/

  • http://syahrilhafiz.com/blog syahrilhafiz

    menarik, akan dicuba. thanks yaa

  • http://soesiloadji.blogspot.com/ kerapan sapi

    info yang menarik sekali .. terimakasih mohon ijin copy gak pake paste..

  • http://www.mbaheblog.blogspot.com kak ndol

    gan kalau untu blogspot gmn? cz d blog saya jg ada scrib samping buat buku tamu gt, n setelah saya coba bukutamunya jg ikutan awut2an… y saya balikin kesemula lgi deh..

  • http://temenin.com yoyo

    sip dah bisa bikin iklan mejeng teruuuuss…. ijin copas buat blog ane ye..

  • Nurul Imam

    Kira kira mengganggu pengunjung gak yah mas ?
    Saya mau pasang nih….

  • http://fauzanvs.blogspot.com/ Notebook Review

    thnkz sob bwt infonya

  • http://www.ekomarwanto.com eko marwanto

    aku coba dulu om di wordpress aku, nanti klo berhasil aku laporan lagi disini,,

  • http://www.margasatrya.com/tutorial-cara-membuat-iklan-melayang-dengan-tombol-close-kali.html?& Aldrich

    websites

  • http://www.margasatrya.com/tutorial-cara-membuat-iklan-melayang-dengan-tombol-close-kali.html?& Channing

    I sort of discovered your website by mistake, but your website caught attention and I thought that I would post to tell you that I like it.

  • http://mukaprimitif.blogspot.com/ http://mukaprimitif.blogspot.com/

    Terima kasih temann

  • http://tipsunik.com tipsunik

    membuat tombol like facebook melayang gimana ya gan