 |
| Blogger Gece Modu (Dark Mode) Nasıl Yapılır? |
YouTube, Instagram ve gibi sosyal medya siteleri de dahil olmak üzere birçok websitesi artık karanlık mod yani gece modu özelliğini kullanıcıların seçimine sunuyor. Bu sayede de beyaz sayfaları sevmeyenler karanlık mod ile ışıktan bir nebze olsa da kurtuluyor. Peki blogger karanlık mod nasıl yapılır? İşte gelin hep birlikte kodlar ile blogger gece modu özelliği nasıl yapılır onu görelim.
Blogger karanlık mod yapma işlemi aslında kod bilmeyen biri için oldukça zordur. Fakat günümüz internet çağı olmasından dolayı websiteleri üzerinden hazır kodlar ile karanlık mod özelliğini kullanıcıların seçimine sunmak kolay oluyor. Peki site karanlık mod yapmak için ne yapmanız gerekiyor..
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ı
<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>
Bakınız = Blogger'da Sabit Sayfa Oluşturma: Sayfa Nasıl Eklenir
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.
Blogger Gece Modu İçin CSS Kodları
<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.
<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>
Evet gördüğünüz üzere blogger gece modu özelliği için yapmanız gereken işlemler bu kadardır. Bu özelliği normal siteler için de kullanabilirsiniz. Site karanlık mod nasıl yapılır sorusunun cevabını umarım sizlere en iyi şekilde sunabilmişizdir. Şuanda kodlar kesinlikle çalışır durumdadır. Sadece blogger karanlık mod yapma değil dileyenler normal siteler için de bu kodları kullanarak sitelerini gece modu yapabilir. Son olarak şunu da belirtmeliyim ki sitenizin temasına göre kodları ayarlamanız gerekmektedir. Yoksa kodlar düzgün bir şekilde çalışmayacaktır.
İlgili Konular
1- Blogger Kendi Sayfa Görüntüleme İşlemlerinizi İzlemeyin!
2- Bütün Bağlantıları, Linkleri Yeni Sekmede Açma Kodu
3- İstenmeyen Zararlı Sitelerden Hit Almayı Engelleme