Blogger'a Gece Modu Eklentisi

Merhaba Arkadaşlar, Blogger yazılarımızda bugün Blog sitemize Gece Modu eklentisinden bahsedeceğiz.

Biliyorsunuz ki hemen hemen tüm sosyal medyalarda bahsetmiş olduğum Gece Modu gelmiş olup birçok kişi tarafından kullanılmaktadır.

Şimdi bu Gece Modu'nu Blogger sitemize nasıl ekleyeceğiz onu anlatmaya çalışacağız, sizler de  bu eklentiyi sitenize eklemek istiyorsanız aşağıda ki adımları takip edebilirsiniz.

Öncelikle Blogger panelimize giriş yapıyoruz ve ardından Tema > Html'yi düzenle'ye tıklıyoruz.

Html editör sayfamız da öncelikle klavyemizin kısayol tuşlarını kullanarak Ctrl+f yardımıyla </body> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki Html kodlarını ekleyelim.

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>

Şimdi sırada CSS kodlarını eklmeye geldi yine kısayol tuşlarını kullanarak Ctrl+f yardımıyla </head> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.

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

İşaretli kodları bir kenara not alın. ".class-baru" bu işaretli kodu bloğunuzda etki alanına alacağınız sınıflar veya kimlikler ile değiştiriniz. Bloğunuzdaki 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. Örnek olarak aşağıda ki kodlar:

CSS .nightmode .header{background:#222}

.nightmode .title{color:#fff}

Gece Modu düğmesinin konumunu belirlemek için aşağıda ki CSS kodunu kullanabilirsiniz.

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

Bütün işlemler bu kadar umarım başarılı bir makale yazısı olmuştur.