Blogger gece modu eklentisi nasıl eklenir?

Benzer Konular

Blogger Gece modu Ekleme!

Blogger sitenize çerezleri kullanan bir gece modu eklemenin imkansız olmadığını daha önce duymuş muydunuz? Evet, şaka değil: gerçekten de böyle bir şeyi yapmak mümkün.

Gece modu nedir?

Gece modu, ekranı karartmaya yarayan bir eklentidir. Bu özellik genelde pil kullanımını düşürmek ve göz sağlığını korumak için bazı cep telefonları, tabletler ve bilgisayarlarda bulunur.

Günümüzde pek çok web sitesinde de bulunan bu özelliğin bulunduğu web sitelerinin gece kullanıcıları için daha avantajlı olduğunu söyleyebiliriz.

Çerez özelliği nedir?

Çerez özelliği, kullanıcının siteniz üzerinde yaptığı değişiklikleri kaydetmeyi sağlayan özelliktir. Kullanıcı web sitenizi karanlık mod aktif bir şekilde kullanırken sayfayı yenilese veya başka bir sayfanıza göz atsa bile karanlık modu kullanmaya devam edecektir. Ne kadar güzel değil mi?

Blogger'da gece modu aktif olmayan bir web sitesi.
Blogger'da gece modu aktif olmayan bir web sitesi.

Nasıl eklenir?

İlk önce Blogger panelinden Tema alanına girmeli, daha sonra HTML'i düzenle tuşuna tıklayarak temanızın kod editörüne giriş yapıyoruz.
Blogger'da gece modu aktif olan bir web sitesi.
Blogger'da gece modu aktif olan bir web sitesi.
Yedek almayı unutmayın.
Daha sonra, CTRL+F kombinasyonu ile </body>kodunu aratıyor ve aşağıdaki kodu bu kodun üstüne 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>

Daha sonra aşağıda bulunan kodu </head> kodunun hemen üzerine 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:&#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>

Ve işlemimiz bu kadar arkadaşlar. Tasarımı kaydettiğinizde gayet güzel çalıştığını göreceksiniz. Ancak eğer gece modunu aç/kapa tuşunun yerinden memnun değilseniz yukarıdaki kodlardan

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

bu kodu bularak ve çeşitli düzenlemeler yaparak sitenize uygun hâle getirebilirsiniz. Tüm işlemleri bitirdikten sonra temayı kaydedin ve yeni sitenize göz atın.

Eğer bu kodu sitenize eklemekte kararsız kaldıysanız BURAYA tıklayarak örnek demo sayfasına göz atabilirsiniz. Blogger'da gece modu ekleme işlemi bu kadardı arkadaşlar. Aklınıza takılan sorular olursa bir yorum uzağınızdayız. Eğer yazımızı faydalı bulduysanız arkadaşlarınız ile paylaşmayı ve ufak da olsa bir yorum bırakmayı ihmal etmeyin lütfen. Keyifli çalışmalar..

Teknoloji meraklısı ve lise öğrencisi bir gencim.

Yazıyı paylaş

Benzer İçerikler × +