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.

16 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
  5. Merhaba, bloğumdaki diğer reklamların id ini görebiliyorum. Yalnızca headerdaki reklamınki görünmüyor. Daha doğrusu ingiliz anahtarı simgesi yok. Diğer reklamlarla aynı mı oluyor? Onun id sini nasıl bulabilirim? Sizi tekrar rahatsız etmemek adına diğer sorumu da ekleyeyim.
    Yukarıda şöyle bir ifade geçiyor: 've bu kodun hemen üstüne yukarıda yeralan'
    derken orayı tam anlayamadım.

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, yukarıda yer alan derken yazı içerisinde yukarı kısımda şeklinde bir tanımlama yapmışım. Ama #html3 şeklinde başlayan koddan bahsediyorum.

      Header kısmındaki reklamı eklenti olarak blogunuza ekleyebilirsiniz. Muhtemelen otomatik eklenen reklamlardandır.

      Sil
    2. Öncelikle yardımlarınız için çok teşekkür ederim. Gerçekten net, faydalı bilgiler paylaşıyorsunuz. Bu sayfa Google aramalarında neden karşıma çıkmadı anlamış değilim. Sanırım doğru anahtar kelimeyle arama yapmadığım için de olabilir. Dediğiniz gibi eklenti olarak yerleştirdiğimde simge çıkıyor.html'den reklamı kaldırıp 'düzen' kısmına reklamı yerleştirsem bloğumun hızı yavaşlar mı? diğer reklamlar yavaşlattığı için daha önce Adsense yeni kodlar vermişti. Kararsız kaldığım nokta burası.

      Sil
    3. Güzel yorumlarınız için ben teşekkür ederim. Yazıyı bulmakta ben de zorlandım :) Her eklenen eklenti, her açılan div tabi hıza etki eder ama bu durum için çok da etki edeceğini sanmıyorum.

      Sil
    4. Yukarıda anlatığınız gibi yaptım ve oldu. Çok teşşekkür ederim. Yalnız bir sorunum daha var. Benim bloğumda yorumların gözükmediğini fark ettim. Bu problemi nasıl çözebilirim? Blogger ayarlar kısmında Yorum konumu: gizli olarak ayarlanmış. Onu yerleşik yaptım. Düzelmedim. Bu konuda da yardımcı olursanız çok sevinirim.

      Sil
    5. Sorunumu çözmüş bulunuyorum şu an itibariyle. Yorum paneli görünüyor.
      Sevgiler, saygılar...

      Sil
    6. Evet, mobilde de masaüstünde de görünüyor.

      Sil
  6. Faydalı bilgiler. Teşekkürler...

    YanıtlaSil

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

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.