Memasang Float image / gambar berjalan di pojok pada blog




Menanggapi banyaknya pertanyaan yang datang mengenai cara membuat gambar pojok atau Float Image ini, maka saya berinisiatif untuk membagi trik mengenai cara pemasangan float image ini pada sahabat pembaca setia semua. untuk mengetahui apa itu float image anda dapat melihat contohnya pada gambar pojok yang terdapat di sudut kiri paling bawah blog ini. itu lho gambar bebek yang berlari-lari, nah itulah yang dimaksud dengan float image. Sebenarnya Float image bukanlah hal baru yang lahir pada make over blog. Jauh sebelum sekarang telah banyak orang yang mengetahui tenteng cara memasangnya. Ada beberapa cara yang biasa para blogger tempuh untuk memasang gambar pojok ini. Ada yang memasangnya dengan meminta bantuan kode adiwidget yang dapat dilakukan dengan otomatis dan ada pula yang memasang kode ini secara manual dengan mengcopy paste kodenya ke elemen edit html

Tetapi pada postingan kali ini saya akan membahas cara manual untuk memasang float image atau gambar pojok ini. Tetapi bagi anda yang ingin mendapatkan bantuan kode dari adi widget silahkan kunjungi disini Nah inilah resep rahasianya :

1. sign in ke blogger

2. sesampainya di dashboard klik [Tata Letak] >> [Edit Html]

3. kemudian di kotak pengeditan Html silahkan anda cari kode ]]></b:skin> dan setelah ketemu silahkan anda pastekan kode dibawah ini tepat di atas kode ]]></b:skin> Gunakan ctrl+f untuk menemukan kode diatas dengan mudah

#trik_pojok {
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); }


4. Text yang beerwarna merah adalah posisinya, kalau pingin ganti di posisi lain misalnya di sisi pojok kanan bawah tinggal ganti tulisan "left" dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".

5. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>


<div id="trik_pojok">
<a href="http://resep-jitu.blogspot.com">
<img src="http://i496.photobucket.com/albums/rr327/handaka_photo/1MOUSE1.gif " border="0" /></a>
</div>


5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.\

6. Simpan hasil kerja kamu dan lihat hasilnya.

Keterangan :

- "http://resep-jitu.blogspot.com" adalah link aku, bisa diganti dengan link lain.

-"http://i496.photobucket.com/albums/rr327/handaka_photo/1MOUSE1.gif" adalah alamat server gambar yang akan dipasang. Bisa diganti dengan alamat server gambar lainnya yang ingin kamu tampilkan.
-selain itu anda juga dapat memasang gambara anda sendiri yang sebelumnya sudah anda upload ke server seperti photo bucket

8. Selamat mencoba …….!!!!!





Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan Disini:


0 komentar:

Posting Komentar