Blogger eklentilerini masaüstünde gizleme

06 Mart, 2018
Eklentileri 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
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.

9 yorum:

  1. Basit bir şey aslında. Tabi bilmeyenler için iyi bir yazı olmuş.

    YanıtlaSil
    Yanıtlar
    1. İlk blogumu kurduğumda bunu bulmak için yaklaşık 1 saat uğraşmıştım :) Tabii artık baya bir şeyi öğrendim :)

      Sil
    2. Evet, basit ama bir o kadar da önemli. Teşekkür ederim.

      Sil
  2. Mobilde gizlemek ve göstermek çok basit masaüstü daha çok uğraştırıyor maalesef. Bu arada elinize sağlık.

    YanıtlaSil
  3. mobile=’no’ kodundaki tırnak hata veriyor bilginize.
    '' olunca tamam.

    YanıtlaSil
    Yanıtlar
    1. Buradan kopyalayınca öyle bir hata veriyor, haklısınız.

      Sil
  4. İnternette uzunca bir zaman mobil siteyi düzenleme şeklinde aramalar yapmıştım. Nereye baksam mobil sitede düzenleme yapılamaz yazıyordu.
    Ben bu mobil sitenin koduyla uçak yapmayacağım ki. Bana basit bir kod lazım.
    En işlevsel anlamda bir eklentiyi mobilde masaüstünde nasıl gösterip gizleyeceğimi, sadece mobilde nasıl göstereceğimi bileyim yeter. Sadece yayın sayfasında nasıl göstereceğimi bileyim yeter.

    Mobili düzenlemek siteden verim almak açısından çok önemli.
    Bir çok eklentiyi masaüstüne eklemiş, mobilde görünür yapamamıştım.

    Sitenizde yazan bilgilerle mobil görünüm mükemmel bir duruma geldi.

    Yukarıdaki kodu mobile='no' şeklinde düzenleyebilirsek daha güzel olur. mobil ile ilgili 3 kodu içeren açıklamalarını veren bir blog yazabilir misiniz? Şuan hepsi ayrı yerlerde...

    Katkılarınızdan dolayı teşekkür ederim.

    YanıtlaSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın, aksi taktirde yorumunuz silinir.
3. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2019 · Blog Tecrübem · İletişim · Yasal Uyarı