×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

Cara Membuat Switch on/off di Halaman Blog Menggunakan jQuery

Faronesia.com - Hai sobat blogger, pada kesempatan kali ini saya akan memberikan trik mudah cara membuat kode cahaya yang dapat Anda nyalakan dan nonaktifkan. Di sini saya hanya menggunakan jQuery dan css untuk menyalakan cahaya dan mematikannya. Saya juga menggunakan beberapa kode JavaScript untuk menampilkan pesan untuk efek cahaya tersebut.

Switch atau tombol yang digunakan di sini terhubung ke jQuery untuk menyalakan cahaya dan mematikan cahaya. JQuery yang digunakan di sini terhubung ke CSS menggunakan properti toggleClass. Saya membatasi cahaya dengan menggunakan tag pembagian.

Tutorial ini sebenarnya memiliki kesamaan fungsi seperti pada postingan terdahulu yaitu dark mode namun tutorial kali ini hanya mengubah bagian kecilnya saja.

Silahkan lihat preview/demo dibawah ini dan tekan tombol swicth on/off

Gelap amat idupin lampunya dong

Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara Membuat Switch on/off di halaman blog menggunakan jQuery
  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode </head>
  • Lalu tempelkan kode dibawah ini tepat diatas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  • Selanjutnya, cari kode ]]></b:skin>
  • Lalu tempelkan kode dibawah ini tepat diatas kode tersebut
.bulb2{
background-color:#a6a6a6;
}
.bulb1{
background-color:#ffff80;
border:2px solid black;
height:150px;
}
#bulb1{
border:2px solid black;
height:150px;
}
imgs{
width:100px;
height:150px;
margin-top:2%;
}
  • Lalu cari kode </body> selanjutnya tempelkan kode dibawah ini tepat diatas kode tersebut
<script>
$(document).ready(function(){
$("button").click(function(){
$("#bulb1").toggleClass("bulb1");
});
});
function my() {
  var x = document.getElementById("myd");
  if (x.innerHTML === "switch off the light to save energy !") {
    x.innerHTML = "idupin lampunya dong gan...gelap nih";
  } else {
    x.innerHTML = "nah gini dong terang hehe";
  }
}
</script>

  • Lalu letakkan kode html dibawah ini pada halaman blog yang anda inginkan

<div class="bulb2" id="bulb1">
<center>
<div id="myd">
its too dark here ! Switch on the light
</div>
</center>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://1.bp.blogspot.com/-453Fl_UQejA/XR3sN9tthXI/AAAAAAAABhQ/wwUoelKDcwslHWFAiMvkACmu_KtYNj4ggCLcBGAs/s320/light-bulb-png-15-light-bulb-icon-256.png" /></div>
</div>
<center><button onclick="my()">on/off</button>
</center>
  • Terakhir simpan dan lihat hasilnya
  • Perlu diketahui, tutorial ini sangatlah dasar sekali dan saya yakin anda bisa mengembangkan kode diatas sesuai keinginan dan kebutuhan.
Demikianlah mengenai Cara Membuat Switch on/off di halaman Blog Menggunakan jQuery semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial