Cara Menyesuaikan Kode JavaScript pada Theme Blogger

Tutorial yang menjelaskan web desain kadang tidak mengkhususkan untuk platform Blogger. Namun script yang terkandung didalamnya sama-sama terdiri atas 3 komponen. Misalnya ada kode HTML dan CSS serta file JavaScript yang diletakan pada direktori khusus.

Dan kode CSS juga ada yang menjelaskan dalam tutorialnya pada sebuah file yang diletakan dalam direktori yang lain lagi. Pada kasus seperti ini mungkin sebagian pemula akan menganggap bahwa tutorial di atas tidak bisa digunakan untuk theme Blogger.

Padahal ketiga komponen ini sebetulnya termasuk yang mendukung theme Blogger. Hanya saja peletakan kode tersebut sedikit berbeda jika kita menggunakan platform Blogger. Karena semua kode di atas hanya bisa diletakan pada file yang sama dalam sebuah theme Blogger.

Sehingga, jika kita menemukan tutorial yang seperti ini di internet. Maka yang perlu diperhatikan adalah bagaimana cara menyesuaikan kode-kode tersebut agar bisa ditempatkan pada theme Blogger.

Cara Menyesuaikan Kode JavaScript pada Theme Blogger

Secara umum kita sudah mengetahui peletakan kode CSS dan JavaScript dalam theme Blogger. Namun pada beberapa kasus ada kalanya kode yang ditempatkan dalam theme dianggap salah oleh mesin Blogger. Padahal kita hanya melakukan copy dan paste tanpa merubah sedikit pun kode tersebut.

Lantas apa yang bisa dilakukan untuk mengatasi hal ini? Oke, kali ini kita akan contohkan bagaimana caranya menempatkan kode JavaScript yang didapat di internet agar berfungsi pada template blogger. Dan untuk praktek kali ini kita akan mencoba tombol switcher untuk mode gelap dan terang.

Dan seperti biasa kita menggunakan theme blogger sendiri dari nol yang dibuat dengan Bootstrap.

Praktikum Penempatan Kode JavaScript Mode Gelap dan Terang

Untuk praktek kali ini kita coba sebuah script dark mode yang dibuat cssscript.com. Setelah itu lakukan langkah-langkah di bawah ini untuk mengaktifkan fungsi dark mode beserta tombol switch-nya.

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Tambahkan link CDN CSS Bootstrap versi 5.3.0 ini di dalam tag <head>.

4. Tambahkan juga link CDN JavaScript bawaan Bootstrap mulai versi 5.3.0 sebelum tag </body>/

5. Kunjungi website cssscript.com.

6. Copy kode HTML ini yang didapatkan dari situs di atas. Kemudian tempatkan pada template blogger pada bagian yang diinginkan agar tombol mode gelap dan terang itu terlihat di sana. Misalnya pada menu navbar pertama atau kedua.

7. Kembali ke situs cssscript.com tadi kemudian klik Download untuk mengunduh file JavaScript yang dibutuhkan.

8. Ekstrak file hasil download tersebut sehingga menghasilkan folder baru "light-switch-bootstrap-main"

9. Buka file switch.js dengan text editor yang biasa digunakan.

10. Copy kode JavaScript yang terlihat seperti di bawah ini seluruhnya.

/** * Light Switch @version v0.1.4 */ (function () { let lightSwitch = document.getElementById('lightSwitch'); if (!lightSwitch) { return; } /** * @function darkmode * @summary: changes the theme to 'dark mode' and save settings to local stroage. * Basically, replaces/toggles every CSS class that has '-light' class with '-dark' */ function darkMode() { document.querySelectorAll('.bg-light').forEach((element) => { element.className = element.className.replace(/-light/g, '-dark'); }); document.querySelectorAll('.link-dark').forEach((element) => { element.className = element.className.replace(/link-dark/, 'text-white'); }); document.body.classList.add('bg-dark'); if (document.body.classList.contains('text-dark')) { document.body.classList.replace('text-dark', 'text-light'); } else { document.body.classList.add('text-light'); } // Tables var tables = document.querySelectorAll('table'); for (var i = 0; i < tables.length; i++) { // add table-dark class to each table tables[i].classList.add('table-dark'); } // set light switch input to true if (!lightSwitch.checked) { lightSwitch.checked = true; } localStorage.setItem('lightSwitch', 'dark'); } /** * @function lightmode * @summary: changes the theme to 'light mode' and save settings to local stroage. */ function lightMode() { document.querySelectorAll('.bg-dark').forEach((element) => { element.className = element.className.replace(/-dark/g, '-light'); }); document.querySelectorAll('.text-white').forEach((element) => { element.className = element.className.replace(/text-white/, 'link-dark'); }); document.body.classList.add('bg-light'); if (document.body.classList.contains('text-light')) { document.body.classList.replace('text-light', 'text-dark'); } else { document.body.classList.add('text-dark'); } // Tables var tables = document.querySelectorAll('table'); for (var i = 0; i < tables.length; i++) { if (tables[i].classList.contains('table-dark')) { tables[i].classList.remove('table-dark'); } } if (lightSwitch.checked) { lightSwitch.checked = false; } localStorage.setItem('lightSwitch', 'light'); } /** * @function onToggleMode * @summary: the event handler attached to the switch. calling @darkMode or @lightMode depending on the checked state. */ function onToggleMode() { if (lightSwitch.checked) { darkMode(); } else { lightMode(); } } /** * @function getSystemDefaultTheme * @summary: get system default theme by media query */ function getSystemDefaultTheme() { const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)'); if (darkThemeMq.matches) { return 'dark'; } return 'light'; } function setup() { var settings = localStorage.getItem('lightSwitch'); if (settings == null) { settings = getSystemDefaultTheme(); } if (settings == 'dark') { lightSwitch.checked = true; } lightSwitch.addEventListener('change', onToggleMode); onToggleMode(); } setup(); })();

11. Paste pada template Blogger sebelum tag </body>.

12. Nah, agar kode JavaScript di atas menyesuaikan dengan lingkungan Blogger. Maka kode tersebut harus dibungkus dengan "<script>//<![CDATA[// " dan "//]]> </script>"

13. Sehingga, kode JavaScript yang terpasang pada template Blogger akan terlihat seperti ini:

14. Simpan theme.

15. Hasil yang terlihat akan seperti ini:

16. Ketika kita klik tombol switch berubah menjadi gelap berarti JavaScript bisa berfungsi.

Penutup

Kode JavaScipt ini sudah berfungsi meskipun dengan lingkungan Blogger. Dan apa yang saya praktekan ternyata sama dengan hasil yang diperlihatkan pada laman demo aslinya. Sekian artikel kali ini tentang cara penyesuaian kode JavaScript pada lingkungan Blogger. Dan kita sudah berhasil mempraktekannya pada saat mencoba script dark mode dari cssscript.com.

Ada yang tidak berhasil menerapkan kode di atas pada theme Bloggernya? Silahkan komentar atau gunakan terlebih dahulu template Blogger buatan Sebardi Blog. Karena theme blogger kami menggunakan Bootstrap 5 juga; ada yang versi 5.3.0 yang sudah mendukung dark mode.

Selamat mencoba.

Cara Menyesuaikan Kode JavaScript pada Theme Blogger

Cara Menyesuaikan Kode JavaScript pada Theme Blogger

Praktikum Penempatan Kode JavaScript Mode Gelap dan Terang

Penutup

Tidak ada komentar:

Posting Komentar

Memuat...

Nama Domain Murah

Yusuf