Blogger Gece Modu Night Mode Dark Mode Eklentisi

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 Night Mode Dark Mode Eklentisi

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-Blogger Kontrol Paneline Girelim Tema > Özelleştir >HTML'yi düzenle seçeneğine tıklayıp Temamızın kodlarının olduğu bölüme girelim CTRL F kombinasyonu ile ]]></b:skin> kodunu aratıp bir satır üzerine gelecek şekilde aşağıdaki kodları kopyalayıp yapıştırın.

[/* dark */ .modedark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:1px;top:60px} .modedark svg{width:20px;height:20px;vertical-align:-5px;background-repeat:no-repeat!important;content:'';} .iconmode{border-radius:55px;cursor:pointer;display:block;padding:5px;background:#000;border:solid 3px #f3064c;background-position:center;transition:all .5s linear;} .iconmode:hover{border-radius:100px;} .check{display:none;} .modedark .iconmode .openmode{display:block;} .modedark .iconmode .closemode{display:none;} .modedark .check:checked ~ .iconmode .openmode{display:none;} .modedark .check:checked ~ .iconmode .closemode{display:block;} .Night{background:#000;color:#e7e9ee} .Night xxx{background:#333} .Night xxx{color:#fff}]

.Night .wrapper{background:#222} 1 ÖRNEK KOD

.Night .footer-inner{background:#222} 2 ÖRNEK KOD

.Night #main-sidebar .widget{background:#333} 3 ÖRNEK KOD

.Night xxx Bu kısımları kendi temanıza göre düzenliyeceksiniz{background:#333}

.Night xxx Bu kısımları kendi temanıza göre düzenliyeceksiniz{color:#fff}

Üst kısımda kırmızıyla belirttiğim kodları kendi temanıza göre değiştirip düzenlemeniz gerek.

2. Aşama CTRL F kombinasyonu ile </header> kodunu aratıp bulduğunuz kodun hemen üst kısmına gelecek şekilde aşağıda vermiş olduğum Blogger Gece Modu ikon kodlarını kopyalayıp yapıştırın.

[<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/><label class='iconmode' for='modedark'><svg class='openmode' fill='#fff' viewBox='0 0 24 24'><path d='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z'/></svg><svg class='closemode' fill='#ffd700' viewbox='0 0 24 24'><path d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z'/></svg></label></div>]

Alternatif Blogger Gece Modu ikon kodları isterseniz bunlarıda kullanabilirsiniz hangisini beğendiyseniz onu kullanın karar sizin.

[<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/><label class='iconmode' for='modedark'><svg class='openmode' fill='#fff' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg><svg class='closemode' fill='#ffd700' viewbox='0 0 24 24'><path d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z'/></svg></label></div>]

3. Aşama CTRL F kombinasyonu ile </body> kodunu aratıp hemen bir satır üzerine gelecek şekilde aşağıda vermiş olduğum kodları kopyalayıp yapıştırın.

[<script> //<![CDATA[ $(document).ready(function () { $("body").toggleClass(localStorage.toggled), $("#modedark").on("click", function () { "Night" != localStorage.toggled ? ($("body").toggleClass("Night", !0), localStorage.toggled = "Night", $(".section-center").css("display", "block")) : ($("body").toggleClass("Night", !1), localStorage.toggled = "", $(".section-center").css("display", "")) }), $("body").hasClass("Night") ? $("#modedark").prop("checked", !0) : $("#modedark").prop("checked", !1) }); //]]> </script>]

1. Aşamada kırmızıyla belirttiğim svg{width:20px;height:20px yazan kısımdan Blogger Gece Modu ikon boyutunu ayarlayabilirsiniz. 

Yapamadığınız bir yer olursa yorum kısmından yazabilirsiniz. Yorumlarınızı eksik etmeyin kolay gelsin arkadaşlar...