Membuat kotak banner menggunakan CSS

Pada tutorial kali ini kita akan membahas tentang bagaimana 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!

COMMENTS

BLOGGER: 10
  1. Wahhh Gitu Caranya :D Thanks Infonya Gan :D

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

    BalasHapus
  3. asyik2,, keren,,
    mantab gan

    "Pedagang Pulsa"

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

    Komentar Balik Ditunggu :)

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

    BalasHapus

Nama

Apache,4,Bisnis,1,Bisnis Online,1,Blog,10,Blogger,6,Cpanel,1,CSS,1,Database,1,Framework,1,Hacking,3,HTML,1,HTML and CSS,2,Info,2,Javascript,2,Javascript and AJAX,5,Keamanan Web,1,linux,2,MySQL,3,Networking,1,Open GL,1,Optimasi Website,7,Pemrograman java,1,Pemrograman web,5,PHP,7,phpMyAdmin,1,SEO,4,SQL Injection,3,SQL Server,13,SQLMap,3,UMKM,2,Website,1,Wordpress,4,Xampp,1,
ltr
item
Nanang Gunawan Blog: Membuat kotak banner menggunakan CSS
Membuat kotak banner menggunakan CSS
Pada tutorial kali ini kita akan membahas tentang bagaimana membuat kotak banner menggunakan css.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqoI-ru6ilA_ZYcu8ba8ibJPdUCFLAdPfOS-z1QIbN0yHL78hIv2VufS2TNfmn1figT7D4Z7UeQHEoQYNieNXkXrI_dOxTi2NfEUPuz04DnykfzChG9V7CHsIpffAMdvGKDKpChpOdrI/s1600/Design+Banner.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqoI-ru6ilA_ZYcu8ba8ibJPdUCFLAdPfOS-z1QIbN0yHL78hIv2VufS2TNfmn1figT7D4Z7UeQHEoQYNieNXkXrI_dOxTi2NfEUPuz04DnykfzChG9V7CHsIpffAMdvGKDKpChpOdrI/s72-c/Design+Banner.jpg
Nanang Gunawan Blog
https://www.nananggunawan.com/2012/05/membuat-kotak-banner-menggunakan-css.html
https://www.nananggunawan.com/
https://www.nananggunawan.com/
https://www.nananggunawan.com/2012/05/membuat-kotak-banner-menggunakan-css.html
true
4195327445586723627
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content