Blogger Mobil Düzenleme ve Widget'ları Mobilde Görünür Yapma

Blogger Mobil Tema Düzenleme - Widget'ları Mobilde Görünür Yapma
Blogger'da oluşturulmuş bir web sitesinin mobil görünümü ile masaüstü görünümü arasında farklılıklar vardır. Masaüstü blogunuz için widgetlar (gadgetlar) ekleme yoluyla oluşturmuş olduğunuz Popüler Sayfalar, Blog Arşivi, Öne Çıkan Yayın, Etiketler, Adsense Reklamı, Resim, Bağlantı Listesi vb eklentiler mobil görünümde görünmez. Mobil görünümde bu eklentilerin görünebilmesi için bir takım düzenlemeler yapmak gerekir.

Yazımda eklentilerinizin (widget-gadget) mobilde görünmeme sorununa çözüm getireceğine inandığım, Blogger Mobil Tema (Şablon) Görünüm Düzenleme, Blogger Widgetları (Eklentileri) mobilde görünür yapma, Blogger'da StatCounter mobil hit sayım problemi ve mobil görünümde görünmeyen menü başlıkları problemlerinin resimli ve adım adım çözümlerini anlatacağım.


Blogger Eklentileri (Widget - Gadget) Mobil Sayfada Nasıl Görünür Yapılır?


Burada anlatacağım bir eklentinin mobilde görünür hale getirilmesi. Bu; Popüler Sayfalar, Blog Arşivi, Öne Çıkan Yayın, Etiketler, Adsense Reklamı, Resim, Bağlantı Listesi, StatCounter veya başka herhangibir eklenti olabilir. Yapılacak olan işlem tüm eklentiler (widget) için aynıdır. Bu yüzden ayrı ayrı anlatmayacağım. Sadece bu eklentilere gerekli işlemi yaptığınız taktirde artısının ne olacağı bilgisini vereceğim. Artık bu küçük problemin basit çözümüne geçelim:

  1. Blogger menü panelinde "Şablon" a tıklayın.


  2. "HTML'yi Düzenle" ye tıklayın.


  3. Mobilde görünür olmasını istediğiniz Widget'ın adını aratın. Örnek olması açısından sitemdeki "Popüler Yayınlar" eklentisini aratacağım.


  4. "title='Popüler Yayınlar'" kodunun önüne mobile='yes' kodunu ekleyin.


  5. "Şablonu kaydet" e basın.


  6. Panelde "Şablon" a tıklayın.


  7. Mobil Önizlemenin altındaki dişli resmine tıklayın.


  8. Açılır menüde "Özel" i seçin ve "Kaydet" e basın.


Şimdi isterseniz sitemizin mobildeki yeni görünümünü test edelim. Bu işlemi masaüstü bilgisayarda yapmak istiyor ama nasıl yapıldığını bilmiyorsanız bir önceki "Blogger Mobil Görünümü Masaüstünde Test Et" başlıklı makalemize göz atabilirsiniz.

Blogger Widget'ı Sadece Mobilde Görünür Yapma

Şimdi size özel bir bilgi daha vereyim; Bir kodunuz var ve sadece mobilde görünsün istiyorsunuz. Yani masaüstü görünümde görünmesin ama mobilden girdiğimde bu widget'a eklediğim kodları göreyim diyorsanız mobile değişkenini 'only' yapmanız yeterli. mobile='only' şeklinde olacak. Nasıl yerleştirildiği vs yukarıda anlattım zaten. Böylece bu widget'ı sadece mobil görünümde göreceksiniz. Ben bu seçeneği adsense kodları için kullanıyorum, size de tavsiye ederim.

Blogger'da StatCounter mobil hit sayım problemi

StatCounter kodlarını widget yardımıyla blogunuza eklediğinizde widget, mobil görünümde aktif olmayacağından dolayı mobil hitlerin sayımını yapamayacaktır. Yukarıdaki işlemleri StatCounter kodlarını eklediğiniz widget'a uygulamanız halinde artık tüm hitleri sayar hale gelebileceksiniz.

Mobil görünümde görünmeyen menü başlıkları

Sitenizin mobil sayfasında en üstteki menü (Anasayfa) seçme bölümüne bastığınızda açılır menü boş görünüyorsa sebebi oradaki metin renginin açılır menüyle aynı renkte veya beyaz olmasıdır. Bundan dolayı da belli olmamaktadır. Panel > Şablon > Özelleştir > Gelişmiş > Sekme Metni yolunu izleyerek buradaki "Metin Rengi" ni koyu veya daha farklı bir renk seçer ve "Blog'a Uygula" ya basarsanız bu probleminizde çözülecektir.

