Pasang Gambar Always On Top Plus Tombol Close

 

Pada posting sebelumnya telah di terangkan bagaimana cara membuat Gambar Always On Top atau gambar yang di pasang selalu tampil di depan layar walaupun pengunjung blog melakukan scrolling pada layar monitornya. Namun ternyata banyak yang rikues ke kang Rohman agar di buatkan tutorial membuat Gambar Always On Top tapi plus fasilitas Tombol Close Seperti special ads yang ada pada blog kang Rohman.

Trik yang di pakai untuk membuat Gambar Always On Top plus fasilitas Tombol Close adalah dari maxblogpress yaitu memakai skrip strip ad seperti yang pernah OOM terangkan. Namun agar bisa di terapkan seperti yang di inginkan, Kang rohman memodifikasi bagian CSS nya dan jadilah seperti yang anda lihat.

specialads

Special ads yang Kang Rohman gunakan sengaja memakai fasilitas ini agar bagi mereka yang merasa terganggu dengan keberadaan gambar yang selalu muncul di depan layar monitor, mereka sendiri bisa menghilangkannya.

Yang penasaran ingin bisa membuat Gambar Always On Top plus fasilitas tombol Close, berikut adalah langkah- langkahnya :

langkah #1

Buatlah dua buah gambar yang ingin di tampilkan yaitu gambar utama sebesar 125 X 125 pixel ( contoh saja ) serta tombol close yang akan di pakai, contoh :

Uploadlah kedua gambar tersebut ke hosting tempat anda biasa menyimpan gambar. Catatlah alamat URL dari kedua gambar tersebut, contoh :

http://lh6.ggpht.com/_pt7i0nbIOCY/SUWuARPT5fI/AAAAAAAAAgM/GxFnybAf7-8/adspace_thumb%5B1%5D.png?imgmax=800

http://lh3.ggpht.com/_pt7i0nbIOCY/SUCgHswo4DI/AAAAAAAAAf8/evva1-0AhtU/close_thumb%5B1%5D.png?imgmax=800

Jangn lupa juga untuk menentukan target link untuk gambar anda, misal punya kang rohman seperti ini :

http://kolom-tutorial.blogspot.com

Langkah #2

  1. Silahkan login  ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Klik Download Template Lengkap. Silahkan di backup dulu templatenya.
  5. Copy lalu paste kode berikut persis di atas kode ]]></b:skin>

    #mta_bar {
    position:fixed;
    _position:absolute;
    bottom:10px;
    right:10px;
    margin:0;
    padding:0
    }
    * html #mta_bar{
    /*IE6 hack*/
    position: absolute;
    width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
    }
    #mta_bar .right { float:right;width:125px;margin:0;padding:0}
    #mta_bar .ads {margin:0;padding:0}
    #mta_bar .close {margin:0;padding:0}
  6. Copy lalu paste kode berikut persis di atas kode </head>

    <script type=’text/javascript’>

    //<![CDATA[

    var mta_arr = new Array();

    var mta_clear = new Array();

    function mtaFloat(mta) {

    mta_arr[mta_arr.length] = this;

    var mtapointer = eval(mta_arr.length-1);

    this.pagetop = 0;

    this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;

    this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);

    this.mtasrc.height = this.mtasrc.offsetHeight;

    this.mtaheight = this.cmode.clientHeight;

    this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);

    var mtabar = ‘mta_clear[‘+mtapointer+’] = setInterval("mtaFloatInit(mta_arr[‘+mtapointer+’])",1);’;

    mtabar = mtabar;

    eval(mtabar);

    }

    function mtaGetOffsetY(mta) {

    var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);

    var parentOffset = mta.mtasrc.offsetParent;

    while ( parentOffset != null ) {

    mtaTotOffset += parentOffset.offsetTop;

    parentOffset = parentOffset.offsetParent;

    }

    return mtaTotOffset;

    }

    function mtaFloatInit(mta) {

    mta.pagetop = mta.cmode.scrollTop;

    mta.mtasrc.style.top = mta.pagetop – mta.mtaoffset + "px";

    }

    function closeAds() {

    document.getElementById("mta_bar").style.visibility = "hidden";

    }

    //]]>

    </script>

  7. Copy lalu paste kode berikut persis di atas kode </body> (ganti dengan alamat URL anda)

    <div id=’mta_bar’>

    <div class=’right’>

    <span class=’ads’>

    <a href=’http://kolom-tutorial.blogspot.com target=’_blank’>

    <img border=’0′ height=’125′ src=’http://lh6.ggpht.com/_pt7i0nbIOCY/SUWuARPT5fI/AAAAAAAAAgM/GxFnybAf7-8/adspace_thumb[1].png?imgmax=800 width=’125′/>

    </a>

    </span>

    <span class=’close’ onmouseout=’self.status=&apos;&apos;’ onmouseover=’self.status=&apos;kolom-tutorial.blogspot.com&apos;;return true;’>

    <img align=’absmiddle’ border=’0′ onClick=’closeAds();return false;’ src=’http://lh3.ggpht.com/_pt7i0nbIOCY/SUCgHswo4DI/AAAAAAAAAf8/evva1-0AhtU/close_thumb[1].png?imgmax=800 style=’cursor:hand;cursor:pointer;’/>

    </span>

    </div>

    </div>

  8. Klik tombol SIMPAN TEMPLATE.

  9. Selesai. Silahkan lihat hasilnya.

Spesial Thanks to :

Rohman

http://amen24.wordpress.com

Sun, 21 Dec 2008 15:06:00 GMT

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: