Membuat Iklan Teks Mirip Google AdsSeperti yang sudah kita tahu bahwa Iklan Teks berperilaku seperti poster dan baliho dimana di dalamnya berfungsi untuk memajang beraneka informasi sesuai dengan pihak yang bersangkutan.
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/AVvXsEj1rzd-aAYN14_Qu9XNjrDKVSMWtZca4MrVjMCGtaqifyH1uv_ZUK3y0nLF6_VUJc5sOrFqxzGYOGn33Ppvn_w1CGzi3HtnUGLlCGpzOuh9rwXEofFlVd1Ztb8s2iXy3D7seS849J4fKhU/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
.side {
height:250px;
}
.longside {
height:600px;
}
Kemudian untuk DOM nya kita berikan
<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.
.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
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.
