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.
- Catat alamat gambar yang sudah anda upoad.
- 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/AVvXsEjuOeZu692d3ysE8ACNODnIPwnq4sd_Wt9qM_i6uc4gr8Of7qHsXGSYFFX380pURG-YkIBFMzu-tAJ9r85hmXJJtn9dONuKCv_lfaOJo8bhDZfVx-6di9dSYVgL45frAjCQjJ7nh_8_9us/?imgmax=800'/></div> - Klik tombol simpan template.
- Selesai. Silahkan lihat hasilnya.
#top_image {Kode yang berwarna merah adalah kode yg bisa anda ganti sesuai keinginan.
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); }
Untuk pojok kanan bawah :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 :
bottom:5px;
right:5px;
Untuk pojok kanan atas :
top:5px;
right:5px;
Untuk pojok kiri atas
top:5px;
left:5px;
<div id='top_image'>Selamat mencoba!
<a href="http://megi-rahman.blogspot.com"><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuOeZu692d3ysE8ACNODnIPwnq4sd_Wt9qM_i6uc4gr8Of7qHsXGSYFFX380pURG-YkIBFMzu-tAJ9r85hmXJJtn9dONuKCv_lfaOJo8bhDZfVx-6di9dSYVgL45frAjCQjJ7nh_8_9us/?imgmax=800'/> </a>
</div>
Sumber [dengan sedikit perubahan]
1 comments:
Menarik ini maz
Post a Comment
Jangan lupa ninggalin jejak dengan komentar ^_^