Home » » Membuat Floating Image Untuk Perintah Ke Atas - Ke Bawah Halaman Blog

Membuat Floating Image Untuk Perintah Ke Atas - Ke Bawah Halaman Blog

kali ini saya akan berbagi tips Itu tuh gambarnya tetap diam sekalipun kita menggulung layar, seperti gambar kupu-kupu 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 Darbor 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.
* Simpanlah hasil kerjaan kamu dan ucapkan Alhamdulillah...


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

Gambar-gambar yang bisa kamu pilih:


URL: http://i563.photobucket.com/albums/ss76/peace_enes/arrow-up.gif

URL: http://i563.photobucket.com/albums/ss76/peace_enes/arrow-down.gif

URL: http://i563.photobucket.com/albums/ss76/peace_enes/keatas.png

URL: http://i563.photobucket.com/albums/ss76/peace_enes/kebawah.png

URL: http://i563.photobucket.com/albums/ss76/peace_enes/scrolltop.png

URL: http://i563.photobucket.com/albums/ss76/peace_enes/scrolldown.png

URL: http://i563.photobucket.com/albums/ss76/peace_enes/ke-atas.png

URL: http://i563.photobucket.com/albums/ss76/peace_enes/ke-bawah.png

Sumber :http://ruangsc.blogspot.com/




Artikel Terkait:

4 komentar:

  1. Salam kenal, wah bisa dicoba ya mas

    BalasHapus
  2. Mas, "Setelah itu kopikan kode HTML berikut...", kode HTMnya yang mana Mas??

    BalasHapus
  3. blognya mantap bro, thanks infonya

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri