-->

7/18/2010

Membuat Gambar Melayang (Floating Image)

Salah satu cara untuk mempercantik tampilan blog kita adalah dengan menambahkan Floating image/ gambar melayang. Floating image atau gambar melayang adalah gambar yang terlihat melayang dan tidak terpengaruh atau bergerak ketika suatu halaman web digerakkan dengan men-schroll browser.



Cara Membuat Gambar Melayang atau floating image pada blog sangat mudah. Hal pertama yang harus kita lakukan adalah menyiapkan sebuah gambar yang sudah diupload sehingga kita memiliki url dari gambar tersebut. Biasanya, gambar floating image adalah gambar-gambar yang menampilkan informasi penting. Bisa juga floating image atau gambar melayang digunakan sebagai logo feed blog kita, sehingga apabila gambar tersebut di klik, langsung menuju halaman feed kita.


Tutorial atau cara membuat floating image :

1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. masukkan kode berikut ini sebelum kode </body> :

untuk gambar yang terletak di pojok atas kanan, kodenya :

<a href='http://www.URLtujuan.com' style='display:scroll;position: fixed; top:5px;right:5px;' title='ganti title anda disini'><img src='URL gambar kalian'/></a>

untuk gambar yang terletak di pojok atas kiri, kodenya :

<a href='http://www.URLtujuan.com' style='display:scroll;position: fixed; top:5px;left:5px;' title='ganti title anda disini' ><img src='URL gambar kalian'/></a>

untuk gambar yang terletak di pojok bawah kiri, kodenya :

<a href='http://www.URLtujuan.com' style='display:scroll;position: fixed; bottom:5px;letf:5px;' title='ganti title anda disini'><img src='URL gambar kalian'/></a>

untuk gambar yang terletak di pojok bawah kanan, kodenya :

<a href='http://www.URLtujuan.com' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='ganti title anda disini'><img src='URL gambar kalian'/></a>

3. Klik simpan, dan reload browser anda. Floating image sudah siap digunakan.

Oh iya. Jika menginginkan menampilkan sebuah java script, caranya hampir sama dengan cara diatas, tinggal ganti

<img src='URL gambar kalian'/> dengan kode script anda, selangkapnya seperti terlihat dibawah :

<a href='http://www.URLtujuan.com' style='display:scroll;position: fixed; top:5px;right:5px;' title='ganti title anda disini'> <Script> </a>

Selesai sudah cara memasang floating image atau gambar melayang. Gambar yang akan kalian pasang bisa berupa gambar "follow twitter" yang linknya menuju ke twitter kalian juga bisa atau gambar logo feed yang linknya menuju halaman feed kalian. Selamat mencoba dan berkreasi dengan blog anda.

Tidak ada komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...