Blogger İçin Gelişmiş Top Menu Bar: Bildirim Paneli, Gece/Gündüz Modu ve Odak, Keşfet, Büyüt...

Bu kodlar, blogunu standart bir web sitesinden çıkarıp modern bir "Web Uygulaması" (Web App) havasına sokan etkileşimli araçlardır. Temelde kullanıcı deneyimini (UX) kişiselleştirmek ve ziyaretçinin sitede daha fazla vakit geçirmesini sağlamak için tasarlanmışlardır.

1. Navigasyon Çubuğu (Üst Menü) Temel Yapısı

<header id='header-nav'> veya <head> kodlarından sonrasına aşağıdaki kodları ekleyin. Bu kısım, butonların yan yana dizildiği ana konteynırdır.

HTML (Navigasyon Butonları)

<div class='theme-switch-wrapper'>
  <!-- Bildirimler -->
  <button class='toolbar-btn notif-toggle' data-title='Bildirimleri Gör' onclick='toggleNotif()' type='button'>
    <i class='fa fa-bell-o'/>
  </button>

  <!-- Tema Değiştirme -->
  <button class='toolbar-btn' data-title='Gece/Gündüz Modu' id='themeToggleBtn' onclick='toggleMode()' type='button'>
    <i class='fa fa-adjust'/>
  </button>
  
  <!-- Rastgele Yazı -->
  <button class='toolbar-btn' data-title='Rastgele Yazı Keşfet' onclick='goToRandom()' type='button'>
    <i class='fa fa-random'/>
  </button>
  
  <!-- Font Büyütme -->
  <button class='toolbar-btn' data-title='Yazıyı Büyüt' onclick='changeFontSize(1)' type='button'>
    <i class='fa fa-plus'/>
  </button>
  
  <!-- Odak Modu -->
  <button class='toolbar-btn' data-title='Odak Modu (Sidebarları Gizle)' onclick='toggleFocus()' type='button'>
    <i class='fa fa-expand'/>
  </button>

  <!-- Bildirim Paneli (Gizli) -->
  <div id='notif-panel'>
    <div class='notif-header'><span>Bildirimler</span><i class='fa fa-cog'/></div>
    <div id='notif-content-list'><p style='padding:10px;'>Yükleniyor...</p></div>
    <div class='notif-footer'><a href='/search'>Tümünü Gör</a></div>
  </div>
</div>

2. Tasarım ve Animasyonlar (CSS)

]]></b:skin> kodunu bul ve hemen üstüne ekle.
Butonların modern görünümü, hover efektleri ve bildirim baloncuğu (Tooltip) özellikleri.

CSS (Buton ve Tooltip Tasarımı)

/* Menü Toolbar Butonları */
.theme-switch-wrapper { display: flex; align-items: center; gap: 8px; position: relative; }

.toolbar-btn { 
  background: var(--bg-body); 
  border: 1.5px solid #a55b12; 
  border-radius: 10px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 38px; 
  width: 38px; 
  color: #a55b12; 
  transition: 0.3s; 
  position: relative;
}

.toolbar-btn:hover { 
  background: #a55b12; 
  color: #fff; 
  transform: translateY(-2px); 
}

/* Tooltip (Baloncuk) Efekti */
.toolbar-btn::after {
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #a55b12;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toolbar-btn:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Bildirim Paneli (Facebook Tarzı) */
#notif-panel { 
  display: none; 
  position: absolute; 
  top: 50px; 
  right: 0; 
  width: 300px; 
  background: var(--card-bg); 
  border: 1.5px solid #a55b12; 
  border-radius: 12px; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
  z-index: 10000; 
  overflow: hidden; 
}

3. Fonksiyonellik (JavaScript)

Her butonun yaptığı işi yöneten kodlar. </body> kodunun üstüne ekle!

JS (Tüm Fonksiyonlar)

// 1. TEMA DEĞİŞTİRME (Karanlık/Aydınlık Mod)
function toggleMode() {
  document.body.classList.toggle('dark-mode');
  localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
}

// 2. BİLDİRİM PANELİNİ AÇ/KAPAT
function toggleNotif() {
  var p = document.getElementById("notif-panel");
  p.style.display = (p.style.display === "block") ? "none" : "block";
  if(p.style.display === "block") {
    // Blogger RSS feed'den son yazıları çekme
    var s = document.createElement('script');
    s.src = '/feeds/posts/default?alt=json-in-script&callback=listNotifs&max-results=5';
    document.body.appendChild(s);
  }
}

