Notification texts go here Contact Us Buy Now!

Blogger'a Gece Modu Eklentisi

Blogger'a Gece Modu Eklentisi
Blog Yazarı

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.

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

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

 .nightmode .header{background:#222}

.nightmode .title{color:#fff}

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

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

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.