🧩 Blogger Öğretmen Modu: Tek Tıkla Yazıları Tahtaya Uygun Hale Getirin (Kod Paketi)

Akıllı tahtalarda Blogger yazılarının küçük görünmesi öğretmenler için büyük bir sorun olabiliyor. Bu yazıda, Blogger sitenize ekleyebileceğiniz “Öğretmen Modu” özelliğini paylaşıyorum.

Bu özellik sayesinde:

Yazılar tek tıkla büyür

Kontrast artar

Satır aralıkları düzenlenir

Arka sıradan dahi rahatça okunur

Tekrar tıklayınca blog normal hâline döner

Aşağıdaki kodlar tam paket hâlindedir ve Blogger’ın tüm özel temalarıyla uyumludur.

🔧 Öğretmen Modu Kod Paketi

Bu kodları Tema → HTML Düzenle bölümünde <body> etiketinden hemen sonra eklemeniz yeterlidir.

<button id="ogretmenModuBtn" style="
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  background: #2d8cff;
  color: #fff;
  border: none;
  padding: 10px 18px;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
">
📚 Öğretmen Modu
</button>

<style>
/* ------------------------------
   NORMAL GÖRÜNÜM (Mod kapalı)
------------------------------- */
body:not(.ogretmen-modu) .post-body {
    font-size: 17px;
    line-height: 1.6;
}

/* ------------------------------
   ÖĞRETMEN MODU (Mod açık)
------------------------------- */
body.ogretmen-modu .post-body {
    font-size: 26px !important;
    line-height: 1.9 !important;
}

body.ogretmen-modu h1,
body.ogretmen-modu h2,
body.ogretmen-modu h3,
body.ogretmen-modu .post-title {
    font-size: 34px !important;
    font-weight: 700 !important;
}

body.ogretmen-modu p {
    margin-bottom: 20px !important;
}

/* Geniş, ortalanmış, derli toplu kutu */
body.ogretmen-modu .post-body,
body.ogretmen-modu .post-outer,
body.ogretmen-modu .content-area {
    max-width: 980px !important;
    margin: auto !important;
}

/* Kontrast artırma */
body.ogretmen-modu {
    background: #ffffff !important;
}
body.ogretmen-modu .post-body {
    color: #000 !important;
}
</style>

<script>
/* Öğretmen modu aç/kapat */
document.getElementById('ogretmenModuBtn').addEventListener('click', function () {
    document.body.classList.toggle('ogretmen-modu');
    this.textContent = document.body.classList.contains('ogretmen-modu')
        ? "📘 Normal Mod"
        : "📚 Öğretmen Modu";
});
</script>
📌 Nasıl Eklenir? (Kısa Anlatım)

Blogger paneline gir

Tema → HTML'yi Düzenle seç

Ctrl + F ile <body> etiketini bul

Hemen altına bu paketi yapıştır

Kaydedip sayfayı yenile

Artık sayfanızın sağ üst köşesinde Öğretmen Modu butonu gözükecek.

⚡ Neden Öğretmen Modu Kullanmalı?

Akıllı tahtalarda küçük yazı sorunu çözülür

Sınıfta ders anlatırken blog daha net görünür

Öğrenciler arkadan bile rahat okur

Blogun normal görünümü bozulmaz

Tema değiştirmeden ek özellik kazanırsınız

Teknoloji Rehberi

Menü

18 Kasım 2025 Salı

🧩 Blogger Öğretmen Modu: Tek Tıkla Yazıları Tahtaya Uygun Hale Getirin (Kod Paketi)

🧩 Blogger Öğretmen Modu: Tek Tıkla Yazıları Tahtaya Uygun Hale Getirin (Kod Paketi)

🔧 Öğretmen Modu Kod Paketi

📌 Nasıl Eklenir? (Kısa Anlatım)

⚡ Neden Öğretmen Modu Kullanmalı?

Hiç yorum yok:

Yorum Gönder

Popular Posts