// 3. RASTGELE YAZIYA GİT
function goToRandom() {
  var s = document.createElement('script');
  s.src = '/feeds/posts/default?alt=json-in-script&callback=randGo&max-results=500';
  document.body.appendChild(s);
}
function randGo(json) {
  var entries = json.feed.entry;
  var r = Math.floor(Math.random() * entries.length);
  window.location.href = entries[r].link.find(l => l.rel === 'alternate').href;
}

// 4. ODAK MODU (Sidebarları Gizleme)
function toggleFocus() { 
  document.body.classList.toggle('focus-mode'); 
}

// 5. FONT BÜYÜTME
var fontSize = 14; 
function changeFontSize(n) { 
  fontSize += n; 
  document.body.style.fontSize = fontSize + 'px'; 
}


Bu kodlar, blogunu standart bir web sitesinden çıkarıp modern bir "Web Uygulaması" (Web App) havasına sokan etkileşimli araçlardır. Temelde kullanıcı deneyimini (UX) kişiselleştirmek ve ziyaretçinin sitede daha fazla vakit geçirmesini sağlamak için tasarlanmışlardır.

İşte her bir fonksiyonun ne işe yaradığına dair teknik açıklamalar:

1. Karanlık Mod (Dark Mode)

Ne İşe Yarar: Ziyaretçinin göz yorgunluğunu azaltmak için sitenini renk paletini tek tıkla koyu tonlara çevirir.

  • Teknik Detay: localStorage kullanır. Bu sayede kullanıcı yarın bloguna tekrar geldiğinde, site hala onun seçtiği modda (karanlık veya aydınlık) açılır.

2. Facebook Tarzı Bildirim Paneli

Ne İşe Yarar: Kullanıcı sağ üstteki zil ikonuna tıkladığında, sayfayı yenilemeden son yayınlarını bir panel içerisinde listeler.

  • Teknik Detay: Blogger Feed API’sini kullanır. JSON formatında veriyi çekip, asenkron olarak (sayfa kasmadan) içeriği yükler. Ayrıca okunan yazıları hafızada tutarak "okunmuş/okunmamış" ayrımı yapabilir.

3. Odak Modu (Focus Mode)

Ne İşe Yarar: Blogdaki gereksiz tüm kalabalığı (sağ ve sol sidebarları) tek tıkla gizler.

  • Teknik Detay: Yazıyı merkeze alır ve genişletir. Okuyucunun sadece içeriğe odaklanmasını sağlar; özellikle uzun makaleler için harika bir "okuma modu" özelliğidir.

4. Dinamik Font Büyütme

Ne İşe Yarar: Görme güçlüğü çeken veya metni daha rahat okumak isteyenler için yazı boyutunu kademeli olarak artırır.

  • Teknik Detay: CSS değişkenlerini veya doğrudan body font boyutunu JavaScript ile manipüle ederek tüm sitenin okunabilirliğini anlık olarak değiştirir.

5. Akıllı Rastgele Yazı (Discovery)

Ne İşe Yarar: Kullanıcıyı sıkıldığında veya yeni bir şeyler aradığında feed üzerindeki yüzlerce yazı arasından rastgele birine yönlendirir.

  • Teknik Detay: Mevcut yazılarınızın listesini tarayıcı arkasında tarar ve bir "rastgele sayı" algoritmasıyla seçilen URL'ye yönlendirme yapar.

Özetle Bu Kodlar Bloguna Ne Katar?

  • Profesyonellik: Ziyaretçiye "burada ciddi bir mühendislik ve emek var" mesajı verir.

  • Etkileşim: Statik bir sayfa yerine, kullanıcının kontrol edebildiği dinamik bir arayüz sunar.

  • Erişilebilirlik: Font büyütme ve gece modu gibi özelliklerle her türlü kullanıcıya hitap eder.

Blog yazında bu özellikleri "Kullanıcı Dostu Modern Arayüz Araçları" olarak pazarlayabilirsin!


gelişmiş, top, menu


Hiç yorum yok:

Yorum Gönder