Cara Membuat Gambar Melayang di Blog

eLearning & Online Learning Blogs - BlogCatalog Blog Directory

Rabu, 28 Oktober 2009 06:26

Mungkin kalian agak sedikit bingung dalam mengartikan judul artike ini. maksudnya gimana seh gambar melayang di blog itu? ok deh gini, coba klik disini. lihat pojok kiri bawah kiri monitor kamu, ada gambar army gila nya kan? ketika scrol pada jendela browser kita naik turunkan, tuh gambar masih ngeyel buat tetep muncul disitu kan?! nah itu lah yang dinamakan gambar melayang pada blog. oke deh mari kita bahas selanjutnya tentang cara membuatnya. tetapi disini bukan berarti membuat armi gilanya di blog aku lho ya..

Seperti biasa, hal yang pertama dilakukan adalah kamu wajib login terlebih dahulu di blogger lalu 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://arieprastyo.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://arieprastyo.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?ari_zona24'>
<img alt='Chat with me' border='0'
src='http://opi.yahoo.com/online?u=ari_zona24&m=g&t=8'
style='float: right; margin-top: 35px;'/></a>
</div>