Cara Membuat Gambar Melayang di Blog

  

Seperti biasa, hal yang pertama dilakukan adalah kamu wajib login terlebih dahulu dilalu menuju ke layout dan edit HTML

Setelah itu, cari kode ]]></b:skin> dan copy script di bawah ini untuk diletakan diatasnya kode ]]></b:skin>.

#gambar_miber { position:fixed; _position:absolute; top:-25px; left:5px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Kode diatas, akan menempatkan gambar kamu berada di pojok kiri atas. Untuk merubah letaknya, ganti text yg berwarna merah. Kata left menjadi right untuk posisi disebelah kanan. Jika ingin posisi-nya dibawah silahkan aja ganti kata top dengan bottom. 

eh, belum selesai lho.. jangan kabur dulu..  langkah selanjutnya cari kode tag </body> yang letak nya kira - kira berada di hampir bawah sendiri. dan letakan kode html berikut :

<div id='gambar_miber'> <a href="http://themyfo.blogspot.com"> <img alt='http://www.arieprastyo.com/images/stories/aku.jpg'  style='float: right; margin-top: 35px;'/></a> </div>

Kode yang berwarna merah adalah kode untuk menampilkan gambar melayang kita tadi. untuk merubah gambar tersebut sesuai keinginan mu, silahkan aja tinggal kamu ganti teks yang hitam tebal tersebut dengan target lokasi gambar yang kamu maksud. sedangkan untuk link target jika gambar tadi di klik maka ganti saja kode <a href="http://themyfo.blogspot.com"> dengan alamat URL yang kamu ingin kan.

kode di atas tadi adalah kode untuk menampilkan sebuah gambar saja dengan sebuah target link, sedangkan untuk membuat gambar melayang dengan status YM dibawah inilah kode HTML nya.. tenang aja, hampir sama yang diatas tadi kok.. 

div id='gambar_miber'> <a href='ymsgr:sendIM?space_naufal'> <img alt='Chat with me' border='0'  src='http://opi.yahoo.com/online?u=space_naufal&m=g&t=8'  style='float: right; margin-top: 35px;'/></a> </div>

jangan sampek lup, untuk teks yang hitam tebal di ganti dengan Id YM kamu sendiri

udah, save template dan jadi deh 

Posted in: Tips And Trik,Trik Blog