Selasa, 10 Juli 2012

Percantik Blog Anda Dengan Iklan Melayang





Pertama masuk damonwebster, anda akan melihat contoh iklan seperti gambar di atas, iklan melayang yang menawarkan iklan untuk ikut bergabung di grup damonwebster facebook, agar anda bisa mendapatkan info-info posting terbaru bukan hanya di situs blog saja tetapi melalui grup damonwebster di facebook. Jika anda tidak tertarik dengan iklan yang di tampilkan anda bisa langsung close program dua kali maka otomatis iklan tersebut akan hilang.
Nah bila anda tertarik ingin menggunakan iklan melayang seperti di damonwebster ini dan ingin menerapkannya di blog anda berikut tutorialnya.

  1. Tambah gadged 
  2. Pilih HTML/JavaScript dan masukkan kode dibawah ini.

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

    .gbcontent{
    float:left;
    border:2px solid #333333;
    background:#333333;

    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+")", 60);}
    }
    </script>

    <div id="gb">

    <div class="gbtab" onclick="showHideGB()"> </div>

    <div class="gbcontent">

    <div style="text-align:left">
    <a href="javascript:showHideGB()">

    Klik di sini dua kali (2x) untuk menutup

    </a>
    </div>
    <center>

    Masukkan kode/scrip iklan di sini

    </center>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.center = (30-gb.offsetWidth).toString() + "px";
    </script></div></div>
  3. Setelah script di masukan selanjutnya silahkan klik save & lihat hasilnya.

    CATATAN

    kode yang di tebalkan adalah kode warna untuk background dan garis tepi dari iklan yang melayang dan bisa di ganti berdasarkan tampilan blog masing-masing
    tulisan yang berwarna biru adalah petunjuk agar script tersebut bisa di tutup dan bisa di ubah sesuai dengan selera masing-masing.
    tulisan yang berwarna hijau di ganti dengan kode scrip dari iklan yang ingin di munculkan.

    Semoga Bermanfaat & Bagi yang belum mengerti silahkan komen di bawah ya :)

Tidak ada komentar:

Poskan Komentar