Blogger'a Gece Modu Eklentisi Nasıl Eklenir ?

Günümüz internet dünyasında hemen hemen bütün sosyal medya uygulamalarında gece modu artık bulunuyor. Geceleri veya gözümüzü yormaması için kullanmak için gayet güzel bir eklenti. Ben ise bugün sizlere bu eklentiyi kendi blogunuza nasıl ekleyebileceğinizden bahsedeceğim, aslında çok basit işlemlerden oluşuyor bu işlerden hiç anlamayanlar bile kolay bir şekilde kurabilirler. Söylemekte fayda var bazı arkadaşlar olayı yanlış anlamışlar kurduğunuz eklenti sadece size özel değil sitenize giren herkes açabilir.

Öncelikle blogumuzu açıp tema bölümüne gelip sağ üste bulunan üç noktaya tıklıyoruz ardından açılan pencerede HTML'yi düzenleye basıyoruz.

Ardından açılan sayfada ctrl ve f tuşlarına aynı anda basıyoruz aşağıdaki resimdeki gibi yukarıda açılan search bölümünden arama yapacağız.

Açılan search bölümüne </body> kodunu ekliyoruz ardından enter tuşuna basıyoruz. Ardından </body> kodunun üstüne aşağıdaki kodları kopyalayıp ekliyoruz.

<div class='Switchbtn'>
<span class='nightly'>Gece Modu</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>

Son olarakta tekrar ctrl ve f tuşlarına basıp search bölümüne </head> kodunu ekliyoruz ardından enter tuşuna basıyoruz. Ardından </head> kodunun üstüne aşağıdaki kodları kopyalayıp ekliyoruz. Daha sonra ise temamızı kaydediyoruz ve işlemimiz tamamlanmış oluyor.

<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:'';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>

Eğer aklınıza takılan veya yapamadığınız birşey var ise yorum bölümünden bana ulaşabilirsiniz.