Blogger Gece Modu Eklentisi Nasıl Yapılır Blogger Night Mode Blogger Dark Mode Eklentisi Blogger Gece Modu Eklentisi Nasıl Eklenir Blogger Gece Modu
Blogger Dark Mode Eklentisi Nasıl Yapılır
Blogger Gece Modu Eklentisi veya Dark Mode Night Mode diye de tabir edilen eskiden genellikle film sitelerinde gördüğümüz ama artık bir çok blog da kullanılmaya başlanan kullananlar arasında ben dahil 😊 güzel bir eklenti. Temanızın göz alıcı açık tonlarda renkleri varsa bir nebze olsun okuyucularınızı rahatlatmak bakımından sizde bu eklentiyi blogunuza uygulayıp kullanmaya başlayabilirsiniz.
Blogger Gece Modu Eklentisi
Blogger Gece Modu Eklentisi blogunuza uygulama konusunda biraz uğraştırıcı ama çok da zor değil her temanın yapısı aynı olmadığı için siz kendi tema tasarımınıza göre kodları tek tek ekleyip düzenlemeniz gerekiyor Chrome kullanıyorsanız düzenlemek istediğiniz kısma sağ tıklayıp incele diyerek kodları görebilir ve o kodlar üzerinden yola çıkarak Blogger Gece Modu eklentisini blogunuza uygulayabilirsiniz.
Blogger Gece Modu Eklentisi Kurulumu
Blogger Gece Modu Eklentisi için gerekli kodları alt kısımda vericem aynı zamanda Blogger Dark Mode eklentisinin blogger'a nasıl uygulandığı hakkında da bir Video çekmeye çalışacağım video kısmı biraz uzun ve sıkıcı olabilir ama sizlerinde Blogger Night Mode Eklentisini blogunuza nasıl uygulayacağınız hakkında fikir edinmeniz bakımından faydalı olacaktır video uzun yada kısa olsada izlemenizi tavsiye ederim.
Dip Not: Bir Şeyler Öğrenmek İstiyorsanız Üşenmeyin Sıkılmayın... 😉
Uyarı!
Blogger Gece Modu Eklentisinin Kurulumuna başlamadan önce kodlardan falan pek fazla anlamıyorsanız mutlaka Temanızı Yedekleyin bir yanlışlık sonucu Temanızda bozulma olursa yeniden geri yükleyebilirsiniz.
1. ilk Önce Gece modu eklentisinin Ay ve Güneş ikonlarının görünmesi için aşağıda vermiş olduğum fontawesome linkini <head> kodunun altına yapıştırın.
<link href="https://use.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"></link>
2. Aşama yapmamız gereken root kodlarını tema isminin yada tema yapımcısının ismi açıklaması tema versiyonu vs yazdığı yerin altına bir satır boşluk bırakıp hemen altına gelecek şekilde root kodlarımızı yapıştırıyoruz alt kısımda örnek gösterdiğim gibi.
Örnek root kodları
<b:skin><![CDATA[/*
-----------------------------------------------------------------------------
Template Name: MagOne
Template URI: https://sneeit.com/magone-multi-purpose-blogger-magazine-template/
Author: Tien Nguyen
Author URI: https://sneeit.com
Description: MagOne - Responsive Newspaper and Magazine Blogger Template
Version: 6.9.58
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */
:root {
--font-color: #424242;
--bg-color: #efefef;
--bg2-color: #efefef;
--bg3-color: #ffffff;
}
[data-theme="dark"] {
--font-color: #e7e9ee;
--bg-color: #202020;
--bg2-color: #262626;
--bg3-color: #303030;
}
Root kodlarını nasıl kullanmalıyız bu kodları uyguladıktan sonra temamız renklerini bu kodlardan alacağı için her bir kodun karşılığı olmalı misal yazı renginden örnek vereyim --font-color: #424242; burada siyahken bunun karşılığı --font-color: #e7e9ee; beyazdır beyaz rengini tema gece moduna geçtiğinde kullanır siyah rengini gündüz moduna geçtiğinde kullanır aynı şekilde background kodlarıda karşılıklı olmalı misal --bg-color: #efefef; burada beyazken bunun karşılığı --bg-color: #202020; siyahtır.
Ben bunları kendimce isimlendirdim bg bg2 bg3 vs gibi ve her birinin karşılığı gece ve gündüz moduna uygun şekilde renklendirdim renkleri ve isimleri siz kendi isteğinize göre değiştirebilirsiniz daha fazla renk seçeneği ekleyebilirsiniz size kalmış. root kodlarını nasıl kullanmamız gerektiğini öğrendiğimize göre 2. aşamaya geçelim.
( Not Gündüz modunda temanızın orjinal rengi ne ise o şekilde kalması için renk ayarlarını yapın. Gece modu renkleri hazır zaten biraz açıktır veya koyudur sonuçta siyahtır )
:root {
--font-color: #424242;
--bg-color: #efefef;
--bg2-color: #efefef;
--bg3-color: #ffffff;
}
[data-theme="dark"] {
--font-color: #e7e9ee;
--bg-color: #202020;
--bg2-color: #262626;
--bg3-color: #303030;
}
Şunlarıda kısaca açıklayalım font color temanızdaki yazılarınızın rengini belirler. background ise arka plan rengini belirler
rengini değiştirmek istediğiniz kısımda hem arka plan rengini hemde yazı rengini değiştirmek isterseniz şu şekilde bir kod kullanmanız gerek.
Örnek #Header1{background-color: var(--bg3-color);color: var(--font-color);}
3. Aşama CTRL F kombinasyonu ile ]]></b:skin> kodunu aratıp bulduğunuz kodun bir satır üzerine gelecek şekilde aşağıdaki kodları kopyalayıp yapıştırın.
/*Blogger Gece Modu Blogdan-indir.blogspot.com*/
.blogger-gece-modu {position: fixed;z-index: 100;right: 1px;top: 1px;display: flex;align-items: center;flex-direction: column;}
.gece-modu {display: inline-block;height: 28px;position: relative;width: 45px;}
.gece-modu input {display:none;}
.gecemodu {background-color: #00008b;bottom: 0;cursor: pointer;left: 0;position: absolute;right: 0;top: 0;transition: .4s;}
.gecemodu:before {bottom: 2px;height: 20px;left: 2px;position: absolute;transition: .4s;width: 20px;border: solid 2px #fff;}
input:checked + .gecemodu {background-color: #1EB093;}
input:checked + .gecemodu:before {content: "\f186";font-family: "Font Awesome 5 Free";font-size: 14px;color: #fff;font-weight: 900;display: flex;transform: translateX(17px);flex-direction: row;align-items: center;justify-content: space-around;background: #00008b;}
.gecemodu.round {border-radius: 34px;}
.gecemodu.round:before {content: "\f185";font-family: "Font Awesome 5 Free";font-size: 14px;color: #fff;font-weight: 900;border-radius: 50%;display: flex;align-items: center;flex-direction: row;justify-content: space-around;background: #ffc107;}
body {
background-color: var(--bg-color);
color: var(--font-color);}
#Header1
{background-color: var(--bg3-color);
color: var(--font-color);}
#main-sidebar .widget>h2
{background-color: var(--bg3-color);
color: var(--font-color);}
.wrapper {
background-color: var(--bg2-color);
color: var(--font-color);}#Header{background-color:#fff;color:#222;} 1 ÖRNEK KOD ORJİNAL#main-sidebar .widget>h2{background-color:#222;color:#fff;} 2 ÖRNEK KOD ORJİNAL.wrapper{background-color:#fff;color:#333;} 3 ÖRNEK KOD ORJİNALAlt kısımdaki gibi kodlarımızı değiştiriyoruz.#Header {background-color: var(--bg3-color); color: var(--font-color);}#main-sidebar .widget>h2 {background-color: var(--bg3-color); color: var(--font-color);}.wrapper {background-color: var(--bg2-color); color: var(--font-color);}
4. Aşama CTRL F kombinasyonu ile </header> kodunu aratıp bulduğunuz kodun bir satır üzerine gelecek şekilde aşağıda verdiğim kodları kopyalayıp yapıştırın. header kodu yok ise </head> kodunu aratıp bulduğunuz kodun hemen altına gelecek şekilde yapıştırın.
<div class='blogger-gece-modu'><label class='gece-modu' for='checkbox'><input id='checkbox' type='checkbox'/><div class='gecemodu round' title='Gece Modu!'/></label></div>
5. Aşama CTRL F kombinasyonu ile </body> kodunu aratıp bulduğunuz kodun hemen bir satır üzerine gelecek şekilde aşağıdaki kodları kopyalayıp yapıştırın.
<script type='text/javascript'>
const toggleSwitch = document.querySelector('.gece-modu input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
else { document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>Benden bukadar Yapamadığınız bir yer olursa yorum kısmından yazabilirsiniz. Yorumlarınızı eksik etmeyin kolay gelsin arkadaşlar...
Blogger gece modu eklentisi Konu Güncellendi 01.08.2022 04:04
Güzel bir eklenti ne zamandır yapmak istiyordum çok teşekkürler
SilGüzel yorumunuz için ben teşekkür ederim.
SilEline sağlık çok açıklayıcı bir metin olmuş fakat benim yaptığım sitede gayet güzel duruyor fakat işlevini yani temanın rengini değiştirmeyi yapmıyor. Yardımcı olursanız sevinirim
SilYorumunuz için çok teşekkür ederim. Kendi kullanmış olduğum temada da son güncellemeden sonra bendede çalışmamaya başladı onun için farklı bir yöntemle şuan kullandığım gece modu eklentisini yaptım. bunuda en kısa zamanda paylaşmaya çalışırım sizin için. Blog adresinizi verirseniz yinede bir bakarım
SilKonuyu yeniden düzenleyip güncelledim şuanki çalışır vaziyette kullandığım gece modu eklentisini paylaştım bunu blogunuza uygulayabilirsiniz yapamadığınız bir yer olursa bana tekrar yazabilirsiniz.
Silbenim sitemde karanlık tema kurdum ama yazılarım ancak aydınlık temada güzel duruyor nasıl çözerim
SilBurada paylaşmış olduğum gece modunu mu uyguladınız yoksa farklı bir yerden mi yaptınız sitenizin ismi nedir
Sil