earth

Guestbook

/* Iklan google ads */
Kalau kamu membuka-buka blog ini pasti kamu akan bertanya-tanya kenapa gambar panah ke atas dan ke bawah tetap diam sekalipun kamu menggulung layar (menarik scroll)? Nah, itulah yang dimaksud dengan gambar melayang (float image). Jadi maksud gambar melayang disini bukannya gambar yang bisa melayang kesana kemari seperti Gatotkaca, tapi gambar yang tetap diam (statis) sekalipun scroll ditarik.

Lalu apa mamfaat dari adanya float image ini dan bagaimana cara membuatnya?
Mamfaatnya selain membuat tampilan blog kamu semakin keren, juga untuk menambahkan tautan (link) pada gambar tesebut sehingga jika gambar itu diklik akan langsung ke alamat yang dijadikan tautan.

Cara membuat float image ini juga cukup mudah, kamu bisa mengikuti langkah-langkah berikut:
  • Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
  • Cari kode berikut dengan menekan Control F :
    ]]></b:skin>
    
  • Jika sudah ketemu, kopikan kode berikut :
    #gambar1 {
    position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}
    
  • Letakkan kode tersebut di atas ]]></b:skin>
  • Setelah itu kopikan kode berikut :
    <div id="gambar1">
    <a href="http://ruangsc.blogspot.com/" target="_blank" title="Tips Membuat dan Mendesain Blog">
    <img border="0" src="http://i563.photobucket.com/albums/ss76/peace_enes/kupu-kupu.gif"/></a>
    </div>
    
  • Letakkan kode tersebut di antara </head> dan <body>
  • Lakukan Pratinjau (Preview). Jika sudah OK baru simpan.

Jika kamu ingin mengubah letak gambar, ubah saja posisinya (top dan right) di atas dengan bottom untuk gambar di bawah dan left untuk gambar sebelah kiri. Dan jika kamu ingin mengubah gambar, ganti saja alamat gambar pada src="alamat gambar" dengan alamat gambar yang kamu inginkan (Bocoran gambar: kunjungi Adiwidget). Demikian juga jika kamu ingin mengubah link (tautan) untuk gambar tersebut, kamu tinggal mengubah alamat tautan pada href="alamat tautan" dengan alamat tautan yang kamu inginkan (Mengenai link lihat Membuka Link Di Halaman Tab Baru).

Lalu bagaimana jika ingin float image-nya lebih dari satu? Kamu tinggal meng-kopi kode #gambar1 dst., lalu ubah menjadi gambar2. Kopikan pula kode <div id='gambar1'> dst., lalu ubah menjadi gambar2 dst.
Float image ini juga bisa kamu mamfaatkan untuk memberi perintah ke atas dan ke bawah halaman blog.

Nah, mudah kan? Selamat mencoba...
Berikut adalah beberapa gambar yang bisa kamu pilih (klik untuk melihat gambarnya!)
  • Kupu-kupu 1
    URL:
    http://i563.photobucket.com/albums/ss76/peace_enes/kupu-kupu.gif
  • Kupu-kupu 2
    URL:
    http://i563.photobucket.com/albums/ss76/peace_enes/butterflyT.gif
  • Mickey Mouse
    URL:
    http://i563.photobucket.com/albums/ss76/peace_enes/Mickey.gif

