Blogger Gece Modu Eklentisi | Aklın Gölgesi | Bilim, Sanat, Tarih, Psikoloji vs.

WordPress, Blogger üzerinde avantaj sağladığı konulardan biri de eklentilerdir.Birçok eklenti WordPress’de mevcut iken Blogger’da bu ayarlar ya bulunmamakta ya da manuel olarak yapmak gerekiyor.Blogger kullanıcıları, ziyaretçilerinin göz sağlığını koruması için gece modu eklemesi gerekmekte.Birkaç kod ile bu eklentiyi kuracağız ve tek bir buton ile ister beyaz ister gece modunu kullanabileceğiz.

Öncelikle şunu belirtmek isterim kod tam anlamıyla çalışıyor garantisi veremem.Çünki temaların genel yapısı birbirinden farklı.Bu yüzden temel çalışma prensibini anlatacağım ve buna göre düzenleme yapabilceksiniz.

Tema kodlarımızın arasında </body> kodunu buluyoruz ve üstüne aşağıdaki kodu ekliyoruz.

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

Ardından </head> kodunun üstüne aşağıdaki kodu ekliyoruz.

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

Üstteki kırmızı kodu kendi temanıza göre ayarlamanız gerekmekte. .nightmode etiketinin yanına ekleyeceğiniz herhangi etiket, gece modu aktif iken devreye girecek.Örneğin

.nightmode .post{color:#fff}

Kodunu yazarsak makalenizdeki her kelime beyaz olacaktır.bu bir örnektir ve temadan temaya değişiklik gösterebilir.

Ve son olarak gece butonumuzun çalışmsaını sağlayacak buton aşağıdaki koddur.Bu kodu <body> kodunun altına veya butonun nerde gözükmesini istiyorsanız oraya ekleyin

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

Buna rağmen yapamadıysanız yorumlar kısmından bildirebilirsiniz

Bunu paylaş: