Cara memasang gambar yang akan selalu muncul di bagian depan blog, gambar tersebut akan selalu muncul walaupun pengunjung melakukan scrolling ke halaman bagian bawah blog anda, bisa berupa gambar saja ataupun gambar sebagai menu link.
Berikut adalah langkah langkahnya :
Langkah Pertama
1. Buatlah gambar yang ingin anda tampilkan. Saya sarankan gambar tersebut sekitar 100 X 100 agar tidak terlalu mengganggu. Format gambar terserah anda,animasi atau bukan juga bisa.
2. uploadlah gambar tersebut ke hosting tempat anda menyimpan gambar.
3. Catat alamat gambar yang sudah anda upload.
Langkah Kedua
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)
<div id="top_image">
<img src="http://i40.tinypic.com/23ssyn5.jpg" border="0" />
</div>
8. Klik tombol simpan template.
9. Selesai.
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 bottom dan left 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 link, anda hanya menambahkan kode link di dalamnya. contoh :
<div id="top_image">
<a href="http://blogentong-freetutorial.blogspot.com/search/label/Coreldraw"><img src="http://i40.tinypic.com/23ssyn5.jpg" border="0" /> </a>
</div>
Selamat mencoba!
Comments :
0 komentar to “Pasang Gambar Always On Top”
Posting Komentar
Silahkan Komentar Anda, No spam No Porn