You are here
Home > Internet >

Tutorial Fixed Gambar

tutorial fixed gambar melayang javascript blogger

Tutorial Fixed Gambar – Perhatian: Tutorial ini sesuai untuk pengguna tegar Blogger.Com kerana platform Blogger tidak sama seperti platform blog lain yang mempunyai plugin-pugin yang banyak seperti platform WordPress. Saya sendiri melalui blog ini menggunakan platform WordPress. Namun platform Blogger masih saya gunakan dan tak tinggal, tambahan pula Blogger lah tempat pertama dan terawal saya berjinak-jinak dalam berblogging. Saya ada banyak blog di dalam akaun Blogger yang dibuat berdasarkan niche, setiap akaun boleh membuat 100 blog. Dalam blog-blog tu banyak script yang aku letak, termasuklah membuat fixed gambar javascript ni.

Sebenarnya tutorial ini tidaklah susah seperti yang anda fikirkan, scriptnya pendek sahaja, cuma kalu anda mahu menokok tambah maka jadilah ia panjang-panjang, itupun kerana anda copy dan paste code javascript itu. Ikuti cara-cara berikut bagaimana membuat fixed gambar melayang:

1. Login Akaun Blogger.Com anda di http://www.blogger.com/ atau di http://blogspot.com/ atau di http://draft.blogger.com/ (Hehe, semua pautan ni sama saja lah, sengaja saya kongsi sebagai maklumat umum tambahan)

2. Kemudian anda pergi ke Layout >> Edit Template, dan cari kode ini : ]]></b:skin>, atau dibahagian kode CSS.

3. Kemudian, letakan kode dibawah ini diatas kode ]]></b:skin> tadi, :
#afiff_pic {
position:fixed;_position:relative;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

tulisan yang berwarna hijau adalah posisi gambar.

4. Selanjutnya adalah menambah kode Html yang akan mengesekusi gambar . Carilah kode </body> dan letakan script berikut ini ke atasnya : <div id='afiff_pic'>
<a href='http://alamat-blog-anda.blogspot.com'>
<img alt='' border='0' src='letakan url gambar disini'/></a>
</div>

Catatan: Sebelum disimpan/save anda perlu menukar tulisan berwarna hijau >>> http://alamat-blog-anda.blogspot.com dengan alamat blog anda, dan letakan url gambar disini dengan alamat/url gambar yang kamu hendak buat ia melayang.

5. Akhir sekali, jangan lupa klik Save Template dan lihatlah/refresh blog anda samada sudah ada gambar melayang ataupun tidak.

Tambahan:

Gambar melayang/fixed boleh di buat hingga beberapa buah, di atas, bawah, kiri dan kanan. Caranya dengan menambah atau copy paste kode tadi di atas kode kedua diatas.

Contoh : #afiff_pic {
position:fixed;_position:relative;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

#afiff_pic2 {
position:fixed;_position:relative;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

dan dibahagian Html juga ditambahkan kode dibawahnya, dengan catatan ditambah angka agar tidak sama id nya nanti.

<div id='afiff_pic'>
<a href='http://alamat-blog-anda.blogspot.com'>
<img alt='' border='0' src='letakan url gambar disini'/></a>
</div>

<div id='afiff_pic2'>
<a href='http://alamat-blog-anda.blogspot.com'>
<img alt='' border='0' src='letakan url gambar disini'/></a>
</div>

Keyword: ID = afiff_pic dan afiff_pic2

Ha, bagaimana, adakah gambar fixed di blog anda berlanggaran seperti atom2. Harapnya tidaklah. Setakat itu sahaja tutorial saya untuk kali ini. Jumpa lagi.

Leave a Reply

Top