02-02-2022, 03:52 PM
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 KODU
Ardından aşağıdaki CSS kodumuzu </head> etiketinin üstüne ekliyoruz.
CSS KODU
İş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 KODU
Bunlara ek olarak gece modu düğmemizin konumunu belirlemek için bu CSS kodunu düzenleyin.
CSS KODU
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 KODU
Kod:
<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 KODU
Kod:
<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:"";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>İş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 KODU
Kod:
.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 KODU
Kod:
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}Blogger Destek Forumu