Blogspot'ta Gadget'ları Pasif-Aktif Yapma

Blogspot'ta Mobil Ekranda Gadget'ları Pasif/Aktif Yapan Kod

Blogspot'ta (Blogger) gadget'ların mobil ekrana geçildiğinde otomatik olarak pasif (gizli) veya

aktif (görünür) olmasını sağlamak, kullanıcı deneyimi ve sayfa hızı açısından çok önemlidir. Bunu JavaScript DOM manipülasyonu ile yapmak için aşağıdaki adımları takip edebilirsiniz:

Adım Adım Uygulama

1. Blogger yönetim panonuzdan "Tema" -> "HTML'yi Düzenle" (veya duruma göre Düzen) seçeneğine gidin.
2. Gizlemek veya göstermek istediğiniz gadget'ın HTML kodunu bulun (Örn: <b:widget id='HTML1'...>).
3. Gadget'ın ana <div> etiketinin hemen altına (veya sayfanın en altına) aşağıdaki kodu ekleyin:

JavaScript

<script>
function gizle(id) {
    document.getElementById(id).style.display = "none";
}

function goster(id) {
    document.getElementById(id).style.display = "block";
}

// Ekran genişliği 768px (mobil) veya altındaysa gadget'ı gizle
if (window.innerWidth <= 768) {
    gizle('gadget-id'); // Lütfen 'gadget-id' yazan yere kendi gadget kimliğinizi yazın
} else {
    goster('gadget-id'); 
}
</script>

Kodun İşleyişi ve Önemli Notlar

• Yukarıdaki kodda yer alan gadget-id kısmını, kendi gadget'ınızın gerçek HTML kimliği ile değiştirmeyi unutmayın (Örneğin: HTML1, Label2, PopularPosts1).
• 768 değeri, genellikle tablet ve mobil ekranların geçiş sınırıdır. Eğer sadece çok küçük telefonlarda gizlenmesini isterseniz bu değeri 480 olarak güncelleyebilirsiniz.
• Kodun düzgün çalışması için ziyaretçinin tarayıcısında JavaScript'in etkin olması gerekir.