Burada ek bir bilgi vereyim: Görünür yapmak istediğiniz Widget'ın eğer başlığı yoksa 3. maddede yapmamız gereken aramayı nasıl yaparız? Mesela "Gadget Ekle" ile eklediğimiz bir adsense reklam koduna yada statcounter koduna ait widgetlara çoğumuz başlık atamayız. Bu durumda görünür yapmak istediğimiz widget'ı bulmamız zorlaşır. Bu sıkıntıyı yaşamamak için geçici olarak görünür yapılacak widget'a bir başlık yazarak kaydedin. Yapacağınız aramayı geçici olarak atadığınız başlıkla yapın. İşlemleriniz bitince bu başlığı silersiniz. Böylece çok uğraşmadan işinizi çözmüş olursunuz.

Mobil görünümde eklentilerin görünmesinin faydaları

Günümüzde internet gezginlerinin 50% sinden fazlası sörfü akıllı cihazlardan yapıyor. Mobil görünümde eklentiler ve linkleriniz olmadığı veya menüdeki sayfa adları görünmediği zaman ziyaretçileriniz zorunlu olarak sitenizi ziyaret ettikleri sayfa dışındaki sayfalara ulaşamayacaklardır. Yukarıda yazılanlara göre gerekli düzenlemeleri yaptığınız zaman ziyaretçileriniz kolay bir şekilde sitenizde daha fazla zaman geçirebileceklerdir. Buda size daha fazla sayfa görüntüleme sayısı olarak geri dönecektir. Blogunuzda Adsense reklamları göstermeye de başladıysanız bu durum kazançlarınızın artmasına ve Sayfa TO oranınızın artışına neden olacaktır.

Yazımı yararlı bulduysanız veya eksiklikler olduğunu düşünüyorsanız yorumlarınızı beklerim...

www.acemiyazilimci.com

