Cara Memasang Banner Iklan dengan Plugin jQuery
Halo teman – teman, kembali lagi dengan saya di tips dan trik Source Code Aplikasi. Di kesempatan kali ini saya akan memberikan tips dan trik mengenai Cara Memasang Banner Iklan dengan Plugin jQuery dimana dengan Plugin ini teman – teman dapat memberikan banner laman tak hanya satu melainkan banyak banner dan pun atraktif. Di 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 lazimnya dengan size lazimnya saja atau kalian nanti dapat sesuaikan sendiri wujud banner nya, dan berikut ini ialah screenshoot yang nanti kita akan bikin
Ketika di klik diantara gambar, karenanya gambar yang telah diklik akan di tampilkan secara full width
Bagus teman – teman kini kita implementasikan Cara Memasang Banner Iklan dengan Plugin jQuery pertama-tama – tama persiapkan terlebih dahulu text editornya dan unduh terlebih plugin jquery nya, klik link ini bagi mengunduh
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, berikutnya kita masukkan background di 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 manfaat jQuery nya
Seandainya telah, save dan jalankan di browser kalian. Karenanya hasilnya akan seperti contoh di atas
Seandainya di klik diantara gambar karenanya akan di tampilkan full width
Bagaimana, benar-benar gampang bukan..??
Teman – teman dapat tambahkan sendiri gambarnya lebih banyak, jadi dengan hasil ini banner yang terdapat di laman kita tak hanya satu melainkan banyak variannya. Bagus, saya rasa sekianlah dulu di artikel kali ini mengenai Cara Memasang Banner Iklan dengan Plugin jQuery kita jumpa kembali di tips dan trik yang akan datang.
Semoga bermanfaat, terimakasih dan hingga jumpa…
Sumber https://kursuswebsite.org
