Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

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 :

doraemonimg

Tertarik ingin tahu triknya? Berikut adalah langkah langkahnya :

Langkah #1

  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 :

    Doraemon

  2. uploadlah gambar tersebut ke hosting tempat anda menyipan gambar. Belum tahu cara upload gambar? Baca dulu posting yang ini.
  3. Catat alamat gambar yang sudah anda upoad.

Langkah #2

  1. Silahkan login ke blogger dengan ID anda
  2. Klik Tata Letak.
  3. Klik Tab Edit HTML
  4. Klik tulisan Download Template Lengkap. silahkan backup dulu templatenya biar aman.
  5. 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); }

  6. Silahkan cari kode <body> di template anda.
  7. Copy lalu paste kode berikut persis di bawah kode <body> (ini contoh saja)
  8. Klik tombol simpan template.
  9. 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!

Iklan

20 Desember 2008 - Posted by | blogspot tutorial

Belum ada komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: