Membuat Gambar Melayang di Blogger

Mungkin anda bingung dengan kata "Gambar Melayang di Blogger". Mungkin anda kira gambarnya keluar dari monitor komputer anda, lalu terbang kesana kemari. Hahaha.. (Kiding ne). Oke deh,, maksudnya yaitu, seperti gambar yang ada di pojok kiri bawah blog ini (gambar pinguin yang imut - imut itu lho). Pengen kan buatnya..? Yuk mari kita pelajari.

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 anda 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://img39.photobucket.com/albums/v121/diffdrummer/News/penguin.gif' 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://img39.photobucket.com/albums/v121/diffdrummer/News/penguin.gif"> 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>

 

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

Setelah itu save template.

Jadi deh, semoga sukses sobat.

Artikel Menarik Lainnya

Mungkin anda bingung dengan kata "Gambar Melayang di Blogger". Mungkin anda kira gambarnya keluar dari monitor komputer anda, lalu terbang kesana kemari. Hahaha.. (Kiding ne). Oke deh,, maksudnya yaitu, seperti gambar yang ada di pojok kiri bawah blog ini (gambar pinguin yang imut - imut itu lho). Pengen kan buatnya..? Yuk mari kita pelajari.

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 anda 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://img39.photobucket.com/albums/v121/diffdrummer/News/penguin.gif' 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://img39.photobucket.com/albums/v121/diffdrummer/News/penguin.gif"> 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>

 

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

Setelah itu save template.

Jadi deh, semoga sukses sobat.

Lanjut Baca. . .>>>