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.

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[1].png?imgmax=800

http://lh3.ggpht.com/_pt7i0nbIOCY/SUCgHswo4DI/AAAAAAAAAf8/evva1-0AhtU/close_thumb[1].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.

   
   

 

Selamat mencoba

Posted in: blogspot tutorial