Saat ini saya akan membahas bagaimana cara membuat di blog. gambar melayang adalah gambar yang letaknya selalu tetap dan tidak terpengaruh scrool mouse. Apakah sobat tertarik membuatnya ???. Sebelum membuatnya, sobat harus menyiapkan gambar. terserah sobat mau gambar bergerak yang biasanya berformat .gif atau gambar bisa yang berformat .jpeg atau bisa juga gambar foto kita...hehehe biar narsis.
Gambar yang ingin dipasang lalu di upload atau disimpan di image hosting. sobat bisa menyimpannya di photobucket.com, imageshack.com, flickr.com atau image hosting lain. Tetapi untuk gambar dengan format .gif saya biasa menyimpannya di imageshack.com. ooo...iya saya sarankan, gambar yang ingin dibuat melayang sebaiknya gambarnya jangan besar-besar karena dapat mengganggu pengunjung blog kita.
Nah untuk step-step selanjutnya akan saya tulis lebih ringkas. Setelah sobat menyimpan di image hosting, inilah yang harus sobat lakukan :
1. Login Acount blogger anda.
2. Masuk pada Pengaturan.
3. Pilih Tata letak.
4. Edit html.
5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin >
#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
Ket : Kode yang tercetak kuning ( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.
6. Berikutnya cari lagi di dalam template anda kode < /body >
Kemudian copy pastekan code berikut ini dan letakkan diatas kode tersebut.
<div id='melayang'>
<img src='http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/></a>
</div>
Ket : kode yang berwarna kuning diganti dengan url tempat gambar anda disimpan.
7. Simpan, jadi deh........
o....ya, kalo anda suka dengan blog ini pasang banner saya atuh.....Okeeey
wah... keyeeen.... nicepost bro.....
BalasHapussalam akrab dri Riau
keren banget sob.... artikelnya membantu banget...
BalasHapusnumpang belajar sob...
thank's buat infonya ya dan salam kenal.
BalasHapuswah asyik bgtz...sanagat bermanfaat sekali thanks y...
BalasHapussmga amal ibdahnnya mendapat ganjaran dr ALLAH SWT<,,,amien
keren boz
BalasHapusemang mantap tutor nya terimakasih banyak mas
BalasHapusmakacih allll
BalasHapusSalam kenal dari wong Ngawi...thank info2nya ya jd tambah ilmu nya...banner dah aq pasang di blog aq...pasang balik yaaaa..???
BalasHapuskeren gw udah nyoba ..
BalasHapusthanks yah,kunjungi juga yah blog gw chokyaja.blogspot.com
bagus2 tipsnya sob, keren euy..
BalasHapussaling kunjung yah..thx
sob ada tulisan kayak gini -> Kami tidak dapat Menyimpan template Anda.
BalasHapusHarap Perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan Bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "div" harus diakhiri oleh akhir pencocokan tag "
Ya Akhi, gambar sudah di uplode ke #melayang ko ga melayang yah, ada cara lain?
BalasHapusbagus banget.........
BalasHapusblog Mas bagus banget... pengen aku bisa...
BalasHapusndak mau keluar gambarnya...
BalasHapuswaktu script diatas body yang /a aku pake. tidak bisa disimpan. waktu aku hapus, bisa disimpan tapi gambar ndak keluar. Napa yah...???
:a:
:f Hahahaha.. Contohnya ada di blogku.
BalasHapussy juga masalahnya sama dgn mas transformers_boys, gmn solusinya?
BalasHapus@fathmochi: pastikan kode ini sudah benar
BalasHapus<div id='melayang'>
<img src='http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/></a>
</div>
kalo belum berhasil juga, tambahkan kode </div> seperti ini:
<div id='melayang'>
<img src='http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/></a>
</div>
</div>
Afwn ane dah coba buat gambar melayang tp belum berhasil juga bahkan cara yang antum berikan udah ane coba, tp muncul tulisan : Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
BalasHapusPesan error XML: The element type "div" must be terminated by the matching end-tag "
Pa ya kekurangannya, pada hal ane teliti bgt. o...iya pada saat ane mencari kode body tidak muncul, tp ane coba cari satu2 kode HTML di blog tsbt ternyata ada n ane coba copy paste kode melayang kedua n ane save, maka muncul tulisan di atas. Afwn jiddan banyak tanya
Sob, kmu dapet award...di ambil ya...
BalasHapustop blog sob .... liat blog w jga y .. hehe ..
BalasHapusTerima kasih atas tutorialnya, sudah saya praktekan dan berhasil :)
BalasHapus:e: kok gx bisa gan silit banget
BalasHapus:a: :b: :c: :d: :e: :f: :
BalasHapuslangsung diterapkan di blog http://top-rekomendasi.blogspot.com/ makasih tutorialnya mas..
BalasHapuslangsung diterapkan di blog http://top-rekomendasi.blogspot.com/ makasih tutorialnya mas..
BalasHapuskok g bisa di hapus ya?
BalasHapusnuhun kang ^_^
BalasHapussaya mau izin share mas!!!
BalasHapusNice tips,,, keep it up,,, (lagaknya pake bhs inggris),, hehehe
BalasHapustak gigit kamu
BalasHapus:e:
duuuhh... ga bbisa nih bang.......
BalasHapusudah tambah div nya tapi ttp ga bisa
Ikut nyundul kang....
BalasHapuswah... bisa di coba nih...
BalasHapusthank you bos :D
Untuk kode ]> nya di perjelas gan,,, kasian yang masih belajar,,, Taik loe.
BalasHapusini ada sedikit bantuan aja Gan, bukan sombong cuman mau kasik masukan soal coding melayang
BalasHapusuntuk coding:
<div id='melayang'>
<img src='http://gambar kamu'/></a>
</div>
itu kurang lengkap bro.. cuman kasik <a> kayak coding dibawah ini
<div id='melayang'><a>
<img src='http://gambar kamu'/></a>
</div>
semoga berhasil
makasih gan,,salam kenal,,vissit my blog http://gopar-gt.blogspot.com/
BalasHapusterima kasih infonya sob.
BalasHapussungguh kreatif sekali dan template blog anda simple.
dan sepertinya anda mempunyai kelebihan tersendiri.
bila ada waktu saya akan berkunjung lagi sob :)
#Semoga Sehat Selalu :)
sip dah thanks gan
BalasHapusterimakasih sekali info-infonya
BalasHapusartikelnya bagus dan bermanfaat gan, mksih atas infonya dan sukses selalu ya gan :)
BalasHapuspenerjemah bahasa jerman
penerjemah bahasa belanda
Nice Post.
BalasHapusjangan lupa follow www.markuskututomcat.blogspot.com
mantap dah.. Artikelnya
BalasHapusVer sangat informatif pos. Terima kasih.
BalasHapus