Membuat Slide Sidebar

Fungsi tombol menu sidebar tema Blogger v3

Efek menghapus script bawaan pada template Blogger v 3 salah satunya adalah tombol menu untuk memunculkan sidebar menjadi tidak berfungsi. Lihat penjelasannya dipostingan b:templateurl

Bagaimana cara mengaktifkan kembali fungsi tombol menu tersebut tanpa mengubah elemen dan tata letak sidebar ? Simak caranya dibawah ini.

Mengembalikan fungsi tombol menu Blogger

Karena penyebab tidak berfungsinya tombol menu tersebut adalah hilangnya script yang menghandle fungsi tombol tersebut maka cara mengembalikannya adalah dengan mengganti scriptnya dengan script baru yang fungsinya sama.

Kode javascript tombol menu

Dibawah ini adalah kode script sederhana yang bisa digunakan untuk mengaktifkan kembali fungsi tombol menu.
Copy - pastekan kode ini kedalam template, diatas tag </body>

<script>//<![CDATA[
//----- script tombol menu

var x = document.querySelector(".hamburger-menu");
var y = document.querySelector(".sidebar-back");
var sidebarCont = document.querySelector('.sidebar-container');
x.addEventListener("click", openSidebar);
y.addEventListener("click", closeSidebar);

function openSidebar() {
  sidebarCont.classList.remove('sidebar-invisible');
}

function closeSidebar() {
  sidebarCont.classList.add('sidebar-invisible');
}
//]]>
</script>

Persyaratan agar script tersebut bisa langsung berfungsi adalah kode CSS dan elemen dibawah ini dalam template masih belum berubah (masih sesuai aslinya, belum dikustom.):
1. Tombol dengan class='hamburger-menu' masih ada
2. Tombol dengan class='side-back' masih ada
3. CSS .sidebar-container
4. CSS .sidebar-invisible

⇐ Sebelumnya

Selanjutnya ⇒