/* Kotak Banner ===================== */ #Box-Banner-ads { margin: 0px; padding: 5px; text-align: center; } #Box-Banner-ads img { margin: 0px 8px 4px 0px; padding: 3px; text-align: center; border: 3px outset #c0c0c0; } #Box-Banner-ads img:hover { margin: 0px 8px 4px 0px; padding: 3px; text-align: center; border: 3px inset #333; }

Saturday, March 9, 2013

Cra buat gambar melayang di blog



http://topnewssoccer.blogspot.com/
Ternyata ada juga blogger yang masih bingung tentang cara membuat gambar melayang di blogspot. Buktinya ada pesan di buku tamu dari Sdr.Ucup (kimura_cs@yahoo.com). "Maaf mau tanya, klo nampilin gambar bendera itu gmn? boleh minta codenya. Kirim ke email saya ya..?". Gambar bendera pada blog ini maksudnya gambar melayang yang ada di sudut bawah blog. Jadi, inti yang ditanyakan gimana cara membuat gambar melayang di blog. Padahal tutorialnya banyak ya?, dari yang berbahasa inggris, hingga berbahasa indonesia. Mungkinkah bahasa tutotialnya kurang di mengerti? Atau si Ucup enggan mengunjungi rumahnya Paman Google? Entahlah.. Yang pasti berikut tutorial ulangnya yang di ambil dari berbagai sumber.
Gambar melayang adalah gambar yang letaknya selalu tetap dan tidak terpengaruh oleh scrool mouse. Maksudnya kita dapat membuat gambar seperti melayang di kanan, kiri, bawah, atas walaupun Scrollbar ditarik kemana-mana. Dan bukan hanya gambar yang bisa Anda pakai di posisi gambar melayang ini, tapi counter, Status YM, iklan dan lain-lain.

Sebelumnya back up dulu template Anda, agar jika terjadi kesalahan dan template blog Anda tidak rusak. Berikut step-step yang harus sobat lakukan :
  1. Login ke Acount blogger anda.
  2. Masuk pada Pengaturan.
  3. Pilih Tata letak.
  4. Pilih Edit html.
  5. Cari kode ini ]]></b:skin> truz copy paste kode di bawah ini di atas kode ]]></b:skin>
#melayang {
position:fixed;_position:absolute
;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  1. Berikutnya cari lagi di dalam template anda kode </body> Kemudian copy pastekan code dibawah ini dan letakkan diatas kode </body>.
<div id='melayang'>
<a href
='http://ifoell.blogspot.com/'>
<img border='0' src='http://i437.photobucket.com/albums/qq96/bloganakbangsa/benderamerahputih.gif'/></a></div>
7.Simpan, Selesai deh....

0 comments:

Post a Comment