Skip to main content

Membuat kotak banner menggunakan CSS


Pada tutorial kali ini kita akan membahas tentang bagaimana membuat kotak banner menggunakan css.
Pada posting sebelumnya saya telah membahas tentang Mendesain Layout Website dengan HTML dan CSS pada tutorial tersebut telah saya jelaskan mengenai dasar-dasar css dan html, nah pada tutorial sekarang ini kita akan mengembangkan teknik-teknik dasar tersebut, saya anjurkan untuk mempelajari dahulu tentang dasar css dan html sebelum masuk ke tutorial ini :)

Langsung saja kita masuk pada cara pembuatannya:
Pertama kita harus mempunyai sebuah gambar yang akan kita gunakan nantinya untuk mengisi kotak banner dan kita beri nama gambar tersebut image.jpg selanjutnya kita letakkan ke dalam folder images, kemudian kita buat sebuah file html misalnya index.html dengan isi sebagai berikut:


<style type="text/css">  
/*membuat bentuk untuk banner pertama pada keadaan normal atau mouse tidak berada di atas banner*/
.frame1 a{     
    width:100px;
    height:125px;
    display:block;
    background:#10c707;/*membuat backgroud kotak menjadi hijau*/
    padding:5px;
    margin-bottom:5px;
    margin-left: 3px;
    margin-right: 3px;      
    float:left;
    /*untuk membuat lengkungan pada kotak banner*/
    -moz-border-radius-topleft:40px;
    -moz-border-radius-topright:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:40px;
    -webkit-border-top-left-radius:40px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:40px;
}
/*membuat bentuk untuk banner pertama pada keadaan mouse berada di atas banner*/
.frame1 a:hover{
    -moz-border-radius-topleft:0px;    
    -moz-border-radius-bottomright:0px;
    -webkit-border-top-left-radius:0px;      
    -webkit-border-bottom-right-radius:0px;      
}                   
</style>
<div class="frame1">
    <a href="#"><img alt="" height="125" src="images/image.jpg" title="" width="100" /></a>
</div>


Nah jika file index.html tersebut di run atau di buka di browser maka akan hasilnya adalah seperti kotak di bawah ini:









Nah sekarang kotak banner pertama telah jadi, lalu bagaimana caranya jika kita hendak membuat banyak kotak banner?

Berikut saya sertakan contoh untuk mebuat empat kotak banner, silahkan download disini

Hasil dari empat kotak banner tersebut adalah seperti gambar dibawah ini:


Selamat Bereksperimen!
Labels:

Comments

  1. Unknown17 May 2012 at 21:18

    Wahhh Gitu Caranya :D Thanks Infonya Gan :D

    ReplyDelete
  2. Nanang Gunawan17 May 2012 at 21:21

    Sama2 Gan :D

    ReplyDelete
  3. Adhi Ibra17 May 2012 at 22:03

    thank's gan udah share, lumayan buat nambah ilmu.

    ReplyDelete
  4. E-detective Muhammad Aditia18 May 2012 at 11:43

    Nice Share sob. Keep Update ya !

    ReplyDelete
  5. Nanang Gunawan18 May 2012 at 15:33

    Thanks Sob :)

    ReplyDelete
  6. Tri wahono18 May 2012 at 23:21

    keren follow back gan

    ReplyDelete
  7. ZaMa Reload20 May 2012 at 07:49

    asyik2,, keren,,
    mantab gan

    "Pedagang Pulsa"

    ReplyDelete
  8. TORAYASURABAYA20 May 2012 at 08:15

    Siiip
    Masbro..
    Ini yang saya cari2 juga :D
    xD

    Komentar Balik Ditunggu :)

    ReplyDelete
  9. Unknown4 December 2012 at 06:28

    Makasih infonya, mas...kalau sempet mampir untuk gabung dgn teman lain yang udah submit url blognya di Direktori Weblog Indonesia :)

    ReplyDelete
  10. Muhammad Iqbal K27 December 2014 at 12:39

    makasih sob, berhasil :)

    ReplyDelete

Post a Comment

Popular posts from this blog

Tutorial SQL Injection Menggunakan SQLMap

Kali ini kita akan membahas tutorial hacing dengan teknik SQL Injection menggunakan tool SQLMap untuk melakukan hacking atau serangan pada website berbasis data dengan tujuan untuk menemukan kerentanan keamanan pada website tersebut. SQL Injection adalah teknik injeksi code yang digunakan untuk melakukan serangan pada aplikasi web berbasis data di mana pernyataan malicious SQL dimasukkan ke dalam entri untuk di eksekusi (misalnya untuk menampilkan konten database ke penyerang). SQL injection dapat mengeksploitasi kerentanan keamanan pada perangkat lunak aplikasi, misalnya saat user salah melakukan filter inputan untuk pengiriman karakter yang disematkan dalam pernyataan SQL atau inputan user tidak diketik dengan benar dan tanpa diduga dieksekusi. SQL Injection lebih dikenal sebagai vektor serangan untuk sebuah situs web namun juga dapat digunakan untuk menyerang semua jenis database SQL. Apa itu SQLMap SQLMap adalah salah satu tool otomatis untuk melakukan SQL Injection yang
12 comments
Read more

Penjumlahan dan pengurangan tanggal di PHP

Penjumlahan (tambah) dan pengurangan (kurang) tanggal di PHP sering  kita jumpai di beberapa kasus pembuatan sistem seperti pembuatan fitur peminjaman, perizinan, pemesanan dan lain-lain. Kali ini kita akan membahas bagaimana  suatu tanggal dapat di tambah atau di kurangi dengan hari, bulan dan tahun. Ok langsung saja kita bahas materinya!
15 comments
Read more

Cara membuat Hak Akses (Privileges) pada user SQL Server (Grant dan Revoke)

Pada tutorial kali ini kita akan belajar bagaimana cara membuat atau memberi grant atau revoke hak akses (Privileges) pada user di SQL Server menggunakan syntax Transact SQL (T-SQL). Anda dapat memberi GRANT dan REVOKE hak akses pada berbagai objek database di SQL Server. Kali ini kita akan melihat bagaimana memberi dan menghapus hak akses pada tabel di SQL Server. Memberikan permissions dan menghapus permissions tidak terlalu sulit dilakukan di dalam SQL Server, hanya butuh beberapa waktu untuk menentukan permissions apa yang harus diterapkan. Sebelumnya anda harus membuat user dahulu pada SQL Server, setelah itu baru kita bisa memberi Hak Akses. Berikutnya pastikan anda sudah membuat atau menjalankan script dibawah ini. [USE [nama_database] GO CREATE USER [nama_user] FOR LOGIN [nama_user]] Grant Hak Akses (Privileges) pada  tabel Anda dapat memberi (Grant) berbagai hak akses ke tabel pada user. Hak akses ini bisa berupa kombinasi SELECT, INSERT, UPDATE, DELETE, REFERENCES
2 comments
Read more