.png)
Blogger'da Karanlık Gece Modu, sitenizin veya blogunuzun ziyaretçiler için daha göz dostu bir görünüm sunmasını sağlayan bir tasarım seçeneğidir. Bu mod, özellikle düşük ışıklı ortamlarda daha rahat bir okuma deneyimi sunmak için koyu arka plan renkleri ve açık yazı renkleri kullanır.
Karanlık Gece Modunun Avantajları:
- Göz Yorgunluğunu Azaltır: Gece veya karanlık ortamlarda, parlak arka plan gözleri yorabilir. Karanlık mod, bu yorgunluğu azaltır.
- Pil Tasarrufu: OLED ve AMOLED ekranlarda karanlık renkler daha az enerji tüketir, bu da mobil cihazlarda pil ömrünü uzatır.
- Modern Görünüm: Karanlık mod, birçok kullanıcı tarafından estetik bir tercih olarak görülür ve profesyonel bir hava katar.
- Daha Rahat Okuma: Düşük ışıkta göz kamaşmasını önler ve metinlerin daha kolay okunmasını sağlar.
Blogger'da Karanlık Mod Nasıl Aktif Edilir?
Blogger'da doğrudan bir "karanlık mod" seçeneği bulunmasa da, aşağıdaki yöntemlerle bu görünümü elde edebilirsiniz:
Tema Özellikleri ile:
- Blogger'ın modern temalarında (Contempo, Soho, Notable gibi) yerleşik olarak karanlık mod tasarımları bulunabilir. Tema ayarlarından koyu renk şemalarını seçebilirsiniz.
Blogger Gece Modu (Karanlık Mod) Nasıl Yapılır?
Şimdi ilk olarak yapmanız gereken /body> etiketini temanızın içerisinde aratarak bulmak olacak. Bulduğunuz zaman aşağıda vereceğimiz javascript kodunu hemen üstüne yapıştıracaksınız. Yani <body> etiketine dark adında bir class eklemiş olacağız. Bu da temanın özelleştirilmesine olanak sağlamış oluyor.Blogger Gece Modu İçin Javascript Kodları
JavaScript:
<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>Daha sonra CSS kodları ile yapılması gereken işlemler geliyor. Aşağıda belirttiğimiz CSS kodları sizlere örnek olması amacıyla sunulmuştur. Çünkü kodlar içinde yer alan etiketler tema ya da şablona göre değişiklik gösterebilmektedir. Bu değişikliğe örnek verecek olursak, .post class değil de tema içerisinde .yazi ya da .content class şeklinde kod yapısı olabilmektedir. Tabi bizim için buradaki önemli durumlardan bir tanesi de CSS düzenlemesi yaparken body.dark .post{} veya body.dark .sidebar{} şekillerinde düzenleme yapılması gerektiğidir.
CSS:
<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 elbette ki gece modu ile normal mod arasında geçiş yapılabilmesi için bir ikon ya da bir yazı oluşturmamız gerekecek. Eğer ikon eklemesi yapacaksanız fontawesome kullanmanız gerekiyor. Olur da fontawesome kullanmıyorsanız ikonlar görünmüyor.
CSS:
<a class="normalmode"><i class="dark fal fa-sun"></i>Normal Mod</a>
<a class="darkmode"><i class="light fal fa-moon"></i>Gece Modu</a>
Blogger Karanlık Gece Modu
4/
5
Oleh
WebYazilimciniz
.jpg)
.png)
.png)
.png)
.png)
.jpg)
Lütfen yorum yaparken şunlara dikkat ediniz:
Küfürlü, siyasi veya huzur bozucu yorumlar yapmamaya,
Reklam, spam gibi yorumlar yapmamaya.