Membuat Banner Iklan Dengan Css

Membuat Banner Iklan Dengan Css - Seperti yang sudah kita tahu bahwa Banner Iklan berperilaku seperti poster dan baliho dimana di dalamnya berfungsi untuk memajang beraneka informasi sesuai dengan pihak yang bersangkutan. 

Banner iklan bisa sangat mudah kita jumpai di pinggir jalan dan tempat-tempat strategis dengan tujuan agar lebih banyak orang yang melihat dan menjangkau pasar yang luas. Biasanya iklan bertujuan komersil.

Banner iklan tidak hanya bisa kita jumpai di pinggir jalan maupun di berbagai perempatan, karena fungsi tersebut kini dapat diterapkan pada website maupun blog untuk menampilkan iklan berupa produk maupun layanan serta informasi. Pada umumnya, situs website yang memiliki pengunjung akan menampilkan banner baik itu berisi iklan produk sendiri maupun produk dari pihak lain dimana situs website tersebut berperan sebgai pemasar saja.

Dan pada umumnya, banner biasa dibuat dengan media gambar statis JPG, gambar bergerak GIF dan sering pula menggunakan media Animasi Flash. Semua itu tergantung dari penyedia produk.

Namun biasanya, masalah yang muncul ketika memajang banner baik gambar statis, bergerak maupun flash adalah pemuatan halaman akan bermasalah dan membuat situs tidak valid serta tidak responsive karena pada umumnya ukuran banner sudah ditentukan dari penyedia bahkan ketika kita mencoba membuat banner gambar sendiri sekalipun kita akan menentukan ukuran panjang dan lebar media yang akan kita tampilkan dalam hal ini gambar dan video.

Lalu, adakah cara yang lebih baik daripada menggunakan media gambar statis atau bergerak yang kadang membuat situs website menjadi bermasalah ? Tentu ada. yakni dengan menggunakan Css.

Adapun keuntungan yang kita peroleh ketika menggunakan metode ini adalah
- Pemuatan halaman lebih ringan
- Responsive
- Valid struktur data

Cara Membuat Banner Iklan Dengan Css
Yang kita butuhkan dilangkah pertama adalah dengan membuat DOM baru seperti ini

<div class="iklanbox">
<div class="text-iklan">
<a href="https://slideseo.blogspot.com">Buat Website Keren</a>
</div>
<div class="icon-iklan">
<a href="https://slideseo.blogspot.com">Ads by CS</a>
</div>
</div>

Kemudian yang perlu kita lakukan selanjutnya adalah mengatur stylingnya dengan memberikan sentuhan Css sesuai dengan kebutuhan seperti dibawah ini

.iklanbox {
  position:relative;
  width:100%;
  height:90px;
  display:table;
  table-layout:fixed;
  background:#82a5ce;
overflow:hidden;
}

.text-iklan,.text-iklan a {display:block;line-height:90px;color:#fff;font-size:30px;text-align:center;text-transform:uppercase;margin:0 auto;}
.icon-iklan {position:absolute;top:0;right:-85px;background:#d3d3d3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNHDwU_vEoLdcBn-YvCa-m3IlXtYNtfZJK_qVyjVMvEgP-_u9ruwHOeS1nAXqmUAA_diHvtBtc7GafNNA0o8JqVMz2qd_57j1lg2OPfrPBQVAxLo5rBflbRb9U8jPkoxvX5mEvW9-fSgA/s1600/info-iklan.png) 0 0 no-repeat;width: 100px;height:15px;-webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;}

.icon-iklan a{opacity:0;}
.icon-iklan:hover {right:0;background-position:100% 0;
    padding-right:15px;padding-left:10px;}

.icon-iklan:hover > a {opacity:1;color:#333;}

Secara default, kode diatas akan menciptakan Banner Iklan dengan ukuran tinggi 90px dimana umumnya Banner Iklan utama menggunakan ukuran ini, namun kita bisa dengan mudah mengganti ukurannya tanpa perlu melakukan editing atau memberikan style khusus yang rumit. Untuk mengatur tinggi banner, kita bisa menggunakan class bantuan dengan membuat class dengan atribut khusus seperti ini

.side {
   height:250px;
}
.longside {
   height:600px;
}

Kemudian untuk DOM nya kita berikan class yang sudah kita buat tadi dengan mengakses element utama banner yakni

<div class="iklanbox side">
// untuk membuat banner bertinggi 250px dibagian sidebar, dan
<div class="iklanbox longside">
// untuk membuat banner besar dengan tinggi 600px pada sidebar.

Bagaimana dengan setup pada sisi lebar atau panjangnya ? Seperti yang sudah disebut diatas, ukuran ini akan selalu mengikuti luas daerah tempat ia diletakkan, semisal sidebar situs website memiliki ukuran 300px, maka banner ini akan memiliki ukuran yang sama dengan sidebar tersebut. Kemudian kita ingin membuat teks atau kontennya bergerak, bagaimana caranya ? Yang kita butuhkan sebagai ekseutornya cukup menggunakan Css @keyframe seperti dibawah ini Karena disini kita hanya ingin menampilkan Teks yang bergerak, maka elemen yang kita eksekusi adalah .text-iklan

.text-iklan{
  animation: animationFrames ease 10s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: animationFrames ease 10s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 10s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 10s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{

  0% {
    opacity:0;
    transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    transform:  translate(30px,0px)  ;
  }

  80% {
    transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }

}

@-moz-keyframes animationFrames{

  0% {
    opacity:0;
    -moz-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -moz-transform:  translate(30px,0px)  ;
  }

  80% {
    -moz-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }

}

@-webkit-keyframes animationFrames {

  0% {
    opacity:0;
    -webkit-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -webkit-transform:  translate(30px,0px)  ;
  }

  80% {
    -webkit-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }

}

@-o-keyframes animationFrames {

  0% {
    opacity:0;
    -o-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -o-transform:  translate(30px,0px)  ;
  }

  80% {
    -o-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }

}

@-ms-keyframes animationFrames {

  0% {
    opacity:0;
    -ms-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -ms-transform:  translate(30px,0px)  ;
  }

  80% {
    -ms-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }

}

Jika anda ingin menggunakan animasi dengan gaya lain, silahkan menuju Kesini 

Contoh

Height : 90px

Ads by SS

Height : 250px

Ads by SS

Height : 250px

Ads by SS

Silahkan disesuaikan sendiri mengenai warna dan teks yang ingin ditampilkan serta gambar apa yang ingin ditampilkan dan animasi apa yang akan digunakan untuk masing-masing kontennya. Kreasikan dengan bebas ... dan semoga informasi dan tutorial ini bermanfaat.