27 yorum:

  1. AdSense nasıl korunur yapıyoruz

    YanıtlaSil
  2. Şu bilgi nasıl işime yaradı anlatamam. Hiç bir yerde bulamamıştım. Çok teşekkür ederim :)

    YanıtlaSil
    Yanıtlar
    1. Rica ederim. Bu bilgileri unutma ihtimalimi düşünerek bana da not olması amacıyla kaleme almıştım :) İşinizi gördüğüne sevindim.

      Sil
  3. Mobil görünümde widgetlerin isimleri görünüyor ama içeriğindeki konular çıkmıyor. Onun için ne yapabiliriz ?

    YanıtlaSil
    Yanıtlar
    1. Kodlarınızı kontrol edin ve HTML/JavaScript widget'ını eklediğinizden emin olun. Problemi bire bir görmediğimden dolayı şuan için aklıma başka birşey gelmedi :)

      Sil
  4. harika bir yazı ancak yaptığımda maalesef hata mesajı aldım, birebir aynı şekilde doğru yere kopyala yapıştır yapmıştım ama kaydet'e basınca hata mesajı verdi. o haliyle kaydedip deneme yapayım dedim tabi önizlemede göremedim, izleyicileri.. Amacım mobil de görünmesini sağlamak.

    YanıtlaSil
    Yanıtlar
    1. Karşılaştığınız hatayı görebilseydim daha çok yardımcı olabilirdim. Mobile kodunun önünde ve arkasında bir boşluk bırakmayı unutmayın. "yes" değişkenini eklerken de çift değil tek tırnak olmasına dikkat edin. Yani mobile='yes' şeklinde. Hatayı birde script kodlarını widgetsız olarak şablona direk eklemeye kalktığınızda alırsınız. Mobil görünüm için kodları widget ile eklemelisiniz. Blogunuza göz attım. Arkaplan resmini kaldırırsanız ve anasayfada gösterilen yazıları "atlama aralığı ekle" ile kısaltırsanız blogunuz daha hızlı açılır. Bloggerlk yolunda başarılar dilerim. :)

      Sil
  5. blog resmim mobilde görünmüyor yapamıyorum

    YanıtlaSil
    Yanıtlar
    1. mobile='yes' kodunu "Header1" widget'ına koymayı deneyin. Kodu şablon düzenlemede "widget id='Header1'" aratarak bulabilirsiniz. Buda olmazsa Menü>Yerleşim'den Header ayarlarına bir göz atın.

      Sil
  6. Çok güzel de bir sorun var . Şablonu özel seçince mobil görünümde ana sayfa boş gözüküyor . Bu sorunu nasıl çözebilirim ?

    YanıtlaSil
    Yanıtlar
    1. Benimde başka bir blogumda başıma geldi bu durum. Muhtemelen ücretsiz bulduğunuz bir şablonu kullanıyorsunuz. Eğer boş çıkıyorsa kullandığınız şablonun mobil yani responsive şablonu yoktur. Başka bir şablon kullanmayı deneyin.

      Sil
    2. hocam peki bunun mobilde ve yalnızva ana sayfada görünmesini istersek ne yapabiliriz . mümkün mü bu ?

      Sil
    3. Bahsetiğiniz mobil ve sadece anasayfada görünme olayını yapmayı hiç denemedim ama muhtemelen mümkün. Bunun için mobile='only' kodu dışında widget'ın iç kodlarını da elden geçirmek gerekir. Aslında bu kodları ayrı bir yazıda toplayacağım ama fırsat bulamıyorum.

      İç bölümdeki (b:if cond) ile başlayan bölüm ise:

      b:if cond='data:blog.url == data:blog.homepageUrl'

      şeklinde olmalı.

      Sil
  7. Hocam peki ben özel bir tema kullanıyorum. Gagdet olarak eklemedim. Html den footer bölümünün üstüne direk kodu ekledim. Bunu sadece masaüstü sürümünde göstermek için ne yapmam gerekiyor?

    YanıtlaSil
    Yanıtlar
    1. mobile='yes' kodunu eklemediyseniz zaten sadece masaüstünde görünecektir.

      Sil
  8. Merhababalar hocam. Masaüstü temada headerın altına el ile 970*90 ebatında adsense reklamı ekledim. Mobilde enine çok uzun şekilde çıkıyor. Bu el ile eklediğim adsense kodunu nasıl gizleyebiliriz. Kodun önüne mobile='no' şeklinde yazdım ama olmadı.

    YanıtlaSil
    Yanıtlar
    1. El ile eklediğiniz kodu gizlemek zor. Belki div içine alıp, div'i komutlarla kısıtlayabilirsiniz ama uğraşıp denemek lazım. Bende bazı blogger sitelerimde 970*90 reklam kullandım ama widget'ın içine ekledim. Size de böyle yapmanızı tavsiye ederim. Reklam kodunu widget içine eklerseniz zaten mobile='yes' demediğiniz sürece görünmez.

      Sil
    2. Teşekkür ederim, ilginiz için.

      Sil
  9. Bunu arıyordum. Çok teşekkürler.

    YanıtlaSil
  10. Hocam merhaba. Öncelikle faydalı bir yazı olmuş. Ben tüm gadgetlerimi mobilde görünür yaptım ancak başlık arka plan renklerini görünür yapamadım masaüstünde güzel oldu ama mobilde sadece başlığın adı çıktı arka planı çıkmadı hocam yardım edebilir misiniz.

    YanıtlaSil
  11. Selam ama ben arka plan fotosunu değiştirdim ama mobilde çol büyük gözüküyor yardım

    YanıtlaSil
  12. Çok güzel bir paylaşım olmuş. Daha önce mobil sürümün özelde kalması gerektiğini yazan bir yere rastlamamıştım.
    Büyük bir sorunu hallettim.
    Çok teşekkür ederim.
    Jivochat uygulaması mobilde görünmüyordu buradaki bilgi işimi çözdü.
    Jivochat mobil sürümde nasıl gösterilir?
    sorusunun cevabı bu sitededir.

    Burada sadece mobilde görünen reklamları nasıl ayarlayacağız nasıl kullanacağız onun için bir blog yazarsanız sevinirim varsa da bilmiyorum.
    Bu blogda ilk okuduğum yazı.
    Bu blogu jivochat in temsilcisi tavsiye etti.
    Oradan buldum burayı.
    Siteyi inceleyeceğim.

    Bilgiler için çok teşekkür ederim.

    YanıtlaSil
  13. Bir reklam kodunun desktopta görünüp mobilde görünmemesini istiyorum.
    Bunun için ne yapabilirim.

    Teşekkürler.

    YanıtlaSil
  14. Bir kodun anasayfada görünüp diğer içerik sayfalarında görünmemesini istiyorum nasıl yapabilirim.

    Teşekkürler.

    YanıtlaSil