Referensi: Dari berbagai sumber
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    69 komentar

    Gue yang pertama uey...
    kini butterfly nonghol dihalaman blog gue, tambah keren deh... hatur nuhun.

    30 Agustus 2009 02.05  

    waduh bos kok nga bisa ya?

    13 September 2009 21.07  

    Bos makasi banyak!!!
    gua dari 0 jadi 9
    kwkwkwkw

    15 Oktober 2009 21.51  

    g' sa neh...........
    gmana yah.........sulit amet!1
    pdhal dh ngikuti tu perintah

    17 Oktober 2009 22.24  

    bos saya uda coba dan uda jadi tapi jadinya kok ada diatas header dan gambar nya itu ga' kayak melayang hanya ada diatas aaja...gimana ya bos,terus menu - menu di web saya jadi turun semua gimana ya bos caranya.tolong di check di www.adinetwork.co.cc dan kalau bisa tambah kontak saya di yahoo messenger nih alamatnya thnkcomjrngn@yahoo.co.id

    14 November 2009 03.11  

    Tolong Kunjungi Blog Saya Temen - Temen Guru Semua,,saya Ingin Banyak Menjalin Teman,,Saya Ini Pemula Blog...

    12 Januari 2010 05.26  

    sekarang kok susah sih ngelayout gambar di blogspot, dalam artian gambarnya gak bisa dibuat sejajar samping kanan dan kiri pada sebuah postingan.. layout yang saya inginkan adalah sperti ini :

    [image1] [image2]

    gmn yh caranya.. thx..
    ninequadrat.blogspot.com

    22 Januari 2010 14.36  

    kunjungi blog sites saya

    dedprezent.co.cc

    thanks be4

    26 Januari 2010 03.38  

    Waoow,..Blognya Baguss Bngeett..! Jd Pengen Bisa tp msh nyari2 bahan neh..gmn ea caranya..?

    9 Februari 2010 02.28  

    makasih mas,, artikelnya sangat bermanfaat..

    20 Februari 2010 16.35  

    maksih taz ilmunya,,...:)

    6 Maret 2010 10.14  

    Enak banget nanya di sini cepat banget di jawab ma yg punyaa.
    SALUT.....

    9 Maret 2010 20.47  

    terimakasih ya atas pengetahuannya..

    11 Maret 2010 01.09  

    mas saya mau tanya dong.
    gimana caranya biar orang lain gak bisa jiplak karya kita melalui klik kanan...?

    tolong jawabannya dikirim ke secret_bealive@yahoo.co.id

    makasih ya sebelumnya...

    11 Maret 2010 02.51  

    gak asik maen sini gk bisa di copy

    13 Maret 2010 20.18  

    makasi

    mantap ni blog oom

    13 Maret 2010 20.33  

    mantap......deh.infox........

    27 Maret 2010 17.50  

    karyanya bener2 amazing...salut buat web master

    4 April 2010 13.53  

    Thanks infonya mas..
    mampir juga ya ke BOOK ONLINE
    www.atan-hacker.blogspot.com

    13 Mei 2010 14.07  

    kok di atas truss float image nya padahal gw mau yg bottom tpi dah di coba teterusan jadi
    "PIKASEUBEULEUN"
    kumaha atuh kang

    20 Juni 2010 12.52  

    mantap sob langsung mau coba ahhh....nice post

    12 Juli 2010 18.44  

    ane mau open in new tab Gan !!!!
    bukan mau ngejiplaaaakkkk plakk plakk plakkkkkkkk !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    6 Agustus 2010 17.14  

    Dah kang urang jadi alus euy blog na
    NUHUN KANG

    8 Agustus 2010 19.33  

    di templet aku float imagenya ikut bergeser bila kursor digeser,,,ada solusi??????????? trimsgan....

    4 September 2010 08.24  

    makasih gan tips nya..
    ngebantu ane bgt yg masih pemula dibolg

    13 November 2010 09.04  

    thanks om lumayan buat mempercantiik blog

    21 November 2010 11.47  

    boleh dicoba tuh... trims ya, dari http://bayung.com/.

    23 November 2010 11.30  

    blognya keren gan, artikelnya bagus .. mampir ya ke blog ane

    14 Desember 2010 19.59  

    makasih ya kang saya banyak belajar dari sini..tapi kok URL bola dunianya gak ada...liat blog saya ya kang buat dikoreksi2 :D delni3c.blogspot.com

    31 Desember 2010 01.35  

    knp blog sy tdk mau kk tolong penjelasan nya lebih lnjut

    10 Januari 2011 17.27  

    thanks gan di ane bisa...
    mampir adiprayoga.blogspot.com

    3 Februari 2011 09.11  

    maksudnya antara bidy sama head apa yyy

    26 Maret 2011 11.02  

    hatur nuhun lg kang ,,,, keren pisan euy .....

    30 Maret 2011 10.55  

    mantap gan.,thnks infonya, izin sedot ilmunya gan.,tanya donk cara nambahin tag cloud gmna gan.,gagal mulu., nehh.,ane pake blogspot juga.

    2 Mei 2011 13.57  

    bos thanks banget,tp sy ga bisa membuat halaman blog saya sebagus bos saya ga bisa,sy tetap menggunakan template yang di sediakan oleh blogger.

    5 Juni 2011 12.19  

    kalau untuk merubah ukuran gambarnya gimana?

    6 Juni 2011 12.35  

    makasih infonya, kupu2 ada dmana2.

    18 Juni 2011 23.54  

    ada tutgan orialnya gk nich gan untuk tulisan jalan spt di kiri atas yg ilang muncul tuh, tks y

    8 September 2011 21.32  

    Mantap kang...
    saking mantapnya sy sampe bingung mulai dari mana...he..he..

    Usman Calliong Kendari

    18 April 2012 13.15  

    terima kasih atas bantuannya.....by aga di kofa

    3 Agustus 2012 15.22  

    Bos Ti Ngawitan dugi ayeuna abdi satia ka blog bos...abdi mah pemula nuhunkeun bimbingana bos. Hatur nuhun sateuacana

    12 Agustus 2012 19.44  

    thank's yaa... saya sangat terbantu :)
    http://penulistips.blogspot.com

    16 Agustus 2012 11.33  

    salam kenal kang enes, kalau kode a href di ganti dengan kode ifame kok tidak bisa ya?
    apa ada cara lain?
    susah juga nih

    5 September 2012 11.43  

    gak ketemu menu edit html nya di mana?

    24 Desember 2012 19.43  

    thx gan,,punya ane udah bisa...hehehe

    22 Mei 2013 03.42  

    Thanks Gan, For ALL Solution Membuat Gambar Melayang (Float Image) Pada Blogspot...

    3 Juni 2013 21.57  

    Makasih kang,,, blog ane tambah keren

    3 Agustus 2014 00.54  

    mantap tipsnya gan joooooooooooos
    jual obat bius>>>>http://www.vimaxpasutri.com/

    30 Agustus 2014 23.36  

    Mantaap sob artikelnya, ditunggu artikel yang lainnya
    Izin menyimak saja sob
    http://goo.gl/Poee61

    30 Maret 2015 15.21  

    OBAT PEBESAR PENIS obat pembesar penis anabolic rx24

    OBAT PEBESAR PENIS ANABOLIC RX24

    OBAT PEBESAR PENIS HAMMER ASLI

    OBAT PEBESAR PENIS ANABOLIC

    OBAT PEBESAR PENIS ANABOLIC ASLI

    OBAT PEBESAR PENIS HAMMER OF THOR

    5 Februari 2017 12.32  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler