Blogger

Blogger Gece Modu Eklentisi Kurma

 
Bu yayınımızda blogger için gece modu eklentisinin nasıl kurulacağından bahsedeceğim. Aşağıdaki yönergeleri doğru yaptıktan sonra sorunsuz olarak sitenize ekleyeceksiniz.
 
Tema kodlarımızda </body> kodunu bulup ü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>

Ardından </head> kodu ü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>
İşlem bu kadar.

Son satırdaki kodu kendi temamıza göre uyarlıyoruz. Tema kodları farklılık gösterdiği için bazı yerler açıkta kalıyor ve kötü duruyor. .classbaru yerine etiket yazın ve ona göre kod yazın.

TOKUÇ

Merhabalar ben TOKUÇ 2013 yılından beri teknoloji türevi grupları üyesiyim. Teknoloji alanında paylaşımlar yapmayı ve yenilikler öğrenmeyi hedefliyorum ne kadar bilgi o kadar iyidir bu yüzden öğrendiğim ya da görmüş olduğum yararlı uygulama, web site hazırlama gibi konuları sizlerle paylaşmaya çalışıcam.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı