Baca Juga : Cara Membuat Button Dengan Isinya di HTML
Pada cara kali ini saya akan membuat tema yang lagi populer dalam tahun 2018 yaitu world cup atau piala dunia 2018. Nah.. sekarang seperti biasa kita masih menggunakan notepad++ dan silahkan copy coding dibawah ini :
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body background="maskot.png">
<div class="w3-container">
<center> <h2 style="color:black;">32 TIM PIALA DUNIA 2018</h2>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">
<br></br>
<br></br>
<img class="mySlides" src="1.png" style="width:60%">
<img class="mySlides" src="2.png" style="width:60%">
<img class="mySlides" src="3.png" style="width:60%">
<img class="mySlides" src="4.png" style="width:60%">
<img class="mySlides" src="5.png" style="width:60%">
<img class="mySlides" src="6.png" style="width:60%">
<img class="mySlides" src="7.png" style="width:60%">
<img class="mySlides" src="8.png" style="width:60%">
<img class="mySlides" src="9.png" style="width:60%">
<img class="mySlides" src="10.png" style="width:60%">
<img class="mySlides" src="11.png" style="width:60%">
<img class="mySlides" src="12.png" style="width:60%">
<img class="mySlides" src="13.png" style="width:60%">
<img class="mySlides" src="14.png" style="width:60%">
<img class="mySlides" src="15.png" style="width:60%">
<img class="mySlides" src="16.png" style="width:60%">
<img class="mySlides" src="17.png" style="width:60%">
<img class="mySlides" src="18.png" style="width:60%">
<img class="mySlides" src="19.png" style="width:60%">
<img class="mySlides" src="20.png" style="width:60%">
<img class="mySlides" src="21.png" style="width:60%">
<img class="mySlides" src="22.png" style="width:60%">
<img class="mySlides" src="23.png" style="width:60%">
<img class="mySlides" src="24.png" style="width:60%">
<img class="mySlides" src="25.png" style="width:60%">
<img class="mySlides" src="26.png" style="width:60%">
<img class="mySlides" src="27.png" style="width:60%">
<img class="mySlides" src="28.png" style="width:60%">
<img class="mySlides" src="29.png" style="width:60%">
<img class="mySlides" src="30.png" style="width:60%">
<img class="mySlides" src="31.png" style="width:60%">
<img class="mySlides" src="32.png" style="width:60%">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<br>
<center><a href="index.html"><button><< Back To Accordion</button></a></center>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>
</body>
</html>
Setelah di copy coding diatas pastekan ke notepad++ seperti gambar dibawah :
Oke.. setelah di copy ke notepad++ save notepad++ ini kedalam format html. Kemudian buka namun saya sarankan dengan google chroom karna lebih support, kemudian setelah di buka akan muncul tampilan seperti gambar di bawah:
Yang dimaksud bergeser adalah gambar pemain seperti gambar diatas hal ini mungkin sering ditemukan di website yang membutuhkan, silahkan dikreasikan sesuai tema blog atau web kita masing masing-masing.
Untuk isi dari semua dari materi ini jadikan dalam satu folder dan gabung kan juga dengan materi sebelumnya sehingga saat Go To Slide >> dan << Back To According akan bisa berfungsi, seperti gambar berikut:
Bagi yang ingin selalu update materi dan tutorial khususnya bidang ilmu komputer, silah bergabung di website kami dengan cara follow menggunakan akun google + yang ada di tampilan utama web ini atau di bagian bawah jika menggunkan hp.
Terima Kasih........
Hallo teman-teman, terima kasih sudah membaca tulisan saya, semoga apa yang saya tulis di blog ini bisa bermanfaat. 
Hello, perkenalkan saya Andri Yusuf, Saya adalah bagian yang mengelola website ini. website ini saya buat sejak masih kuliah di bagian teknik informatika. Bagi saya menulis diblog adalah salah satu cara untuk menyimpan sekaligus berbagi ilmu yang pernah didapat. Terima Kasih telah berkunjung di Blog saya, mohon maaf jika ada kekurangan dalam penyampaian isi blog ini dan senang jika bisa berteman dengan anda. Sampai Jumpa!
Tidak ada komentar:
Posting Komentar