Blogger eklentilerini masaüstünde gizleme

Eklentileri masaüstünde gizleme

Daha önce eklenti gizleme, gösterme konusuyla ilgili birçok içerik paylaşmıştım. Ana sayfada gösterme, yayın sayfalarında gizleme, belirli sayfada gösterme gibi. Ama geçen gün farklı bir web sayfam için şöyle bir çözüme ihtiyacım vardı, mobilde görünsün ama masaüstünde görünmesin. Peki bunu nasıl yapabilirdim? Bir eklentiyi mobilde gösterip, masaüstünde nasıl gizleyebilirdim?

Tabi bu bahsettiğim konu mobil tema olarak masaüstü görünümü tercih etme durumunda söz konusu. Örneğin mobil görünüm için Blogger'ın hazır temaları kullanılıyorsa bu çözüm söz konusu olamaz. Aslında bootstrap temalar desem daha doğru olur.

Eklentileri mobilde gizleme seçeneği bu konuya nazaran daha kolay.

mobile=’no’

Kodu bu sorun için uygulanabilecek en kolay yol. Ama masaüstünde eklenti gizleme konusunda hala bir çözüm yok. Bende CSS ile ilgili çözüm arayışına koyuldum ve daha sonra şu koda ulaştım.

#HTML3    { display:block; }
@media screen and (min-width: 500px) {
    #HTML3   { display:none; }
}

Bu kodla dilediğimiz eklentiyi, elementi masaüstünde ya da mobilde gizleme, gösterme şansımız var, özellikle bootstrap temalarda.

Bootstrap dediğimiz olay ise web sayfalarını tüm cihazlara uyumlu hale getiren framework, bir kütüphane yani. Bootstrap ile yazılan temalar sayfa genişliğine göre hareket eder. Sayfa daraldıkça ya da genişledikçe eklentiler ve boyutları belirttiğimiz kodlarla şekil alır. İşte yukarıda bahsettiğim kodda belirttiğimiz sayfa genişliğine göre eklentileri gizleme, gösterme komutu içerir.

Örneğin kodda min-width 500px, yani sayfa genişliği en az 500px ve üzeri olduğunda display none yani gizle, peki neyi? HTML3 id sine sahip olan eklentiyi komutu yer alıyor.

Dilediğimiz eklentiyi masaüstünde nasıl gizleriz?

Uygulama kısmı oldukça basit dostlarım. İlk olarak masaüstünde gizlemek, mobilde ise göstermek istediğimiz eklentinin id sini bulmamız gerekiyor.

Blogger widget id

Yukarıda yer alan görselde ki gibi eklentinin id sini buluyoruz. Daha sonra Tema ardından HTML düzenle seçenekleri ile kodların yer aldığı sayfaya ulaşarak Ctrl F yardımıyla aşağıdaki kodu bulmamız gerekiyor:

]]></b:skin>

ve bu kodun hemen üstüne yukarıda yeralan

#HTML3    { display:block; }
@media screen and (min-width: 500px) {
    #HTML3   { display:none; }
}

kodu ekliyoruz. Ve son olarak kırmızı renkle belirttiğim kısma kendi eklentimizin id sini ekleyerek kaydediyoruz. Blogumuzu kontrol edebiliriz artık.

Bu işlemin ardından en az 500px ve üzeri genişliklere sahip olan sayfalarda bu eklenti artık gözükmeyecek. Tabi bu genişliği dilediğimiz gibi düzenleyebiliriz. Konuyla ilgili sorularınız olursa yorum yaparak bildirebilirsiniz.