Membuat Gambar Melayang di Blog

Saat ini saya akan membahas bagaimana cara membuat gambar melayang 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

44 komentar:

  1. wah... keyeeen.... nicepost bro.....
    salam akrab dri Riau

    BalasHapus
  2. keren banget sob.... artikelnya membantu banget...
    numpang belajar sob...

    BalasHapus
  3. thank's buat infonya ya dan salam kenal.

    BalasHapus
  4. wah asyik bgtz...sanagat bermanfaat sekali thanks y...
    smga amal ibdahnnya mendapat ganjaran dr ALLAH SWT<,,,amien

    BalasHapus
  5. emang mantap tutor nya terimakasih banyak mas

    BalasHapus
  6. Salam kenal dari wong Ngawi...thank info2nya ya jd tambah ilmu nya...banner dah aq pasang di blog aq...pasang balik yaaaa..???

    BalasHapus
  7. keren gw udah nyoba ..
    thanks yah,kunjungi juga yah blog gw chokyaja.blogspot.com

    BalasHapus
  8. bagus2 tipsnya sob, keren euy..
    saling kunjung yah..thx

    BalasHapus
  9. sob ada tulisan kayak gini -> Kami tidak dapat Menyimpan template Anda.
    Harap 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 "

    BalasHapus
  10. Ya Akhi, gambar sudah di uplode ke #melayang ko ga melayang yah, ada cara lain?

    BalasHapus
  11. blog Mas bagus banget... pengen aku bisa...

    BalasHapus
  12. ndak mau keluar gambarnya...
    waktu script diatas body yang /a aku pake. tidak bisa disimpan. waktu aku hapus, bisa disimpan tapi gambar ndak keluar. Napa yah...???
    :a:

    BalasHapus
  13. demitnet.blogspot.com30 April 2010 pukul 18.45

    :f Hahahaha.. Contohnya ada di blogku.

    BalasHapus
  14. sy juga masalahnya sama dgn mas transformers_boys, gmn solusinya?

    BalasHapus
  15. @fathmochi: pastikan kode ini sudah benar

    <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>

    BalasHapus
  16. 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.
    Pesan 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

    BalasHapus
  17. Sob, kmu dapet award...di ambil ya...

    BalasHapus
  18. top blog sob .... liat blog w jga y .. hehe ..

    BalasHapus
  19. Terima kasih atas tutorialnya, sudah saya praktekan dan berhasil :)

    BalasHapus
  20. :e: kok gx bisa gan silit banget

    BalasHapus
  21. :a: :b: :c: :d: :e: :f: :

    BalasHapus
  22. langsung diterapkan di blog http://top-rekomendasi.blogspot.com/ makasih tutorialnya mas..

    BalasHapus
  23. langsung diterapkan di blog http://top-rekomendasi.blogspot.com/ makasih tutorialnya mas..

    BalasHapus
  24. saya mau izin share mas!!!

    BalasHapus
  25. Nice tips,,, keep it up,,, (lagaknya pake bhs inggris),, hehehe

    BalasHapus
  26. duuuhh... ga bbisa nih bang.......
    udah tambah div nya tapi ttp ga bisa

    BalasHapus
  27. Ikut nyundul kang....

    BalasHapus
  28. wah... bisa di coba nih...
    thank you bos :D

    BalasHapus
  29. Untuk kode ]> nya di perjelas gan,,, kasian yang masih belajar,,, Taik loe.

    BalasHapus
  30. ini ada sedikit bantuan aja Gan, bukan sombong cuman mau kasik masukan soal coding melayang

    untuk 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

    BalasHapus
  31. makasih gan,,salam kenal,,vissit my blog http://gopar-gt.blogspot.com/

    BalasHapus
  32. terima kasih infonya sob.
    sungguh kreatif sekali dan template blog anda simple.
    dan sepertinya anda mempunyai kelebihan tersendiri.
    bila ada waktu saya akan berkunjung lagi sob :)


    #Semoga Sehat Selalu :)

    BalasHapus
  33. artikelnya bagus dan bermanfaat gan, mksih atas infonya dan sukses selalu ya gan :)


    penerjemah bahasa jerman
    penerjemah bahasa belanda

    BalasHapus
  34. Nice Post.
    jangan lupa follow www.markuskututomcat.blogspot.com

    BalasHapus
  35. Ver sangat informatif pos. Terima kasih.

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.