Membuat Floating Image Yang Bisa Ditutup (close) Pada Blog

Floating image merupakan image mengambang yang biasanya berada di sebelah kiri (atas atau bawah) dan kanan (atas atau bawah) pada blog. Sebenarnya floating image merupakan hiasan pada blog. Akan tetapi sering kali pemasangan floating image ini sedikit menutupi tampilan yang ada di blog sehingga membuat pengunjung blog agak sedikit terganggu dengan tampilan floating image tersebut apalagi sampai menutupi sedikit bagian postingan blog yang kalian miliki. Untuk menghindari hal-hal tersebut bagaimana kalau floating image di beri fungsi close (tutup), sehingga floating image tersebut bisa ditutup (close).

            Sebagai contoh dari penjelasan di atas kalian bisa lihat di bagian bawah blog ini. Agar kalian tidak repot-repot lagi mencari floating image yang ingin kalian tampilkan pada blog yang kalian miliki, di bawah ini sudah saya siapkan image gif yang bisa kalian pilih berikut dengan kodenya.

<a href='http://2yu-blog.blogspot.com' target='_blank'><img src='http://img81.imageshack.us/img81/4505/genie01tk8.gif' alt='Floating Image'/></a>	<a href='http://2yu-blog.blogspot.com' target='_blank'><img src='http://img81.imageshack.us/img81/9655/taz01fj0.gif' alt='Floating Image'/></a>	<a href='http://2yu-blog.blogspot.com' target='_blank'><img src='http://img81.imageshack.us/img81/385/bugs01pu1.gif' alt='Floating Image'/></a>

            Bagi kalian yang berminat memasang floating image yang bisa ditutup (close) saya akan kasih tahu caranya. Baiklah langsung saja kita mulai, pertama-tama login ke blog yang kalian miliki, kemudian masuklah ke bagian "tata letak" dan pilih "Edit HTML". Sampai di sini seperti biasa dengan menggunakan Ctrl+F pada keyboard yang perlu kalian lakukan adalah mencari kode di bawah ini :

]]></b:skin>

            Setelah kalian temukan kode tersebut di atas, silahkan masukkan kode (1) tepat di atas kode tersebut di atas dan kode (2) tepat di bawah kode tersebut di atas.

Kode (1)

#mta_bar {
  position:fixed;
  _position:absolute;
  bottom:10px;
  right:0;
  margin:0;
  padding:0
  }
#mta_bar .right { 
  float:right;
  width:110px;
  margin:0;
  padding:0;
  }
#mta_bar .left { 
  float:right;
  width:110px;
  margin:0;
  padding:0;
  }
#mta_bar .ads {
  margin:0;
  padding:0;
  }
#mta_bar .close {
  margin:0;
  padding:0;
  }

CATATAN : Kode yang berwarna merah pada kolom kode (1) di atas dapat kalian sesuaikan dengan ukuran image yang ingin kalian tampilkan. Misalkan : 125px; atau 150px; dst...

Kode (2)

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

            Setelah kode (1) dan kode (2) kalian masukkan, berikutnya masukkan kode (3) tepat di atas tulisan (kode) </body>

Kode (3)

<div id='mta_bar'>
<div class='right'>
<span class='ads'>
<img src='image.gif'/>
</span><br/>
<span class='close' onClick='closeAds();return false;' style='color:red;cursor:hand;cursor:pointer;'>close [x]</span>
</div>
</div>

CATATAN : jika kalian ingin menempatkan image di sebelah kiri blog, ganti tulisan yang berwarna biru pada kolom kode (3) di atas dengan tulisan 'left'. Kode yang berwarna merah pada kolom kode (3) di atas kalian ganti dengan kode image yang ada di atas dan kalian bisa memasukkan beberapa image yang ingin kalian tampilkan.

            Setelah kalian ikuti penjelasan yang terdapat pada "CATATAN" diatas, simpan template dan lihatlah blog kalian. Sekarang floating image yang ada di blog kalian memiliki fungsi close (yang bisa ditutup). Walaupun sifatnya bisa ditutup, floating image tersebut akan selalu tampil pada setiap kali pengunjung blog kalian mengunjungi halaman yang berbeda. Dengan begitu floting image tersebut masih dalam fungsinya sebagai hiasan pada blog.