×

faronesia.com support search by voice

Faronesia Design

Profesional blogger design by Azza

Fullscreen mode
Normal mode
Kemungkinan terdapat beberapa tutorial desain dan modifikasi yang hanya bekerja pada template tertentu. Silahkan cermati setiap perintah yang tertera didalam artikel.

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.

0 Response to "Cara Membuat Switch on/off di Halaman Blog Menggunakan jQuery"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel