Lagi jalan-jalan a.k.a blogwalking di Github dan CodePen, ketemu tutorial keren yang dibagikan secara gratis oleh Peter Lada.
Ya, membuat dan memasang tombol Switch atau Toggle tanpa menggunakan JavaScript; cukup dengan mengaplikasikan HTML dan CSS di template blogger, kita bisa membuat Toggle Button di blog.
Jujur saya kurang bisa menjelaskannya; akan tetapi, fungsi Toggle Button ini bisa digunakan sebagai mematikan atau mengaktifkan suatu JavaScript dengan sekali klik.
Contohnya, mode gelap (malam) atau mode terang (pagi/siang) terhadap tampilan blog.
Baca Juga: Cara Membuat Kotak HTML, JavaScript & CSS
Cara Membuat Switch/Toggle Button tanpa JavaScript
1. Silahkan buat file dari kode dibawah ini:
<input type=”checkbox” />
<span class=”tgl_body”>
<span class=”tgl_switch”></span>
<span class=”tgl_track”>
<span class=”tgl_bgd”></span>
<span class=”tgl_bgd tgl_bgd-negative”></span>
</span>
</span>
</label>
2. Untuk CSSnya, kode yang digunakan adalah:
> :checked ~ .tgl_body {
> .tgl_switch {
left: $toggle-width – $switch-size;
}
.tgl_bgd {
right: -($toggle-width – ($switch-size / 2));
&.tgl_bgd-negative {
right: auto;
left: -10px;
}
}
}
}
3. Tambahkan pula animasinya dengan kode dibawah ini:
$anim-speed-normal: 250ms;
.tgl_bgd {
@include transition(left $anim-slight-bounce $anim-speed-normal, right $anim-slight-bounce $anim-speed-normal);
}
Sila masuk kesini, CodePen by Peter Lada bagi yang ingin mengedit ulang atau melihat contoh Toggle Button yang dimaksud.
Baca Juga: Cara Membuat Widget Blog hanya Tampil di Single Post
Itulah cara memasang tombol Toggle Button di blogger (blogspot) tanpa JavaScript; akan tetapi hanya menggunakan HTML dan CSS.
Terimakasih telah membaca di Aopok.com, semoga bermanfaat dan lihat juga di situs berkualitas dan paling populer Piool.com, peluang bisnis online Topbisnisonline.com dan join di komunitas Topoin.com.
