Script Floating Banner Dengan HTML dan CSS


Floating banner adalah salah satu cara terbaik untuk menampilkan sebuah konten terutama iklan pada sebuah halaman website atau blog kita, karena floating banner ini akan selalu berada di tempat yang sama meskipun halaman website di-scroll. Untuk membuat floating banner ini kita hanya perlu menggunakan HTML dan CSS saja.

Script HTML Untuk Floating Banner
Script HTML dari sebuah banner sebenarnya hanya terdiri dari <div> tag saja di mana di dalam div tag ini kita akan menempatkan kode untuk iklan atau apa pun yang ingin kita tampilkan pada banner tersebut.
Misalnya kita ingin menampilkan sebuah banner yang berisi sebuah gambar dengan link menuju halaman website tertentu, maka script HTML nya hanya :

<div id=”banner”>
<a href=”link”>
<img src=”alamat gambar”>
</a>
</div>

id=”banner” nantinya akan digunakan sebagai identitas dari div tag yang akan kita jadikan floating banner pada CSS.

Script CSS Untuk Floating Banner
Setelah kita menyiapkan div tag yang berisi sebuah kambar dengan link, sekarang kita akan menggunakan CSS untuk membuat tampilan banner tersebut berada pada posisi yang sama pada layar ke mana pun kita melakukan scrolling.
Kode CSS nya :

#banner {
position: fixed;
margin: auto;
width: 800px;
height: 80px;
bottom: 0; left: 0; right: 0;
}

Pada kode CSS di atas kita akan menampilkan konten tersebut dengan ukuran 800 x 80 pixel pada posisi bagian bawah dan ditengah layar. Bila kita ingin floating banner tersebut bisa menampilkan konten dengan ukuran yang bervariasi kita bisa menghilangkan width dan height pada script CSS nya.


Dipublikasikan oleh theangelwing dalam kategori Website pada tanggal Oct 27, 2015
Tags : , , , , ,