Tutorial Membuat Fitur Dark Mode/Night Mode di Template Blogspot - Hallo sahabat gambar, Pada Artikel yang anda baca kali ini dengan judul Tutorial Membuat Fitur Dark Mode/Night Mode di Template Blogspot, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blog, Artikel Blogspot, Artikel Template, Artikel Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Tutorial Membuat Fitur Dark Mode/Night Mode di Template Blogspot
link : Tutorial Membuat Fitur Dark Mode/Night Mode di Template Blogspot

Tutorial Membuat Fitur Dark Mode/Night Mode di Template Blogspot

Aplikasi smartphone jaman sekarang ini kebanyakan sudah ditanamkan fitur dark mode/night mode, tidak terkecuali website-website yang sudah mulai mengikuti trend tersebut.

Yang dimana fitur ini bertujuan untuk mengganti tampilan keseluruhan website menjadi lebih gelap dan cocok digunakan pada kondisi kekurangan cahaya.

Cara Memasang Fitur Dark Mode/Night Mode Kedalam Template Blogspot

Untuk kamu pengguna blogspot dan templatemu belum ada fitur demikian, kamu bisa menambahkannya sendiri loh.. caranya seperti dibawah ini:

1. Masukkan kode ini tepat sebelum </body>

<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>

2. Lalu tambahkan kode CSS berikut ini sebelum </head> 

<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:&quot;&quot;;width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;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:&#39;&#39;;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>

Silahkan ganti .class-baru{} dengan Class atau ID di dalam bagian templatemu. Contohnya:

.nightmode .header{background:#222}
.nightmode .title{color:#fff}

Edit juga kode CSS berikut ini untuk mengubah posisi tombol Dark Mode/Night Mode

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

3. Setelah diyakin semuanya beres, klik Save Template.

Kurang lebih penampakannya seperti ini:

sumber kode: www.arlinacode.com

Beli template yang sudah ada fitur dark mode

Jika kamu ingin membeli template yang sudah langsung tertanam fitur dark mode, Beritaistic sangat merekomendasikan LinkMagz Template besutan Mas Sugeng.

Karena pada template ini kamu tidak hanya mendapatkan fitur dark mode saja, tetapi fitur-fitur keren lain juga sudah terbenam pada template LinkMagz, seperti berikut ini:

• Sudah pasti SEO Friendly
• Responsive / Mobile Friendly
• Layout versi 3 (bisa show/hide widget melalui tata letak)
• Sudah menggunakan schema markup
• Kecepatan loading super wuzz
• Gelap-gelapan dengan mode gelap
• TOC (table of content) otomatis
• Tombol order via WhatsApp untuk postingan produk dan jasa
• Slider gambar postingan produk dan jasa
• Related Posts di bawah artikel
• Breadcrumbs
• Tombol Share media sosial
• Widget iklan otomatis di tengah artikel
• Menu Navigasi Sticky
• Navigasi halaman dengan mode load more
• Smooth Scroll
• Tombol Back to Top
• Sidebar sticky
• Related posts di tengah artikel
• dll.

Harga template

Harga template super keren ini cuma dibanderol 245ribu saja.

Mengingat fitur-fitur yang akan kita dapatkan, dengan harga segitu sangat worth it banget ya

Untuk kamu yang langsung ingin bungkus atau ingin membaca testimoni pengguna lain langsung cus KESINI AJA YA

Demikianlah Artikel Tutorial Membuat Fitur Dark Mode/Night Mode di Template Blogspot

Sekianlah artikel Tutorial Membuat Fitur Dark Mode/Night Mode di Template Blogspot kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Tutorial Membuat Fitur Dark Mode/Night Mode di Template Blogspot dengan alamat link https://gambarwalpeper.blogspot.com/2021/08/tutorial-membuat-fitur-dark-modenight.html

Tweet