Bikin Gambar Melayang

Sunday, February 14, 2010

Bikin Gambar Melayang

Saya merasa sangat terbantu oleh para pemilik blog tutorial buat blogspot... Makanya, dengan rasa hormat, saya copas sebagian informasi yang saya dapatkan di sini, sebagai membagikan ilmu agar lebih bermanfaatkan.. tentunya, berbagi tidak pernah rugi.... makasih buat albri. Kedepan, Insya Allah, yusako akan membagi-bagikan ilmu yang didapat dari blogger-blogger di ranah per-blog-an, yaa, semoga jadi tambah banyak info ter-record di paman Google.. *kalau saya mah belum ada ilmu nya, masih pengetahuan dari mambaca link-link orang.. hihihi..*

Gambar melayang yang dimaksud adalah seperti gambar back to top di blog ini, bukan membikin gambar melayang ke angkasa. Gambar tersebut akan selalu tampil saat halaman digulung. Gambar melayang dapat diisi iklan gambar dan lain-lain, tujuannya tentu agar diperhatikan. Dengan selalu tampil sepanjang halaman-halaman blog dibuka maka kemungkinan menarik pengunjung melihat tentu tinggi. Ini salah satu trik dasar sebuah website atau blog. 
 

Artikel tutorial ini sebenarnya menjawab pertanyaan kawan blogger pada email masuk. Daripada saya balas via email lebih baik saya posting disini, itung-itung nambah postingan. Karena search engine google konon cinta sama blog/website yang kaya konten, begitu katanya setelah saya tahu Google lebih mendalam. 

Begini nih cara memasang di blogspot:

PERTAMA
Masuk ke blogger dashboard dan masuk pada edit template. Kemudian cari kode: 

Kalau sudah ketemu copy code dibawah ini dan paste diatas kode tadi. Eh iya pilih salah satu kode dari 4 pilihan posisi dibawah ini, jangan dicopy semuanya. Maksudnya misalnya anda memilih "posisi kiri atas", maka gambar melayang akan ada disebelah kiri atas layar.

kalau mau ditempatin di kiri atas, copas lah kode yang ini:

#ngawang {
top:10px;
left:10px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#ngawang a img {border:0}

kalau mau ditempatin di kanan atas, copas lah kode yang ini:

#ngawang {
top:10px;
right:10px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#ngawang a img {border:0}

kalau mau ditempatin di kiri bawah, copas lah kode yang ini:

#ngawang {
bottom:10px;
left:10px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#ngawang a img {border:0}

kalau mau ditempatin di kanan bawah, copas lah kode yang ini:

#ngawang {
bottom:10px;
right:10px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#ngawang a img {border:0}

Sudah? simpan template anda untuk mengecek apakah ada error apa tidak.

KEDUA
Sekarang cari kode: (dibagian bawah template)

Kalau sudah ketemu maka letakkan kode dibawah ini diatas kode tadi. 


Kode diatas silahkan diedit dulu, warna merah ganti dengan alamat target halaman yang kamu inginkan, sedangkan warna hijau adalah alamat gambar yang ingin dipasang.  Gimana? sudah Siip? pastikan kode gak ada yang salah.. dan Save deh... jadilah melayang... :) Semoga bermanfaat, Sobtz Yusako!