earth

Guestbook

/* Iklan google ads */
Masih ingat dengan floating image? Itu tuh gambarnya tetap diam sekalipun kita menggulung layar, seperti gambar bola dunia dan panah pada blog ini. Nah, floating image ini bisa kita mamfaatkan untuk perintah ke atas dan ke bawah halaman blog. Dengan adanya perintah ini dapat memudahkan para reader untuk melihat halaman atas/bawah blog kita tanpa harus melakukan penggulungan layar.

Untuk membuat perintah ke atas dan ke bawah dengan floating image ini sebenarnya cukup mudah, kamu tinggal menambahkan link pada floating image tersebut. Tapi jika kamu lagi males mikir dan ingin yang praktis-praktis, ikuti saja langkah-langkah berikut:
  • Dari halaman Dasbor Blogger kamu, pilih Tata Letak - Edit HTML.
  • Kopikan kode CSS berikut dan letakkan di atas ]]></b:skin>:
    #floating-atas-bawah {
    position:fixed; _position:absolute; bottom:5px; right:5px; clip:inherit; z-index:+1000;}
    
  • Setelah itu kopikan kode HTML berikut (gunakan Control C) dan letakkan di bawah </head> (antara </head> dan <body>):
    <div id='floating-atas-bawah'>
    <a href='#' title='Ke Atas'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/keatas.png'/></a>
    <a href='#footer' title='Ke Bawah'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/kebawah.png'/></a>
    </div>
    
    Kamu dapat mengganti gambar panah sesuai keinginan. Dan jika perintah kebawah tidak bekerja, gantilah #footer dengan #bottom.
  • Simpanlah hasil kerjaan kamu dan ucapkan Alhamdulillah...

Mudah kan?! Ok brow, selamat mencoba.....

Gambar-gambar yang bisa kamu pilih:

URL:
http://sites.google.com/site/ruangsc/imgsb/arrow-up.gif

URL:
http://sites.google.com/site/ruangsc/imgsb/arrow-down.gif

URL:
http://sites.google.com/site/ruangsc/imgsb/keatas.png

URL:
http://sites.google.com/site/ruangsc/imgsb/kebawah.png

URL:
http://sites.google.com/site/ruangsc/imgsb/scrolltop.png

URL:
http://sites.google.com/site/ruangsc/imgsb/scrolldown.png
Kalo mau yang lebih atraktif, baca artikel ini aja.

  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    9 komentar

    Tutorial yang mantap

    21 Januari 2010 pukul 11.34  

    Pengen cb lain kali...
    thanks infonya sobat

    Hari ini bener2 gak bs ninggalin jejak pake Shoutmix...ganti deh pke bk tamunya selain SM

    21 Januari 2010 pukul 19.54  

    selamat malam menjelang dini hari kang ^^
    apa kabar ?
    ok banget infonya kang enes....

    22 Januari 2010 pukul 00.56  

    salam sobat
    trims ilmunya
    wah harus diulang-ulang mencobanya nich,, bang Enes,,
    membuat floating image perintah keatas dan kebawah di halaman blog,

    22 Januari 2010 pukul 15.47  

    menarik untuk dicoba!

    22 Januari 2010 pukul 16.44  

    mnteb sob !!!!

    ntar di buat dech !!!!

    24 Januari 2010 pukul 14.28  

    Suka bgt bang tutornya..,..

    26 Januari 2010 pukul 11.53  

    Mantap bro. Aku sudaha aku coba dan berhasil. Thk

    25 Maret 2010 pukul 21.25  

    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