Menambahkan atau Membuat Tombol Fitur Dark Mode di Blog dengan Cookie

Menambahkan atau Membuat Tombol Fitur Dark Mode di Blog dengan Cookie

Menambahkan atau Membuat Tombol Fitur Dark Mode di Blog dengan Cookie
Menambahkan atau Membuat Tombol Fitur Dark Mode di Blog dengan Cookie

Hallo sobat ruangcoder, artikel kali ini Cara Menambahkan atau Memasang, Membuat Fitur Dark Mode atau Night Mode di Template Blogger atau Blogspot Dengan Cookie , seperti contohnya yang ada di blog admin ini , nah sobat tentu tau dong Apa itu Dark Mode? Ya , Fitur Dark Mode adalah skema dimana tampilan yang awalnya cerah , akan menjadi gelap , dan memanjakan mata agar tidak sakit saat membaca , admin cenderung lebih suka memakai fitur dark mode saat malam hari , karena admin kalau lagi bikin suatu apps , memakai fitur yang cerah itu sulit , malah cepet pusing , paling kontras nya di turunin , nah jadi sangat berguna bukan fitur dark mode tersebut , jika sobat tertarik yuk , simak tutorialnya.

Cara Menambahkan Fitur Dark Mode pada Blogger dengan Cookie :


Nah , dengan sobat menambahkan fitur dark mode , dengan menggunakan cookie , maka fitur tersebut akan terus menerus menyimpan , walaupun sobat sudah refresh halaman tersebut , kecuali hapus history sobat , nah jadi kita langsung masuk saja ke tahap , menamabahkan si fitur dark mode tersebut.

Pertama sobat buka Dasboard Blogger sobat , kemudian klik pada menu Tema , dan sobat klik lagi pada bagian Menu Edit HTML , dan sobat letakkan kode dibawah ini tepat diatas atau sebelum tag </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>

Setelah itu sobat silahkan CTRL + F terus ketikkan </head> , nah setelah ketemu , letakkan kode dibawah ini tepat diatas atau sebelum kode tag </head> tersebut.

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

Kemudian sobat perhatikan kode .class-baru dan kode .nightmode kode tersebut merupakan contoh kode yang bisa sobat edit atau ubah dengan mengganti .class-baru dengan class atau ID di dalam bagian template tertentu yang ada di blog sobat. dan Silahkan sobat tambahkan .nightmode sebelum class atau ID dari bagian template sobat , yang ingin sobat ubah pada saat Night Mode tersebut sobat aktifkan. Contohnya seperti kode dibawah ini :

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Dan sobat juga bisa edit kode CSS dibawah ini , untuk menentukan posisi dari tombol atau fitur Dark Mode tersebut , seperti di blog admin tepat di atas bagian pojok kanan

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

Nah sobat tinggal lihat hasilnya deh , mudah bukan , jadi tutorial dalam membuat fitur dark mode nya sampai sini aja dulu , apabila sobat kesusahan silahkan komentar , nanti admin bantu , dan bila artikel ini bermanfaat silahkan sobat share ya , sampai ketemu di tutorial selanjutnya

Anda mungkin menyukai postingan ini