Cara Pasang Checkbox Sun/Moon Natalia-FS di Theme Blogger

Hari ini saya terpukau dengan checkbox-toggle yang tampilannya sangat menawan. Saya menemukannya lengkap disertai dengan kode dan preview yang diterbitkan di laman github. Padahal script yang ditunjukan hanya kode HTML, CSS dan JavaScript.

Namun bagaimana cara meletakan kode-kode tersebut kedalam theme blogger yang memiliki ekstensi XML? Pertanyaan ini mungkin tidak akan terlintas bagi seorang web developer maupun mereka yang terbiasa berkecimpung di dunia blogger yang sudah kawakan.

Tapi tidak bagi pemula yang baru belajar membuat template sendiri dari nol. Apalagi belajar membuat theme blogger secara mandiri alias otodidak bermodalkan tutorial dan referensi yang didapatkan dari internet. Tentu, pengetahuan mendasar seperti ini menjadi rujukan yang mudah-mudahan bermanfaat.

Oleh karena itu, pada kesempatan kali ini saya akan menunjukan caranya. Kita mulai dari langkah yang mudah terlebih dahulu sebelum masuk dalam tahap edit atau mengubah dan menyesuaikan kode agar sesuai dengan theme blogger sesuai preferensi masing-masing.

Cara Pasang Checkbox Sun/Moon Natalia-FS di Theme Blogger

Theme Blogger memiliki struktur tersendiri yang sama-sama bisa disisipi kode HTML, CSS dan JavaScript. Sedangkan peletakannya tentu harus mengikuti standar yang digunakan. Dan khusus untuk kode JavaScript terkadang harus disesuaikan agar berfungsi dengan baik.

Selengkapnya, berikut ini tutorial cara pasang kode checkbox sun/moon Natalia-fs yang diadaptasi ke dalam theme blogger.

1. Login ke dashboard Blogger.

2. Gunakan blog khusus untuk mempelajari kode.

3. Klik "Tema" atau "Theme".

4. Klik icon "▼" di sebelah tulisan SESUAIKAN.

5. Klik "Edit HTML".

6. Hapus kode template bawaan dan gunakan template dasar berikut:

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='utf-8'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='main' showaddelement='yes'/> </body> </html>

7. Dengan kode template sendiri dari dasar di atas kita belum menampilkan apa pun pada halaman website meskipun sudah memiliki banyak postingan artikel.

8. Letakan kode HTML berikut ini setelah tag <body> dan sebelum tag <b:section class='main' id='main' showaddelement='yes'/>.

9. Dengan kode di atas maka halaman blog kita baru akan tampak seperti ini.

10. Letakan kode CSS berikut ini setelah tag <b:skin><![CDATA[ dan sebelum tag ]]></b:skin>.

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root{ --dark: #111111; --sun: #ffd700; --sun-shadow: #987416; --moon: #dddddd; --moon-shadow: #808080; --star: #ffffff; --cloud: #ffffff; --crater: #535370; --shadow-01: #80808077; --shadow-02: #ffffff22; --shadow-03: #555555; --white: #ffffff; --background-day: linear-gradient(skyblue, cadetblue); --background-night: linear-gradient(-45deg, #222, #000030); } main{ display: flex; justify-content: center; align-items: center; height: 100vh; -webkit-transition: .4s; transition: .4s; } .dark{ background: var(--dark); } .container{ position: relative; display: inline-block; width: 80px; height: 34px; -webkit-transform: scale(3); transform: scale(3); } .container input{ opacity: 0; width: 0; height: 0; } .slider{ position: absolute; cursor: pointer; inset: 0; background: var(--background-day); box-shadow: inset 0 0 3px; -webkit-transition: 0.4s; transition: 0.4s; filter: drop-shadow(0 0 2px var(--dark)); overflow: hidden; z-index: 1; } .slider::before{ position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: var(--sun); -webkit-transition: 0.4s; transition: 0.4s; box-shadow: inset 0 -1px 2px var(--sun-shadow), 0 1px 2px var(--shadow-01), 0 0 0 10px var(--shadow-02), 0 0 0 20px var(--shadow-02), 10px 0 0 20px var(--shadow-02); } input:checked + .slider{ background: var(--background-night); filter: drop-shadow(0 0 2px var(--white)); } input:checked + .slider:before{ background: var(--moon); -webkit-transform: translateX(180%); -ms-transform: translateX(180%); transform: translateX(180%); box-shadow: inset 0 -1px 2px var(--moon-shadow), 0 1px 2px var(--shadow-03), 0 0 0 10px var(--shadow-02), 0 0 0 20px var(--shadow-02), -10px 0 0 20px var(--shadow-02); } .slider::after{ content: ""; position: absolute; background: var(--crater); width: 4px; height: 4px; border-radius: 50%; bottom: 65%; right: 16%; box-shadow: -8px 7px 0 3px var(--crater), 2px 10px 0 var(--crater) ; -webkit-transition: .4s; transition: .4s; -webkit-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); filter: saturate(.75); } input:checked + .slider::after{ -webkit-transform: scale(1) rotate(-24deg); transform: scale(1) rotate(-24deg); } input:checked + .slider .background{ -webkit-transform: translateY(260%); transform: translateY(260%); opacity: 0; } .star{ -webkit-transform: scale(0); transform: scale(0); -webkit-transition: .4s; transition: .4s; } input:checked + .slider .star{ position: absolute; width: 0; height: 0; border: 10px solid transparent; border-bottom: 7px solid var(--star); transform: rotate(35deg); border-top: none; margin: 5px 0; -webkit-transform: scale(.3) translate(50%); transform: scale(.3) translate(50%); } input:checked + .slider .star:last-child{ -webkit-transform: scale(.4) translate(225%, 300%); transform: scale(.4) translate(225%, 300%); } input:checked + .slider .star::before, input:checked + .slider .star::after{ content: ""; position: absolute; width: 0; height: 0; border-top: none; } input:checked + .slider .star::before{ border: 3px solid transparent; border-bottom: 8px solid var(--star); -webkit-transform: rotate(35deg); transform: rotate(35deg); top: -7.5px; left: 1.5px; } input:checked + .slider .star::after{ border: 10px solid transparent; border-bottom: 7px solid var(--star); -webkit-transform: rotate(70deg); transform: rotate(70deg); top: -7px; left: -4.5px; } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .background{ position: absolute; width: 10px; height: 10px; background: var(--cloud); border-radius: 50%; bottom: 0; right: 0; box-shadow: 0 -10px 0 8px var(--cloud), -10px 0px 0 8px var(--cloud), -45px 4px 0 5px var(--cloud), -60px 0px 0 3px var(--cloud), -29px 2px 0 8px var(--cloud) ; -webkit-transition: .4s; transition: .4s; }

11. Dengan baris kode di atas maka tampilan blog kita akan tampak seperti ini. Hanya saja ketika kita klik icon checkbox tersebut tidak terjadi perubahan apa-apa.

12. Kecuali hanya perubahan pada tombol checkbox itu sendiri menjadi seperti berikut:

13. Selanjutnya, letakan kode JavaScript berikut ini sebelum tag </body>. Perhatikan! Kode sumber ketika dimasukan ke dalam theme blogger diadaptasi dengan menambahkan //<![CDATA[ dan //]]>.

14. Klik icon "Save" untuk menyimpan template.

15. Tampilan blog Anda akan terlihat seperti ini ketika checkbox diklik mode malam alias kode JavaScriptnya sudah berfungsi dengan baik.

Kesimpulan

Icon checkbox sun/moon natalia-fs sekarang sudah berfungsi dengan baik pada theme blogger. Tapi ini bukan berarti pekerjaan telah selesai. Langkah selanjutnya bagaimana caranya agar icon tersebut nyempil di menu navbar theme blogger kita yang dibuat sendiri dari nol?

Nah, ini yang mungkin akan terasa sulit karena harus memahami kode-kode CSS di atas. Kode-kode itulah yang akan kita perbaharui. Begitu juga kode HTML di atas yang harus di adaptasi jika dimasukan ke dalam kode menu navigasi kita yang sudah responsif.

Akhir kata, mudah-mudahan kode di atas bisa kita pelajari untuk kemudian bisa dimasukan ke dalam theme blogger sendiri yang dibuat dari nol. Dan barangkali ada yang sudah bisa melakukannya, silahkan tinggalkan jejak di komentar.

Semoga bermanfaat.

Cara Pasang Checkbox Sun/Moon Natalia-FS di Theme Blogger

Cara Pasang Checkbox Sun/Moon Natalia-FS di Theme Blogger

Kesimpulan

Tidak ada komentar:

Posting Komentar

Memuat...

Nama Domain Murah

Yusuf