Blogger'da Etiketleri Genişletme ve Daraltma (+/-) Özelliği Nasıl Eklenir?

 Blogger sitelerinde zamanla biriken etiketler (kategoriler), yan menüde (sidebar) veya alt alanda çok fazla yer kaplayarak tasarımı bozabilir. Ziyaretçi deneyimini iyileştirmenin ve bu alanı daha derli toplu hale getirmenin en modern yolu, etiketleri açılır-kapanır (genişletilebilir) bir yapıya dönüştürmektir.

Aşağıdaki adımları sırasıyla uygulayarak, herhangi bir eklentiye ihtiyaç duymadan, saf CSS ve JavaScript kullanarak etiket bulutunuzu şık bir +/- mekanizmasıyla gizleyip gösterebilirsiniz.

Adım Adım Kurulum Rehberi

Adım 1: Etiket Widget'ını Hazırlama

Öncelikle Blogger panelinizde etiketler widget'ının ekli olduğundan ve listeleme biçiminin doğru ayarlandığından emin olmalısınız.

  1. Blogger panelinizden Yerleşim sekmesine gidin.

  2. Etiketler widget'ınızın yanındaki düzenle (kalem) simgesine tıklayın.

  3. Görüntüleme biçimini "Liste" olarak seçin (Bulut biçiminde bu kodlar tam performans göstermez).

  4. Değişiklikleri kaydedin.

Adım 2: Temanızın Yedeğini Alma

Kod düzenlemesi yapmadan önce her ihtimale karşı şablonunuzu yedekleyin.

  1. Tema sekmesine gelin.

  2. "Özelleştir" butonunun yanındaki aşağı ok simgesine tıklayıp Yedekle deyin.

  3. Ardından aynı menüden HTML'i Düzenle seçeneğine tıklayın.

Adım 3: CSS Tasarım Kodlarını Ekleme

Etiket listesinin görünümünü sadeleştirmek ve açılıp kapanırken göze hoş gelmesini sağlamak için CSS kodlarını ekleyeceğiz.

  1. HTML editöründe </style> veya ]]</b:skin> etiketini bulun.

  2. Aşağıdaki CSS kodlarını bulunca hemen bir satır öncesine yapıştırın:

/* Etiket Genişletme Tasarımı */
.Label ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.Label ul li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.label-toggle-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  text-align: left;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}
.label-content.collapsed {
  display: none;
}

Adım 4: İşlevsellik İçin JavaScript Kodunu Ekleme

Etiketlerin üzerine tıklanınca açılmasını ve sembolün + ile - arasında değişmesini sağlayan JavaScript kodunu ekleme aşamasıdır.

  1. HTML editörünün en altına kaydırarak </body> etiketini bulun.

  2. Aşağıdaki JavaScript kodlarını </body> etiketinin hemen üzerine ekleyin:

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  var labelWidget = document.querySelector(".Label");
  if (labelWidget) {
    var labelList = labelWidget.querySelector("ul");
    if (labelList) {
      // Listeyi kapsayıcı içine alıp gizleme sınıfı ekliyoruz
      var wrapper = document.createElement("div");
      wrapper.className = "label-content collapsed";
      labelList.parentNode.insertBefore(wrapper, labelList);
      wrapper.appendChild(labelList);
      
      // Genişletme/Daraltma Butonu Oluşturma
      var toggleBtn = document.createElement("button");
      toggleBtn.className = "label-toggle-btn";
      toggleBtn.innerHTML = "Etiketleri Göster (+)";
      labelWidget.insertBefore(toggleBtn, wrapper);
      
      // Tıklama Olayı
      toggleBtn.addEventListener("click", function() {
        if (wrapper.classList.contains("collapsed")) {
          wrapper.classList.remove("collapsed");
          toggleBtn.innerHTML = "Etiketleri Gizle (-)";
        } else {
          wrapper.classList.add("collapsed");
          toggleBtn.innerHTML = "Etiketleri Göster (+)";
        }
      });
    }
  }
});
//]]>
</script>

Adım 5: Kaydetme ve Kontrol

Kodları yerleştirdikten sonra sağ üst köşedeki Kaydet (disk) simgesine tıklayın. Blogunuzu ziyaret ederek etiketlerin varsayılan olarak kapalı geldiğini ve butona basınca açıldığını test edin.

Blogger etiket gizleme, Blogger etiketleri daraltma, Blogger widget düzenleme

Konu ile İlgili 5 Adet Başlık

  • Blogger Yan Menü Alanından Yer Tasarrufu Etme Yolları

  • Web Sitelerinde Kategorileri Akordeon Menü Yapma Rehberi

  • JavaScript ve CSS ile Blogger Widget Özelleştirme İpuçları

  • Blogger Kategori Listesini Açılır Menüye Dönüştürme

  • Kullanıcı Deneyimi İçin Blogger Arayüz Optimizasyonu

Konu ile İlgili 10 Adet Anahtar Kelime

blogger etiketleri, blogger daraltma açma, blogger css kodları, blogger widget gizleme, akordeon menü yapımı, blogger kategori listesi, blogger arayüz düzenleme, javascript etiket gizleme, blogger yan menü optimizasyonu, web tasarım ipuçları,