Cara Bikin Gambar Melayang

Mungkin anda agak sedikit bingung juga dengan apa itu gambar melayang, nah...biar lebih jelasnya silahkan liat screenshoot dibawah ini :


Dari screenshoot diatas, anda bisa lihat gambar icon YM yang ditunjuk dengan tanda panah itu. Nah...itu dia yang saya sebut dengan gambar melayang. Knapa disebut melayang, karena kalo anda scrool blog anda, maka gambar icon YM tersebut akan tetap berada dan terlihat seperti melayang diatas blog. Kalo ga percaya, silahkan anda coba sendiri dengan menggulung blog ini kebawah dan lihat apakah letak gambar YM itu berubah atau tidak.

Bagaimana cara buatnya, silahkan ikuti langkah2nya di bawah ini :
  • Seperti biasa, anda login terlebih dahulu di blogger lalu menuju ke layout dan edit HTML

  • Biar ngga bingung, jangan kasih tanda centang pada kolom expand template widget

  • Setelah itu, cari kode ]]></b:skin> dan letakkan diatasnya kode CSS berikut :

    #gambar_melayang {
    position:fixed;
    _position:absolute;
    top:-25px;
    left:5px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


    Kode CSS diatas, akan menempatkan gambar anda berada di pojok kiri atas. Untuk merubah letaknya, silahkan ganti text yg berwarna merah. Kata left menjadi right untuk posisi disebelah kanan. Jika ingin posisi-nya dibawah silahkan ganti kata top dengan bottom

  • Selanjutnya, cari kode tag </body> dan letakkan diatasnya kode html berikut :

    <div id='gambar_melayang'>
    <a href='ymsgr:sendIM?miz_doc86'>
    <img alt='Chat with me' border='0'
    src='http://opi.yahoo.com/online?u=miz_doc86&m=g&t=8'
    style='float: right; margin-top: 35px;'/></a>
    </div>


    Kode yang berwarna merah adalah kode untuk menampilkan status icon ym saya. Untuk merubahnya menjadi status ym anda, silahkan ganti text yg berwarna merah tebal dengan id ym anda masing2. Selain itu, anda bisa mengganti gambarnya sesuai keinginan anda, bisa widget, link, dll. Dengan catatan, anda meletakkan script atau kode HTML-nya diantar tag <div id='gambar_melayang'> dan </div>

  • Save Template dan Selesai.

22 komentar:

  1. Yupz! berhasil pak. saya taruh dipojok bawah, dipadukan dengan Footer Navbar. :D
    ...akhirnya saya bisa mengucapkan selamat ulangtahun kepada Tiwi dengan cara yang lebih asyik. ;)
    Makasih infonya pak.

    Mohon commentnya juga pak di http://paankbilang.blogspot.com. saya "orang baru". :-B

    Kl boleh saya "bajak" artikelnya yah?
    Salam,

    urek-urek-urek

    paank.

    BalasHapus
  2. gambar melayangnya bisa ga?

    BalasHapus
  3. Hmm..gak bisa di wordpress......

    BalasHapus
  4. yeh gue kaga berhasil alias kaga ngerti yang loe mksd

    BalasHapus
  5. halooo...BOZZZ gimana caranya bikin gambar yang melayang, maklum aku gak bisa klo bahs html..jadi klo bisa yang lengkap biar aku pelajari.ok..aku tunggu bozzz..postingannya

    BalasHapus
  6. kaya di blog saya bukan
    http://c1ty-shine.blogspot.com

    BalasHapus
  7. thnkz bangeddsss y.....akhrirnya bisa jg buat gambar melayang.....sX lg tnkz bangedzzzzz...

    BalasHapus
  8. kok ga jadi ya bos ada yg error ktanya gmna bozzz

    BalasHapus
  9. ok nanti saya coba

    makasih...

    BalasHapus
  10. kita dah masuk ke alexa.com tp kok ngak da webmaster coner nya???? thanks sebelum nya

    BalasHapus
  11. sudah di coba gambar melayangnya tapi tetap ngak bisa yah?

    BalasHapus
  12. sudah dicoba berkali-kali tapi tetap ngak bisa

    BalasHapus
  13. kayaknya empu blog ini juga gak pake tuh,,,

    thanks infonya ya, its work!

    BalasHapus
  14. mas z gak ngerti,,uda coba brp kali gak bisa berhasil

    BalasHapus
  15. Mau dimaskukkin javascript, tapi koq ngga bisa ya???

    BalasHapus
  16. saya udah nyoba setelah saya save kok yang muncul tulisan ini: 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 value of attribute "src" associated with an element type "null" must not contain the '<' character.
    gimana tuh?

    BalasHapus
  17. wah...,makasih banget nieh artikelnya...,sy akan mencobanya...

    BalasHapus

blogger