Blogger Gece Modu Ekleme (Blogger Karanlık Mod Nasıl Eklenir?)

YazarHamdiPhone
Blogger'da Gece Modu (Karanlık Mod) Ekleme Nasıl Yapılır?

Twitter, Instagram ve gibi sosyal medya siteleri de dahil olmak üzere birçok websitesi ve mobil uygulama bir süredir karanlık mod yani gece modu özelliğini kullanıcıların seçimine sunuyor. Bu sayede de açık renkteki sayfaları sevmeyen kullanıcılar karanlık mod ile ışıktan bir nebze olsa da kurtuluyor. Peki blogger karanlık mod nasıl yapılır? Bu yazımızda blogger'da karanlık mod ekleme adımlarını paylaşacağız.

Blogger gece modu 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 kopyalayacaksı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>


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. ''Siteme karanlık mod nasıl eklerim'' sorusunun cevabını umarım sizlere en iyi şekilde anlatabilmişizdir. Şuanda kodlar kesinlikle çalışır durumdadır. 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.
Kategori

Yorum Gönder

Daha yeni Daha eski

İletişim