Membuat Float Image (Gambar Melayang)

Float image, atau lebih dikenal dengan gambar melayang. Cukup sederhana tapi menarik. beberapa blogger telah memakai trik ini untuk menghias blog mereka. Namun setelah saya menelusuri beberapa blog yang menyediakan tutorial dan trik, banyak yang menyediakan tutorial float image dengan cara ribet. Atau memakai kode-kode yang tidak diperlukan. Berikut ini adalah tutorial untuk membuat float image yang simple dan mudah.
Float Image Trick by DickeyMaru.com
Contohnya bisa kalian lihat di pojok kanan atas, ada Deidara terbang. Berikut ini adalah beberapa kode untuk membuat float image atau gambar melayang:

Float Image di Pojok Kiri Atas

Untuk membuat float image yang melayang di pojok kiri atas, kodenya seperti ini:
<img src="URL GAMBAR KAMU" alt="Float Image Trick by DickeyMaru.com" style="border: 0px; position: fixed; top: 0px; left: 0px;" />

Float Image di Pojok Kiri Bawah

Untuk membuat float image yang melayang di pojok kiri bawah, kodenya seperti ini:
<img src="URL GAMBAR KAMU" alt="Float Image Trick by DickeyMaru.com" style="border: 0px; position: fixed; bottom: 0px; left: 0px;" />

Float Image di Pojok Kanan Atas

Untuk membuat float image yang melayang di pojok kanan atas, kodenya seperti ini:
<img src="URL GAMBAR KAMU" alt="Float Image Trick by DickeyMaru.com" style="border: 0px; position: fixed; top: 0px; right: 0px;" />

Float Image di Pojok Kanan Bawah

Untuk membuat float image yang melayang di pojok kanan bawah, kodenya seperti ini:
<img src="URL GAMBAR KAMU" alt="Float Image Trick by DickeyMaru.com" style="border: 0px; position: fixed; bottom: 0px; right: 0px;" />
Lihat yang berwarna hijau dan kuning. Silahkan diganti sendiri. Itu adalah jarak gambar dari tepi browser. Jika top: 125px; artinya jarak dari tepi atas browser adalah 125px. top=atas , right=kiri , bottom=bawah , left=kiri. Dan untuk angkanya, silahkan diganti dengan jarak dari tepi browser.
Sangat simple bukan? Silahkan dicoba.
Comments

26 comments:

  1. :i: maacih za
    :f: sumpah maacih
    :d: kuk g belang sama2

    ReplyDelete
  2. [Reply to: Anonim]

    Hahaha,, sama-sama,,,
    (maksa bgt sih,,)
    hahahahaha,, :c:

    ReplyDelete
  3. makasihh darkard deidara
    arigato!! :f:

    baik banget..akan saya coba :d:

    ReplyDelete
  4. darkard...masukin code nya kemana? :e:

    koq gadikasih tau :j:

    ReplyDelete
  5. kok blog aku g bs poskan komen kyak gni yaa????

    help dunk.....

    di http://www.edisetyawan.co.cc


    thanks!!!!!!!!!!!!!

    ReplyDelete
  6. mantap betul webnya naruto banget dah.

    Mampir http://antik-bendabertuah.blogspot.com

    ReplyDelete
  7. keren.....
    aq jg suka ma emoticon buat coment neh,gmana bro?
    ajarin donk.
    bls d coment blog q y

    ReplyDelete
  8. keren d^_^b
    d beri anti klik kanan jg emoticonnya :g:

    ReplyDelete
  9. klo caranya kasih video kayak yg d pojok kiri atas tu gmna??? :d:

    ReplyDelete
  10. Kalo buat animasi nya dimana ya ?? :c:

    ReplyDelete
  11. My Deidara is cute,and,sorry,i'am sorry,not much speak englis,tobi a bad boy >:D muajajajaj!!
    :a: and :g: I Love you!!!!!!!!!>///V

    ReplyDelete
  12. Makasih yaa kaak ....
    Nanti q coba ..

    ReplyDelete
  13. [Reply to: Loechiey] Jangan panggil kak donk,, aku kan masih brondong,, haha

    [Reply to: Puspita] thanks ya,,,

    ReplyDelete
  14. kak, backgroundnya dapet dari mana?
    Minta donk...

    ReplyDelete
  15. :i: wow mantap bangat nih emoticon Ninjutsu Commentnya,, ajarin donk kak,, atau posting donk scriptnya beserta langkah2nya,, aku tunggu yah? Kakak bisa membalas jawaban di www.facebook.com/david.paliwan ,, terima kasih :a:

    ReplyDelete
Related posts
Guestbook
Author


© 2008 - 2016 DickeyMaru
Blogger Template Win 8 design by Dark Ard from DeezClan | All rights reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other