Membuat Gambar Melayang Pada Blog

Buat sobat yang masih belum mengerti tentang gambar melayang pada blogspot, berikut saya jelaskan secara singkat. 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 sobat pakai di posisi gambar melayang ini, tapi counter, Status YM, iklan dan lain-lain.

Ok, buat sobat yang ingin mencoba tips ini, silahkan ikuti tutorial berikut ini, tapi sebelumnya back up dulu templatesobat agar jika terjadi kesalahan dan template blog sobat tidak rusak. Berikut step-step yang harus sobat lakukan :

1. Log ini ke akun blogger sobat;
2. Pilih menu Rancangan » Edit HTML;
3. Beri tanda centang pada tulisan Expand Template Widget;
4. Carilah kode ]]></b:skin>. setelah jumpa, sisipkan kode berikut ini tepat diatasnya. Eh iya pilih salah satu kode dari 4 pilihan posisi dibawah ini, jangan dicopy semuanya. Maksudnya misalnya anda memilih "posisi kiri atas", maka gambar melayang akan ada disebelah kiri atas layar;

Posisi kiri atas
#rizki_melayang { top:10px; left:10px; position:fixed; _position:absolute; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); } #rizki_melayang a img {border:0};

Posisi kanan atas
#rizki_melayang { top:10px; right:10px; position:fixed; _position:absolute; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); } #rizki_melayang a img {border:0}

Posisi kiri bawah
#rizki_melayang { bottom:10px; left:10px; position:fixed; _position:absolute; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); } #rizki_melayang a img {border:0}

Posisi kanan bawah
#rizki_melayang { bottom:10px; right:10px; position:fixed; _position:absolute; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); } #rizki_melayang a img {border:0}

5. Selanjutnya carilah kode </body>, kalau sudah ketemu maka letakkan kode dibawah ini tepat diatasnya;

<div id="rizki_melayang">
<a href="http://www.wakrizki.net/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH154hfKJgiXhIgT4yKQiGvzWDBOKYyV8WVhMvm3ePw42ovmr5y3ay7pVfOCW9yRVpt5HL2oHqRDhhi5aNBVUt17SPQJgOrn5RIWZLRIPgqx8JiZiD1FMBLmoi8suiwlgITGMY4mvmhCU/s220/rizki+khaizir.jpg"/></a>
</div>

Kode diatas silahkan diedit dulu, warna merah ganti dengan alamat target halaman yang kamu inginkan, sedangkan warna biru adalah alamat gambar yang ingin dipasang.

Ingat! kode ini hanya berlaku untuk 1 posisi, jika sobat ingin memasang di banyak sisi menggunakan kode ini, silahkan sobat ganti ID dari setiap kode, misalnya sobat ingin memasang di sudut kanan atas, maka yang perlu sobat ganti adalah kode #rizki_melayang dengan kode yang sobat inginkan, misalnya bisa saja sobat ganti dengan #rizki_melayang_kanan_atas atau apa saja yang penting kode ID antara kedua kode sama.

Selamat mencoba, semoga berhasil.

Artikel terkait :