Ana Sayfa / Blogger

Blogger Gece Modu Eklentisi

Yorum Gönder

Değerli arkadaşlar Google'un bizlere sunmuş olduğu Blogger platformu ile oluşturduğumuz Blog sayfalarına Gece Modu eklentisi ekleyebileceğinizi biliyormuydunuz. Bildiğiniz üzere günümüz teknolojilerinde oldukça fazla kullanılmaya başlanan Gece Modu özelliği Web Siteleri başta olmak üzere Mobil Uygulamalarda ve hatta Mobil Cihaz İşletim Sistemlerinde de hayatımızda yerini almaya başladı. Bu eklenti sayesinde sizde Blog sayfanıza Gece Modu eklentisini ekleyebileceksiniz. Ayrıca eklemiş olduğunuz bu eklenti çerez özelliği kullandığından kullanıcılarınız sayfayı yenilese dahi Gece Modu kapanmayacaktır.

Gece Modu Özelliği Nedir?

Gece Modu Web sitelerinin, Mobil Uygulamaların ve Mobil Cihazların ekran karatma özelliğidir. Bu özelliğin en temel amacı göz sağlığımızı korumak, bunun yanı sıra cihazın pil ömrünü uzatmak ve bulunduğumuz ortamda diğer kişilere çok fazla rahatsızlık vermemektir. Bu nedenle pek çok Web Sitelerinde bulunan bu özelliğin özellikle gece kullanıcıları için çok avantajlı olduğunu söyleyebiliriz.

Çerez Özelliği Nedir?

Bu özellik kullanıcıların tarayıcı üzerinde yapmış oldukları aramaları veya herhenagi bir değişikliği tarayıcı geçmişinde kayıt altına alınmasını sağlar.

Eklentiyi eklemek için Blogger'a giriş yapın ve ardından Tema > > HTML'yi düzenle adımlarını takip ederek Kod Editör sayfasına gidin. Ardından Gece Modu butonunun nerede gözükmesini istiyorsanız oraya aşağıdaki HTML Kodunu ekleyin.

NOT: HTML Kodunu nereye ekleyeceğiniz sizin insiyatifinize kalmış bir durum. Sayfanızın neresinde gözükmesini istiyorsanız oraya ekleyebilirsiniz.

HTML Kodu
<a class="normalmode">
	<i class="dark fa fa-sun-o"></i>Normal Mod
</a>
<a class="darkmode">
	<i class="light fa fa-moon-o"></i>Gece Modu
</a>

HTML Kodunu ekledikten sonra tekrar CTRL + F tuş kombinasyonu ile <head> tagını aratın. Bulmuş olduğunuz </head> tagının bir satır üzerine aşağıdaki CSS Kodunu ekleyin.

CSS Kodu
<style>
body.dark {
    background: #212121 !important;
    color: #f9f9f9;
}

body.dark .header {
    background: #424242
}

body.dark a,
body.dark h1,
body.dark h2,
body.dark h3 {
    color: #f9f9f9;
}

body.dark .blog {
    background: #212121 !important;
    color: #f9f9f9;
}

body.dark .blog-post__content {
    background: #424242
}

body.dark .footer {
    background: #424242
}

body.dark .footer__credit {
    background: #616161
}

body.dark .footer__text {
    color: #f9f9f9
}

body.dark #comments {
    background: #424242
}

body.dark #comments a.comment-reply {
    background: #616161;
    color: #f9f9f9;
}

body.dark ul.trail-items a {
    color: #f9f9f9
}

body.dark .blog-post__content pre {
    background: #212121;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #f9f9f9;
}

body.dark #xsidebar .widget {
    margin-bottom: 20px;
    background: #424242;
    padding: 20px;
    box-shadow: 0 10px 30px gba(0, 0, 0, .05);
}

body.dark .light,
body:not(.dark) .dark {
    display: none;
}
</style>

Son olarak CSS Kodunu ekledikten sonra CTRL + F tuş kombinasyonu ile <body> tagını aratın. Bulmuş olduğunuz </body> tagının bir satır üzerine aşağıdaki JavaScript Kodunu ekleyin.

JavaScript Kodu
<script> 
$(document).ready(function($) {
    var mode = localStorage.getItem('mode');
    if (mode) $('body').addClass(mode);
    $(".darkmode").click(function() {
        $("body").addClass("dark");
        localStorage.setItem('mode', 'dark');
    });
    $(".normalmode").click(function() {
        $("body").removeClass("dark");
        $("body").addClass("normal");
        localStorage.setItem('mode', null);
    });
}); 
</script>

~~ ÖNEMLİ BİLGİLENDİRME ~~

Gece Modu Eklenti kodları %100 çalışmaktadır. Fakat Gece Modunu Blogger sayfanıza ekledikten sonra tam anlamıyla uyumlu olmayabilir. Sayfanızla uyumlu olması için .dark classını kullanıp ardından değişmesini istediğiniz .class'ı veya #id'yi yazarak aşağıdaki örnekte gösterildiği gibi düzenlemeler yapmalısınız.

NOT: Örnekte gösterilen ikinci .class veya #id'ler her temaya göre değişkenlik gösterir. <div> tagında belirtilen .class veya #id neyse onu yazmanız gerekmektedir.

Örnek CSS Kodu
.dark .header {
    background: #424242;
    color: #fff;
}

.dark #comments {
    background: #424242;
    color: #fff;
}

Yukarıdaki adımları tamamladıktan sonra ekranın sağ üst kısmında yer alan  butonuna basarak Temayı kaydedin.

Blogger Gece Modu Eklentisi ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.

Yorum Gönder for "Blogger Gece Modu Eklentisi"