Cara Membuat Gambar Melayang

Halo para sahabat O.W, maksudnya Oto Website hehehe . . .
Dalam kesempatan kali ini kita akan update postingan lagi dan kali ini kita akan membahas tentang Cara Membuat Gambar Melayang, sobat sering ngelihat nggak ada gambar/image atau apa deh melayang di bagian Kiri Atas Kanan-Kiri Bawah Kanan-Kanan Atas Kanan dan di sebelah Kanan Bawah Atas blog yang sobat kunjungi? kalo iya ternyata cara membuat gambar tersebut melayang mudah sob!
O iya kalo sobat belum tau atau belum pernah ngelihat gambar melayang, sobat lihat tu di atas contoh gambar melayang di sudut blog!
Nah sekarang yang belum tau setelah ngelihat gambar di atas pasti sudah pada tau dong? kalo belum kebangetan deh, heheheh . . .
Yayaya . . . semakin lama semakin capek ni ngetiknya, oke kita lansung bahas caranya ya?! sebelumnya untuk cara memasangnya di blog sobat, Cara Membuat Gambar Melayang ini ada dua macam sob, yang pertama tanpa edit HTML aliat hanya menambah elemen HTML/Java Script di gadget blog sobat, dan yang kedua dengan cara Edit HTML. Terserah sobat deh mau make cara yang mana!
Udah jelas kan? ayo deh bahas Cara Membuat Gambar Melayang di blog sobat.

Cara Pertama:


1. Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Tambah Gadget di bagian mana saja(saya sarankan di bagian paling bawah dan jangan di beri judul) ➨ pilih HTML/Java Script.

3. Lalu copy kode scrip di bawah ini dan pastekan atau letakkan di dalah gadget HTML/Java Script tadi.

Posisi Kiri Atas;

<div style="display:scroll;position:fixed;top:0;left:0;"><a href="http://otowebsite.blogspot.com/" target="_blank">Url Gambar</a></div>

Posisi Kiri Bawah;

<div style="display:scroll;position:fixed;bottom:0;left:0;"><a href="http://otowebsite.blogspot.com/" terget="_blank">Url ganbar</a></div>

Posisi kanan Atas;

<div style="display:scroll;position:fixed;top:0;right:0;"><a href="http://otowebsite.blogspot.com/" terget="_blank"&gt;Url Gambar</a></div>

Posisi Kanan Bawah;

<div style="display:scroll;position:fixed;bottom:0;right:0;"><a href="http://otowebsite.blogspot.com/" target="_blank">Url Gambar</a></div>

4. Simpan.

Sekarang lihat sendiri hasilnya!

Cara Yang Kedua :

1. Login ke akun Blogger sobat

2. Pada menu klick Rancangan.➨ Edit HTML ➨ centang Expand Template Widget ➨ Download dulu template sobat, untuk mengantisipasi bila terjadi kesalahan.


3. Selanjutnya sobat cari kode ]]></b:skin>. jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML.


4. Jika sudah lalu sobat copy salah satu kode berikut dan letakkan di atas kode ]]></b:skin>

Posisi Kiri Atas:

#otowebsite_melayang_kiri_atas
 { 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); } #otowebsite_melayang_kiri_atas a
 img {border:0}; 

Posisi Kanan Atas:

#otowebsite_melayang_kanan_atas
 { 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); } #otowebsite_melayang_kanan_atas a
 img {border:0} 

Posisi Kiri Bawah:

#otowebsite_melayang_kiri_bawah
 { 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); } #otowebsite_melayang_kiri_bawah a
 img {border:0} 

Posisi Kanan Bawah:

#otowebsite_melayang_kanan_bawah
 { 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); } #otowebsite_melayang_kanan_bawah a
 img {border:0} 

4.Selanjutnya carilah kode </body> ,lalu letakan kode dibawah ini tepat diatasnya;

<div id="dutaxp_melayang"><a href="http://otowebsite.blogspot/"target="_blank">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGL-lGM4fM9SOrtzFvTJME1neDj3udafwuKZisWD5Urd6BOE1BwaU2hSyubfur6pIs6cBP3gWEtZHWA0Zr_iogmwdKphxwuI5bW_ZDDq6CeWG_RpOy3r_n6mnJOMTomCNs3e6lmtn2aaY/s320/bbbb.gif</div>

5. Klick pertinjauan terlebih dahulu, jika sudah berhasil baru klick simpan.

Keterangan:

• Kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGL-lGM4fM9SOrtzFvTJME1neDj3udafwuKZisWD5Urd6BOE1BwaU2hSyubfur6pIs6cBP3gWEtZHWA0Zr_iogmwdKphxwuI5bW_ZDDq6CeWG_RpOy3r_n6mnJOMTomCNs3e6lmtn2aaY/s320/bbbb.gif adalah Url gambar, itu hanya contoh silah sobat ganti dengan Url gambar atau script.
• Ganti http://www.otowebsite.blogspot.com/ dengan url tujuan.

Saya rasa cukup untuk kali ini semoga postingan atau articles Cara Membuat Gambar Melayang ini bisa bermanfaat untuk sobat semua!

Bagaiman apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas.