Cara Menambahkan Script Dark Mode di Template Blogspot

Blog maupun website saat ini sudah maklum dibarengi tampilan mode malam. Fitur ini membantu pengunjung blog yang bermasalah dengan kesehatan matanya. Tidak hanya itu, netizen yang sehat juga merasa nyaman. Terutama bagi mereka yang suka bergelut dengan dunia maya. Apalagi jika tidak terasa menatap layar komputer hingga larut malam. 

Untuk itulah, browser saat ini salah satunya Google Chrome menyediakan fitur night mode. Jika diaktifkan maka secara otomatis merubah tampilan website menjadi mode gelap. Baik website yang disertai kemampuan bawaan dark mode maupun tidak. Dan kemarin kita sudah coba cara seting dark mode di Chrome yang terpasang di Linux Mint.

Begitu juga dengan sistem operasi mobile, laptop dan PC. Saat ini tersedia kemampuan mengelola aplikasi yang menjadikan mode malam sebagai default. Namun fitur tersebut tidak tersedia untuk semua versi. Karena untuk Windows berlaku untuk versi 10 ke atas, Mac OS versi 10.14 ke atas,  iOS versi 13 ke atas dan Android versi 5 dan yang lebih baru. 

Nah, fenomena tersebut dilihat dari sisi pengunjung. Lalu bagaimana sisi pandang pemilik blog? Karena bisa saja pengunjung blog kita tidak memiliki device sebagaimana disebutkan di atas. Oleh karena itu, ada baiknya blog kita juga dibekali dengan kemampuan dark mode. Agar pengunjung bisa memilih tampilan mana yang lebih nyaman menemani mereka.

Sayangnya, tidak semua template blogspot yang beredar menyediakan fitur ini. Mau tidak mau kita harus menyisipkan script dark mode tersebut. Dan artikel kali ini semoga bisa membantu keinginan tersebut agar terwujud.

Cara Menambahkan Script Dark Mode di Template Blogspot

Mode gelap yang ditampilkan pada theme blogspot bisa bermacam-macam. Hal ini tergantung orang yang membuat script tersebut. Dan pada kesempatan kali ini saya ingin mengumpulkan beberapa macam script mode malam tersebut.

Script Mode Malam Model Pertama

Langkah pertama yang harus dilakukan adalah login ke dashboard blogger. Kemudian klik Theme dan backup templatenya terlebih dahulu. Hal ini untuk mengantisipasi adanya error pada saat memasukan script. Berikut ini tutorial selengkapnya cara menambahkan script night mode di template blogspot.

1. Login ke dashboard > Theme > Edit HTML.

2. Tempatkan script berikut ini sebelum </body>. Gunakan tombol Ctrl + F, ketikan </body> dan tekan enter biar cepet ketemu.

<div class='Switchbtn'> <span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/> <label class='togglenight-btn' for='nightmode'/></div> <script type='text/javascript'> //<![CDATA[ // Night Mode $("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")}); //]]></script>

3. Tempatkan kode berikut sebelum </head>. Gunakan tombol Ctrl + F, ketikan </head> dan tekan enter biar cepet ketemu.

<style type='text/css'> /* Night Mode */ .nightly{color:#999;font-size:13px} .Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px} .togglenight{display:none;} .togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%} .togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease} .togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)} .togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)} .togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#ff9f43} .nightmode{background:#202124;color:rgba(255,255,255,.7)} .nightmode a{color:rgba(255,255,255,.7)!important} .nightmode a:hover{color:rgba(255,255,255,.4)!important} .nightmode .class-baru{} .nightmode .class-baru{} </style>

4. Mohon diperhatikan, untuk baris kode .nightmode .class-baru{} yang terdiri atas 2 baris di atas. Maksudnya disesuaikan dengan penamaan sesuai template blogspot masing-masing. Berikut ini contoh script kode selanjutnya yang diterapkan pada template EvoMagz karya Mas Sugeng. Script ini bisa juga diterapkan pada template blogspot lain yang penamaan elemen dan widgetnya sama. 

.nightmode #wrapper{background:#111111} .nightmode .menu{background:#111111} .nightmode .menu{border:#000000} .nightmode .nav-menu li {border-right:#111111} .nightmode .nav-menu li a{background:#111111} .nightmode ul.nav-social li {border-left:#111111} .nightmode #header-wrapper{background:#111111} .nightmode .header{background:#111111} .nightmode .toggleMenu{background:#333333} .nightmode .nav-menu2{background:#333333} .nightmode .dropdowns{background:#333333} .nightmode .nav-menu2 li ul{background:#333333} .nightmode .nav-menu2 > li > a.active{background:#3a3a3a} .nightmode .nav-menu2 > li:hover > a{background:#3a3a3a} .nightmode .nav-menu2 li li a:hover{background:#3a3a3a} .nightmode .nav-menu2 li li li a{background:#333333} .nightmode .largebanner{background:#000000; border-right:1px solid #000000; border-bottom:1px solid #000000; border-left:1px solid #000000} .nightmode #post-wrapper{background:#111111} .nightmode .breadcrumbs{background:#111111; border:1px solid #333333} .nightmode #post-body table td {background:#111111} .nightmode a.home-link, #blog-pager-newer-link a, #blog-pager-older-link a { background-color:#333333; border: 1px solid #3a3a3a } .nightmode #sidebar-wrapper{background:#111111} .nightmode a.readmore{background:#3a3a3a} .nightmode .related-post{background:#111111} .nightmode #HTML2{background:#111111} .nightmode .berlangganan-box{background:#3a3a3a} .nightmode .displaypageNum a{background-color:#3a3a3a} .nightmode .displaypageNum a{border-color:#3a3a3a} .nightmode .post-info{background:#111111} .nightmode .post{background:#111111} .nightmode .post{border:#333333} .nightmode .status-msg-bg{background-color:#333333} .nightmode #bottombar{background:#000000} .nightmode #footer-wrapper{background:#333333} .nightmode .author-profile{background:#0072c6} .nightmode .author-profile{border-top:#0072c6} .nightmode .author-profile img{border:#0072c6} .nightmode .sidebar h2{color:#FFFFFF} .nightmode #feed-container{background:#111111} .nightmode #feed-container li{border:#111111} .nightmode .label-size{background:#0072c6}

Fitur mode malam kini sudah terpasang pada pojok kanan atas blog kita. Untuk menyesuaikan dengan template masing-masing silahkan ganti sendiri kode warnanya. Kode tersebut diawali dengan # dan diikuti dengan 6 karakter berikutnya. Contoh kode warna yang terlihat pada script di atas misalnya #0072c6, #111111 atau #FFFFFF. Sekian belajar komputer otodidak kita hari ini tentang cara menambahkan script night mode pada template blogspot. 

Script Mode Malam Model Kedua

Script di atas digunakan oleh saya sendiri pada penggunaan blog ini hingga hari ini. Adapun bagi teman-teman yang mungkin kurang selera dengan tampilannya bisa memilih cara kedua. Berikut ini tutorial selengkapnya cara menambahkan script dark mode di blogspot.

1. Login ke dashboard blogger > Theme > Edit HTML.

2. Tempatkan kode di bawah ini sebelum tag </body>

<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#ind-darkmode").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#ind-darkmode").prop("checked",!0):$("#ind-darkmode").prop("checked",!1)}); //]]> </script>

3. Tempatkan kode CSS di bawah ini sesudah tag <b:skin><![CDATA[ dan sebelum  ]]></b:skin>.

<style> /* Button Dark Mode */ .ind-darkmode{ display:inline-block; float: right; margin-top: 3px; position:absolute; right:45px; top: 0; z-index:999; } .ind-darkmode svg{ width:24px; height:24px; vertical-align: -5px; background-repeat: no-repeat !important; content: ''; } .ind-darkmode svg path{ fill:#fff; } .ind-darkmode .check:checked ~ .NavMenu{ is opacity:1; visibility:visible; top:45px; min-width:200px; transition:all .3s ease; z-index:2; } .ind-icon { cursor: pointer; display: block; padding: 8px; background-position: center; transition: all .5s linear; } .ind-icon:hover{ border-radius: 100px; background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%; } .check { display: none; } .ind-darkmode .ind-icon .openmode{ display:block; } .ind-darkmode .ind-icon .closemode{ display:none; } .ind-darkmode .check:checked ~ .ind-icon .openmode{ display:none; } .ind-darkmode .check:checked ~ .ind-icon .closemode{ display:block; } .Night { background: #353535; } </style>

4. Terakhir, tempatkan kode di bawah ini di bagian yang Anda inginkan, misalnya di menu navigasi.

<div class='ind-darkmode'><input class='check' id='ind-darkmode' title='Mode Dark' type='checkbox'/> <label class='ind-icon' for='ind-darkmode'> <svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg> <svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg> </label> </div>

5. Setelah itu klik simpan dan tampilannya akan terlihat seperti ini.

Script Mode Malam Model Ketiga

Script selanjutnya saya dapatkan dari blog wendycode yang menggunakan bantuan jQuery. Untuk itu, pastikan template Anda sudah terpasang jQuery. Jika belum silahkan install jQuery kedalam template blogspot. Terserah, bisa melalui Google CDN, Microsoft CDN, CDNJS CDN atau jsDelivr CDN.

1. Misalnya Google CDN, silahkan tempatkan kode ini pada bagian <head> dan sebelum </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

2. Tempatkan kode di bawah ini sebelum tag </body>.

<div class="Switchdark"> <input class="toggledarkwendy toggledarkwendy-switch" id="darkmode" type="checkbox" /> <label class="toggledarkwendy-btn" for="darkmode"> <svg class='svg-1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'></path></g></svg> <svg class='svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></label> </div> <script type="text/javascript"> //<![CDATA[ // Dark Mode $("#darkmode").click(function(){$("body").toggleClass("darkmode")}),$("body").toggleClass(localStorage.toggled),$("#darkmode").click(function(){"darkmode"!=localStorage.toggled?($("body").toggleClass("darkmode",!0),localStorage.toggled="darkmode"):($("body").toggleClass("darkmode",!1),localStorage.toggled="")}); //]]> </script>

3. Tempatkan kode di bawah ini di atas tag </head>.

<style type='text/css'> /* Dark Mode */ .Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px} .toggledarkwendy{display:none;} .toggledarkwendy-btn{display:flex;align-items:center; width:26px;height:26px;} .toggledarkwendy-btn svg{fill:none!important;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1} .toggledarkwendy-btn .svg-1{display:inline-block} .toggledarkwendy-btn .svg-2{display:none} .toggledarkwendy-switch:checked + .toggledarkwendy-btn .svg-1{display:none} .toggledarkwendy-switch:checked + .toggledarkwendy-btn .svg-2{display:inline-block} .darkmode{background:#1e1e1e;color:#fefefe} .darkmode .toggledarkwendy-btn svg{stroke:#fefefe} .darkmode .class-baru{} .darkmode .class-baru{} </style>

4. Klik Simpan.

5. Tampilannya akan terlihat seperti screenshot di bawah ini.

Script Mode Malam Model Keempat

Berikutnya juga masih tentang script dark mode yang tampilannya tidak kalah cantik dengan model sebelumnya. Bagi teman-teman yang belum menemukan script dark mode yang cocok silahkan coba yang satu ini.

1. Tambahkan kode CSS berikut sebelum tag  ]]></b:skin> dan sesudah <b:skin><![CDATA[.

:root { --primary-color: #302AE6; --secondary-color: #536390; --font-color: #424242; --bg-color: #fff000; --heading-color: #292922; }[data-theme="dark"] { --primary-color: #9A97F3; --secondary-color: #818cab; --font-color: #e1e1ff; --bg-color: #161625; --heading-color: #818cab; } /*Simple css to style it like a toggle switch*/ .theme-switch-wrapper { display: flex; align-items: center; em { margin-left: 10px; font-size: 1rem; } } .theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; } .theme-switch input { display:none; } .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: .4s; width: 26px; } input:checked + .slider { background-color: #66bb6a; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

2. Letakan kode di bawah ini pada bagian menu navigasi atau sesuai selera. Untuk letak lebih detail ini tergantung template yang digunakan. Dan saya pikir seseorang lebih mengetahui template yang dimilikinya masing-masing. Pada contoh kali ini saya tempatkan pada bagian menu navigasi yang dibuat dengan Bootstrap.

<div class='theme-switch-wrapper'> <label class='theme-switch' for='checkbox'> <input id='checkbox' type='checkbox'/> <div class='slider round'/> </label> <em>Ini contoh Dark Mode!</em> </div>

3. Terakhir silahkan letakan kode javascript di bawah ini sebelum </body>

<script type='text/javascript'> const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); const currentTheme = localStorage.getItem('theme'); if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); } else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('theme', 'light'); } } toggleSwitch.addEventListener('change', switchTheme, false); </script> <!-- Script Theia Sticky Sidebar --> <script type='text/javascript'>//<![CDATA[ $("#main-wrapper, #sidebar-wrapper").each(function() { $(this).theiaStickySidebar() }) //]]> </script>

4. Simpan template Anda.

5. Begini penampakannya.

Kesimpulan

Demikian tutorial kali ini tentang cara menambahkan script Dark Mode di template blogspot. Untuk saat ini saya cukupkan dengan koleksi yang masih sedikit. Mudah-mudahan ke depan bisa menambah koleksi script lagi. Ini memberikan pilihan kepada teman-teman untuk memilik tampilan yang sesuai dengan selera dan cita rasa seni masing-masing.

Adapun bagi teman-teman yang belajar membuat template blogspot dengan bootstrap. Ada pilihan lain yang bisa dicoba untuk menambahkan dark mode pada website Anda. Salah satu yang sudah diujicoba dan berhasil yaitu mengaktifkan dark mode otomatis melalui pengaturan di OS dengan menambahkan sedikit baris kode dari Bootstrap.

Semoga bermanfaat.