Halo teman – teman, kembali lagi dengan saya di tips dan trik Dumet School. Pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Memasang Banner Iklan dengan Plugin jQuery dimana dengan Plugin ini teman – teman bisa memberikan banner website tidak hanya satu melainkan banyak banner dan juga atraktif. Pada latihan kali ini kita akan membuatnya dengan empat banner yaitu membutuhkan empat gambar atau lebih dan nanti teman – teman tinggal tambahkan sendiri sesuai keinginan. Saya disini menggunakan gambar biasa dengan size biasa saja atau kalian nanti bisa sesuaikan sendiri bentuk banner nya, dan berikut ini adalah screenshoot yang nanti kita akan buat
Ketika di klik salah satu gambar, maka gambar yang telah diklik akan di tampilkan secara full width
Baik teman – teman sekarang kita implementasikan Cara Memasang Banner Iklan dengan Plugin jQuery pertama – tama persiapkan terlebih dahulu text editornya dan download terlebih plugin jquery nya, klik link ini untuk mendownload
Kemudian kita berikan script html nya seperti di bawah ini
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cara Memasang Banner Iklan dengan Plugin jQuery fsbanner</title>
</head>
<body>
<div class="container">
<h1>Plugin jQuery fsbanner<h1>
<div class="fsbanner" id="demo-1">
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
</div>
</div>
</body>
</html>
Dan save dengan nama index.html, selanjutnya kita masukkan background pada setiap div yang berisi class banner
Langkah berikutnya kita panggil pluginnya terlebih dahulu dan library yang lainnya
Dan masukkan script css di bawah
.container {
margin: 150px auto;
max-width: 768px;
}
.banner{
height:200px;
}
.fsbanner, .fsbanner > div > span {
/* obrigatório */
display:none;
}
div.fsbanner {
/* obrigatorio */
position:relative;
overflow:hidden;
/* opcional */
height:200px;
color:white;
font-size:20px;
font-family:Verdana;
font-weight:bold;
border-radius:5px;
-webkit-text-stroke: 1px black;
}
.fsbanner > div {
position:absolute;
background-size:cover;
cursor:pointer;
top:0px;
left:0px;
}
.fsbanner > div .name {
display:block;
position:absolute;
left:10px;
bottom:10px;
}
.fsbanner > div .name.minimized {
/* css3 */
transform: rotate(-90deg);
transform-origin: left top 0;
/* pode ser necessário ajustar isso dependendo da fonte escolhida */
bottom: -13px;
left: 7px;
}
Baru kita panggil fungsi jQuery nya
Jika sudah, save dan jalankan pada browser kalian. Maka hasilnya akan seperti contoh di atas
Jika di klik salah satu gambar maka akan di tampilkan full width
Bagaimana, sangat mudah bukan..??
Teman – teman bisa tambahkan sendiri gambarnya lebih banyak, jadi dengan hasil ini banner yang ada di website kita tidak hanya satu melainkan banyak variannya. Baik, saya rasa sekian dulu pada artikel kali ini tentang Cara Memasang Banner Iklan dengan Plugin jQuery kita jumpa kembali pada tips dan trik yang akan datang.
Semoga bermanfaat, terimakasih dan sampai jumpa…