Sebelumnya kita sudah mempelajari membuat portal mennetukan alat dan bahan di
http://www.bimablctelkom.com/2017/01/membuat-portal-bagian-1-menentukan-alat.html.di tutorial sebelumnya portalnya sudah bisa di gunakan namun kelihatan agak kurang hidup jika kita hanya membuat halaman portal dengan efek hitam putih , oleh sebab itu maka kali ini saya akan share tentang membuat background slide show di portal .
A. Pengertian
Slideshow adalah suatu object yang biasanya berganti-ganti secara otomatis di dalam suatu website , biasanya menggunakan backgound slide tidak hanya menggunakan CSS , namun menggunakan jquery juga .
B. Maksud dan Tujuan
Di atas sudah saya jelaskan bahwa jika website terlihat diam atau berwarna saja mungkin akan terlihat membosankan untuk di lihat . oleh karena itu saya menambahkan background slide show ini agar dapat terlihat bisa menarik.
C. Langakah Membuat Background slide show di Portal
Tampilan portal yang kita buat sebelumnya adalah seperti di bawah ini :
Terlihat kurang menarik bukan kalo portal yang kita buat akan seperti di atas .
Langkah Pertama : Bahan yang di butuhkan
Download file plugin jquery.backstretch.min.js plugin ini di gunakan sebagai library jquery silde nya , seperti javascript .
di sini adalah isi dari jquery.backstretch.js :
file ini bisa di download di sini :
https://drive.google.com/openid=0B1SnjQZYTjtDRmIyUjNpWlcxTG8
Setelah sudah di download , maka tarus file hasil downloadan tadi di pindah satu folder sama portanya ,
jika sudah masukan script di bawah ini di layout.php
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
di bawah ini saya akan kasih source code dari layout.php
<!DOCTYPE html>
<html>
<head>
<title>Portal SMKN 1 Mejayan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Ini Adalah Portal Dari SMK Negeri 1 Mejayan">
<meta name="author" content="Bima Zainudin Ikhsan">
<meta name="keyword" content="Portal SMK">
<link rel="stylesheet" type="text/css" href="assets/css/layout.css">
<link rel="shortcut icon" href="assets/img/smk1mejayan.png">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.backstretch(
[
"assets/img/taruna.jpg",
"assets/img/2.jpg",
"assets/img/3.jpg"
],
{
duration: 3000,
fade: 600
});
</script>
<div class="transparant"></div>
<center>
<br>
<h2 style="font-family: raleway">
SMK Negeri 1 Mejayan
<center><img class="cover" src="assets/img/smk1mejayan.png"></center></h2>
<p style="font-size: 20px;color: white;margin-top: -2%"> Jl. Imam Bonjol No. 7 Pandean, Kec. Mejayan Kab. Madiun<br>
Kodepos <b style="font-family: lato">63153</b> Jawa Timur
Telp : <b style="font-family: lato">(0351) 388-490</b></p>
</h4>
</center>
<div class="container">
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/graduate.png">
</center>
</div>
<br>
<a href="http://smkn1mejayan.us.to/mySchool" target="new"><button style="width: 100%" class="button">WEBSITE SMK</button></a>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/email-1.png">
</div>
<br>
<button style="width: 100%" class="button">KONTAK</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/book.png">
</div>
<br>
<button style="width: 100%" class="button">Perpustakaan</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/painting-palette.png">
</div>
<br>
<button style="width: 100%" class="button ">kelas Seni</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/football.png">
</div>
<br>
<button style="width: 100%" class="button">Olahraga</button>
</center>
</div>
</div>
<div class="container">
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/student.png">
</div>
<br>
<button style="width: 100%" class="button">Lab TIK</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/writing.png">
</div>
<br>
<button style="width: 100%" class="button">PPB Online</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img class="gambar" style="width: 80%;margin: 0" src="assets/img/png/laptop.png">
</div>
<br>
<button style="width: 100%" class="button">Social Media</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img class="gambar" style="width: 80%;margin: 0" src="assets/img/png/smartphone.png">
</div>
<br>
<button style="width: 100%" class="button">Extra kulikuler</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/conference.png">
</div>
<br>
<button style="width: 100%" class="button">Pengumuman</button>
</center>
</div>
</div>
<footer>
<p style="color: white">
Copyright © 2017 SMK Negeri 1 Mejayan<br>
Designed BY <a href="#">SMK Negeri 1 Mejayan</a>
</p>
</footer>
</body>
</html>
Lihatlah apa perbedaan file yang kemarin kita buat sama yang sekarang ? tentunya berbeda , di sini saya tambahkan script dan saya mengambil dari file yang sudah kita dowload tadi .
<script type="text/javascript">
$.backstretch(
[
"assets/img/taruna.jpg",
"assets/img/2.jpg",
"assets/img/3.jpg"
],
{
duration: 3000,
fade: 600
});
</script>
saya jelaskan apa maksud di atas:
"assets/img/taruna.jpg",
"assets/img/2.jpg",
"assets/img/3.jpg"
di sini adalah script di mana untuk memanggil gambar yang telah ada di dalam folder assets/img .
duration adalah beberapa detik sekali mereka akan berganti-ganti . saya beri waktu 3000 atau 3 detik
maka jalankan lagi layout.php , tampila seperti di bawah ini :
Sudah Selesai kita membuat background slidenya , langkah berikutnya kitaakan memahas tentang animasi di poratalnya ,
Kesimpulan :
Background slide ini bisa di gunakan untuk website-website lainya , dan biasanya ini dui gunakan unutk website One Page ,
No comments:
Post a Comment