Blogger'a Gece Modu Eklentisi Nasıl Eklenir

Merhaba arkadaşlar, günümüz sosyal medyaları ve siteleri okuyucularına loş ortam yapmada oldukça istekli, okuyucuların gözlerini yormaması için gece modunu getiriyorlar tabii diğer yanı ise batarya tüketimini azaltarak daha fazla sürede telefonun çalışmasıdır.Her neyse konumuza geçelim Night Mode veya Dark Mode olarak bilinen bu eklentiyi nasıl kuracağımıza..

Bilindiği gibi ilk olarak Blogger yönetim panelimize giriş yapıyoruz ardından Tema > Html'yi Düzenle kısmına giderek ana kodlarımıza erişiyoruz.Ctrl + F kombinasyonu ile </body> etiketini aratıyoruz hemen üstüne aşağıdaki kodumuzu ekliyoruz.

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

Ardından aşağıdaki CSS kodumuzu </head> etiketinin üstüne ekliyoruz.

CSS<style type='text/css'>
/* Night Mode Gematriga*/
.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>

İşaretli kodu bir kenara not alın .class-baru.Bu işaretli kodu blogunuzda etki alanına alacağınız sınıflar veya kimlikler ile değiştiriniz.Blogunuzdaki etki altına alacağınız şablon bölümünün sınıf veya kimliğinin önüne .nightmode kısmını eklemeyi unutmayın.Örneği aşağıdaki kodda vereceğim.

CSS.nightmode .header{background:#222}

.nightmode .title{color:#fff}
...

Bunlara ek olarak gece modu düğmemizin konumunu belirlemek için bu CSS kodunu düzenleyin.

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

Önizleme sitemizde yer almaktadır.(Sağ üst kısımda)