Benedict: Pasang gambar Always On Top

Ada info menarik bagi anda yang suka memajang gambar di blognya. Info kali ini adalah tentang cara memasang gambar yang akan selalu muncul di bagian depan blog anda, gambar tersebut akan selalu muncul walaupun pengunjung melakukan scrolling ke halaman bagian bawah blog anda,Screenshot nya seperti ini :

Tertarik ingin tahu triknya? Berikut adalah langkah langkahnya :

Langkah #1

Buatlah gambar yang ingin anda tampilkan nanti. Saya sarankan gambar tersebut sekitar 125 X 125 agar tidak terlalu mengganggu pengunjung anda. Format gambar terserah anda, bentuk animasipun tentu saja boleh. Contoh Gambar :
uploadlah gambar tersebut ke hosting tempat anda menyipan gambar. Belum tahu cara upload gambar? Baca dulu posting yang ini.
Catat alamat gambar yang sudah anda upoad.

Langkah #2

Silahkan login ke blogger dengan ID anda
Klik Tata Letak.
Klik Tab Edit HTML
Klik tulisan Download Template Lengkap. silahkan backup dulu templatenya biar aman.
Copy lalu paste kode berikut persis di atas kode ]>><b:skin>

#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
Silahkan cari kode <body> di template anda.
Copy lalu paste kode berikut persis di bawah kode <body> (ini contoh saja)

<div id='top_image'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42w9iI_6fSfoXu4ouALgzZG-DEtZ5KFpGrFt4BeVsHKm35O2PaDEjgVM6evUSZnnKJrnQ0KE5DDh_s1rTdEbMqsD1JM0lMCeFmszZBzwR2Z_98zusJJIeJLAReZPWjyLXIBkVzsn3_8M/?imgmax=800'/>
</div>
Klik tombol simpan template.
Selesai. Silahkan lihat hasilnya.

Secara default kode di atas adalah untuk menampilkan gambar di sebelah pojok kiri bawah layar monitor. Posisi tersebut bisa anda ubah sesuai keinginan, misal ingin di simpan di sebelah pojok kanan bawah, pojok atas kanan ataupun pojok atas kiri. Kode yang bisa anda edit adalah seperti ini ;

#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

kode yang berwarna merah adalah kode yg bisa anda ganti sesuai keinginan.

Untuk pojok kanan bawah :

bottom:5px;

right:5px;

untuk pojok kanan atas :

top:5px;

right:5px;

untuk pojok kiri atas

top:5px;

left:5px;

Pada contoh di atas, gambar yang tampil tidak bisa di klik. Jika anda menginginkan agar gambar ada bisa di klik atau nge link, anda hanya menambahkan kode link di dalamnya. contoh :

Selamat mencoba!

Saturday, December 20, 2008

Pasang gambar Always On Top