Acemi Yazılımcı: Blogger Mobil Düzenleme ve Widget'ları Mobilde Görünür Yapma
Acemi Yazılımcılar ve Blogcular için temel bilgi paylaşım Blog'u ...
Blogger Mobil Düzenleme ve 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:
Blogger menü panelinde "Şablon" a tıklayın.
"HTML'yi Düzenle" ye tıklayın.
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.
"title='Popüler Yayınlar'" kodunun önüne mobile='yes' kodunu ekleyin.
"Şablonu kaydet" e basın.
Panelde "Şablon" a tıklayın.
Mobil Önizlemenin altındaki dişli resmine tıklayın.
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...
Etiketler: Adsense, Blog, Blogger, blogger düzenleme, blogger mobil görünüm, mobil, statcounter, widget
Esin Kiper 10 Eylül 2016 12:47
AdSense nasıl korunur yapıyoruz
Acemi Yazılımcı 12 Eylül 2016 06:32
bi' blog 2 Kasım 2016 15:47
Şu bilgi nasıl işime yaradı anlatamam. Hiç bir yerde bulamamıştım. Çok teşekkür ederim :)
Acemi Yazılımcı 3 Kasım 2016 21:40
Rica ederim. Bu bilgileri unutma ihtimalimi düşünerek bana da not olması amacıyla kaleme almıştım :) İşinizi gördüğüne sevindim.
Ortaokul Matematik 11 Kasım 2016 11:23
Mobil görünümde widgetlerin isimleri görünüyor ama içeriğindeki konular çıkmıyor. Onun için ne yapabiliriz ?
Acemi Yazılımcı 14 Kasım 2016 22:53
Dilek Kıroğlu 14 Kasım 2016 00:58
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.
Acemi Yazılımcı 14 Kasım 2016 23:14
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. :)
yasampare 18 Aralık 2016 11:38
blog resmim mobilde görünmüyor yapamıyorum
Acemi Yazılımcı 19 Aralık 2016 19:38
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.
yasampare 20 Aralık 2016 19:47
Kompozisyon Örnekleri 19 Aralık 2016 13:35
Ç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 ?
Acemi Yazılımcı 19 Aralık 2016 19:42
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.
Kompozisyon Örnekleri 20 Aralık 2016 20:44
hocam peki bunun mobilde ve yalnızva ana sayfada görünmesini istersek ne yapabiliriz . mümkün mü bu ?
Acemi Yazılımcı 20 Aralık 2016 22:29
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:
Halit Osman Yurdakul 6 Ocak 2017 00:01
Süper heryerde bunu arıyodum.
Mobil Merkezim 23 Haziran 2017 00:50
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?
Acemi Yazılımcı 23 Haziran 2017 04:04
mobile='yes' kodunu eklemediyseniz zaten sadece masaüstünde görünecektir.
Serdar Duman 5 Aralık 2017 18:20
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ı.
Acemi Yazılımcı 5 Aralık 2017 20:32
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.
Serdar Duman 6 Aralık 2017 13:08
Teşekkür ederim, ilginiz için.
Belki olur 13 Mart 2018 01:08
Bunu arıyordum. Çok teşekkürler.
Keşfin Merkezi 31 Mayıs 2018 12:42
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.
Yusuf TOTİÇ 1 Haziran 2018 18:53
Selam ama ben arka plan fotosunu değiştirdim ama mobilde çol büyük gözüküyor yardım
Sayısal Mehmet 20 Haziran 2018 15:52
Ç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.
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ı.
Bilgiler için çok teşekkür ederim.
Sayısal Mehmet 21 Haziran 2018 00:14
Bir reklam kodunun desktopta görünüp mobilde görünmemesini istiyorum.
Bunun için ne yapabilirim.
Sayısal Mehmet 21 Haziran 2018 15:18
Bir kodun anasayfada görünüp diğer içerik sayfalarında görünmemesini istiyorum nasıl yapabilirim.
mutfakkimyası 10 Haziran 2019 23:26
Blogger HTML Kod Çevirici
Featured Snippet Nedir ve Nasıl Yapılır? Aramada Öne Çıkan Snippet Rehberi
SEO işi her geçen gün zorlaşıyor. Google Snippet yetmezmiş gibi rich snippets, rich cards, schema işaretlemeleri derken şimdi de Feature...
Wordpress Siteyi Farklı Domain'e Taşıma ve 301 Yönlendirme
Web siteleriyle uğraşan herkesin başına en az birkez de olsa siteyi farklı bir domain'e (alan adına) taşımak zorunda kalmak gibi bir ...
Excel Mükerrer Kayıtları Bulma ve Silme Nasıl Yapılır?
Excel'le çalışan herkes bir kez dahi olsa mutlaka mükerrer (yinelenen kayıtları) kayıtları bulma ihtiyacı duymuştur. Bu ihtiyaç baze...
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 w...
Blogger Sayfa Başlığı SEO Uyumlu Hale Nasıl Getirilir?
Bir sayfadaki başlıkların hiyerarşik düzenini belirleyen etiketlere "Heading" etiketi denir. Kısaca da küçük "h" harf...
Facebook Kapak Fotoğrafı Boyutu Ne Kadar?
Yeni bir Facebook Sayfası oluşturdunuz ve bir Kapak Fotoğrafı eklemeniz isteniyor. Bir kaç fotoğraf buldunuz ve eklediniz ama nedense fot...
Natro İçinde Wordpress Site Taşıma Nasıl Yapılır
Natro Hosting üzerinde bir web siteniz var ve bu siteyi taşımak istiyorsunuz ama site taşıma hakkında hiç bir bilginiz yok. Ayrıca bu ...
WordPress Siteyi Yedek Alma ve Farklı Hostinge Geri Yükleme
CPanel üzerinden Wordpress site başka bir Hostinge nasıl taşınır? Wordpress sitenin Yedek Alma ve Geri Yükleme işlemleri nasıl yapılır? S...
Blogger Mobil Görünümü Masaüstünde Test Et !
Google'ın son yıllarda mobile verdiği önemden dolayı Blogger site sahipleri mobil görünüme geçme ihtiyacı duydu. Eski blogger site s...
HTTP Durum Kodlarını Tanıyalım
Bir webmaster siteleriyle ilgilenirken birçok kez HTTP Durum Kodlarıyla karşılaşır. Bu kodları ve onlara karşı nasıl hareket edileceğini ...
iPhone 6s Görüntülendi
Apple'ın yeni telefonu ve bir önceki modelin geliştirilmiş versiyonu olacak "iPhone 6s" in ilk görüntüleri ortaya çıktı. ...
Blog Arşivi Nisan (1) Mayıs (1) Aralık (1) Mayıs (2) Şubat (1) Aralık (1) Temmuz (4) Haziran (3) Mayıs (2) Nisan (2) Mart (1) Şubat (4)
Yazılarımız günlük olarak e-mail adresinize gelsin.
301 yönlendirme açık akademi Adsense Apple Bana Özel Ramazan Blog Blogger blogger düzenleme blogger mobil görünüm cortana cpanel cpanel tam yedek geri yükleme çizgi tagem domain domain taşıma domain yönlendirme excel facebook featured snippet feedburner fotoğraf gimp gmail google google analytics hololens hosting htaccess 301 yönlendirme kodu htaccess oluşturma http http error http status codes Inkscape iPhone iPhone 6s İSMEK logo lumia masaüstü microsoft mobil natro natro hosting taşıma office ortaya karışık paint.net Photoscape program ramazan ramazan feneri resim SEO spartan statcounter teknoloji tübitak Ücretsiz Kurslar web web sitesi widget windows windows 10 wordpress wordpress config.php düzenleme wordpress site taşıma wordpress yedek alma geri yükleme xbox Yazılım
© Copyright, 2015 - 2017. Blogger tarafından desteklenmektedir.