Kalian pernah merasa bosan dengan tampilan website yang monoton ?. Jika iya tentu ini akan mengganggu aktifitas kita karena terlalu sering melihat tampilan dengan design yang itu itu saja. Lalu untuk mengurangi rasa bosan ini, tidak lain kita harus membangun tampilan baru dimana membutuhkan waktu dan pikiran. Seandainya saja ada suatu tombol yang dapat merubah tampilan website dalam sekejap mungkin akan sangat membantu. Jawabnya adalah kalian harus membuat fungsi tersebut dengan Jquery !. Ya, kita akan belajar membuat ganti tema website dengan Jquery.
Caranya ya tentu kalian harus merencanakan mau seperti apa tampilanya saat nanti kita rubah. Setelah sudah baru kita mulai rancang suatu fungsi dimana saat kita tekan tombol tersebut maka secara otomatis akan merubah jenis warna,font, atau apapun yang akan dirubah. Untuk lebih jelasnya mari kita simak contoh kasus seperti ini. Kalian bisa salin code ini agar lebih cepat.
tema.html
<html> <head> <meta charset="UTF-8"> <title> Ganti Tema </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="menu"> <div class="container"> <a href="#">Home</a> <a href="#">Profile</a> <a href="#">Kontak</a> <a href="#" class="right"> Ganti Tema</a> </div> </div> <div class="container"> <div class="jumbotron"> <center><h1>Landing Page</h1></center> </div> <h2>Ini adalah isi konten</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </body> </html>
Selanjutnya kalian tambahkan code ini dibawah div terakhir.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“.right”).click(function(){
$(“a”).css({“color”: “black”});
$(“.menu”).css({“background-color”: “white”});
$(“body”).css({“background-color”: “#ccc”});
$(“.jumbotron”).css({“background-color”: “#333333”});
$(“h1”).css({“color”: “white”});
});
});
</script>
style.css
.menu{
background-color: brown;
padding: 20px;
width: 100%;
margin-top:-10px;
margin-left: -10px;
margin-bottom: 10px;
}
.container{
width: 950px;
margin:auto;
overflow: hidden;
}
.container a{
color:white;
text-decoration: none;
margin-right: 20px;
font-size: 18px;
}
.jumbotron{
height: 300px;
background: #ccc;
padding: 10px;
}
.right{
float: right;
}
.red{
color:red;
}
Simpan kedua file tersebut dengan format dan nama file masing-masing. Jika berhasil maka hasilnya akan seperti ini.
Sekarang kalian bisa coba tekan tombol ganti tema. Dan hasilnya akan seperti ini.
Wow, tampilan website langsung berubah seketika. Mudah bukan ?
Sekian pembahasan mengenai bagaimana cara ganti tema website dengan Jquery. Semoga bermanfaat.
