Blogger mobil tema düzenleme | Blogger responsive tema yapımı


Blogger Masaüstü Temayı Mobil Yapma

Blogger hazır temalarındaki en büyük sorun mobil temayı düzenleyemememiz.İnternette şöyle saçma bilgiler var  "Mobile=yes yapion sonra mobil tema düzenliyorsun" Dostlar bu tür 2. kalite öneriler sadece blogunuzu kötüleştirir. Size vereceğim kodlarla beraber temamızı responsive Türkçesi ile "duyarlı" yapacağız.



Ne demek Responsive / Duyarlı?
  
  Responsive demek şu. Masaüstü temanızın ekranını büyütüp küçültünce ekranın boyutuna göre şekil alıyor. Mesela masaüstü temanıza küçük ekranlı bir telefon ile girilirse o ekran boyutuna göre şekil alıyor. Sizlere örnek bir resim ile açıklayayım.




Gördüğünüz gibi soldaki masaüstü sağdaki mobil temam. Fark ettiniz mi? fotoğraf boyutu vb. şeyleri rahatlıkla ayarlayabiliyorum peki nasıl mı? O zaman başlayalım.


Videoyu izlemenizi şiddetle tavsiye ederim çünkü  kod yerleştirmesinde hatalar yapabilirsiniz

Aşağıdaki kodları bulun.

<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

Yukarıdaki kodları , aşağıdaki kodlar ile değiştirin.

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Şimdi aşağıdaki kodları bulun ve silin. <b:template-skin> kodunda bulunuyor.

<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/> 

Alttaki kodları kopyalayın ve ]]></b:skin> kodunun üzerine yapıştırın.

.separator a{margin-left:0px!important;margin-right:0px!important;}
.post img{max-width:100%;height:auto;}

Şimdi benim gadget koyma alanım sağ tarafda.  O yüzden ben sağ tarafta olanın kodlarını paylaşıyorum. Eğer sizinki sol tarafta ya da sağ ve solda ise benim ile iletişime geçebilirsiniz ve ben size kodlarını atabilirim.

1) body {
2) min-width: $(content.width);
3) }
4) .main-inner .column-right-outer {
5) width: $(main.column.right.width);
6) margin-right: -$(main.column.right.width);
7) }

Kodlarını bulun ve sırasıyla alttaki kodlar ile değiştirin.

1) body {
2) width: 1100px;
3) margin:0 auto;
4) min-width: $(content.width);
5) }
6) .main-inner .column-right-outer {
7) width: 30%;
8) float: right;
9) margin-right: -$(main.column.right.width);
10) }

Ekledikten sonra , eklediğiniz kodların hemen altına alttaki kodları ekleyin
.main-inner .column-center-outer{
float: left;
width:65%;
}

Temanızın adı ne ise aşağıdan bulun ve temanıza ait kodları ]]></b:skin> kodunun üstüne yapıştırın.

Blogger'ın Basit teması için aşağıdaki kodlar:

@media screen and (max-width:1024px){ body{width:100%!important;padding:0;} .content-inner{overflow: hidden;} } @media screen and (max-width:768px){ .main-inner .column-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;} .footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;} .Header h1{font-size:30px;text-align:center;} .Header .description{font-size:14px;text-align:center;} } @media screen and (max-width:414px){ .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;} } @media screen and (max-width:320px){ .fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;} .fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;} .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;} }
Blogger'ın Harikalar Tic. teması için aşağıdaki kodlar:

@media screen and (max-width:1024px){ body{width:100%!important;padding:0;} .content-inner{overflow: hidden;} } @media screen and (max-width:768px){ .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;} .main-inner .column-right-inner, .main-inner .column-center-inner{padding:0} .main-inner .section {margin:0 15px} .Header h1{font-size:30px;text-align:center;} .Header .description{font-size:14px;text-align:center;} }

Blogger'ın Resim Penceresi teması için aşağıdaki kodlar:

@media screen and (max-width:1024px){ body{width:100%!important;padding:0;} .content-inner{overflow: hidden;} } @media screen and (max-width:768px){ .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;} .main-inner .column-center-inner, .main-inner .column-right-inner {padding:0} .Header h1{font-size:30px;text-align:center;} .Header .description{font-size:14px;text-align:center;} } @media screen and (max-width:320px){ .main-inner .section{margin:0 10px} .post-outer {padding:10px 10px;} }

Ancak blogunuz 1100px boyutunda yeni üst başlık vb. ortada görünecektir. Eğer aynı benim blogumdaki gibi her şeyi ekrana sığdırmak istiyorsanız, width: 1100px; kodunu bulun ve width: 1100px auto; kodu ile değiştirin.

Yorum Gönder

17 Yorumlar

  1. Hocam yazılarınız faydalı ama kaynakça ekleseniz daha iyi olur bence :)

    YanıtlaSil
    Yanıtlar
    1. Bu kodlar internetin her yerinde. Kodlar telif hakkına girmez. Ancak eğer kaynağın tamamını kopyalasaydım kaynakça yazardım. Zaten kaynakçamda başka bir yerden almıştır muhtemelen.Eklenti vb. Telifsizdir ;D

      Sil
    2. Kodlar için demedim.Sonuçta anlatım da adamdan alıntı.Aynı cümleler olmasa bile alıntı sonuçta :)

      Sil
  2. Emeğinize sağlık çok güzel ve faydalı bir paylaşım olmuş. Vaktim olduğunda dikkatlice okuyacağım yazınızı. Kod vs konusunda bilgim oldukça az. Umarım hata yapmadan düzenleme yapabilirim. Anladığım kadarıyla bu düzenlemeyi yapınca adsense reklamları için de ayrıca bir ayara gerek kalmadan onlarda mobilde görünüyor değil mi? Hayırlı günler

    YanıtlaSil
    Yanıtlar
    1. Evet adsense reklamları için ayarlamaya gerek kalmıyor. Kodları nereye yerleştireceğini bilemeyenler için ayrıntılı bir video yaptım izlemeniz size daha yardımcı olacaktır.

      Sil
    2. Merhaba, baya uzun zaman oldu yazalı ama videoyu iyice izleme fırsatını bugün bulabildim. Benim temam Harikalar Tic. teması. Bu yüzden temayı sıfırlama vs yapmadan yapabilirim değil mi responsive işlemini. Bir de videoda bir detay aklıma takıldı.

      Siz "Şimdi benim gadget koyma alanım sağ tarafda. O yüzden ben sağ tarafta olanın kodlarını paylaşıyorum" dedikten sonra aşağısında kodları ve yerine yazılacak kodları vermişsiniz. Silmemiz gereken kodların sayısı 7, yazmamız gereken kodların sayısı 10. Videoda kalan fazla 2 kodu da aşağıya kopyalıyorsunuz, burası tamam. Fakat sırası ile sil ve kopyala işlemi yaparken yazılacak kodların birini atlıyorsunuz.

      margin-right:-$(main şeklinde başlayan kodun yerine .main-inner.column- şeklinde başlayan kodun kopyalanması lazım diye anladım geliş sırasından. Fakat onu atlayıp width:30% ile başlayan kodu yapıştırdınız. Diğer kod atlanmış oldu. Şimdi yapacağım ben de videonuza bakarak ama burayı anlamadım. Ne önerirsiniz. Bilgim az, yanlış bir şey yapmak istemiyorum. Sonra düzeltmek sıkıntı oluyor bana. Cevap yazarsanız sevinirim.

      Sil
    3. Merhabalar . Arzu ederseniz temanızı not defterine kaydedebilir ya da direkt .xml dosyası olarak kaydedip “naberblogg@gmail.com” adresine yollayarak bana ulaştırabilirsiniz. Bende gerekli işlemleri yapıp size yeni temanızı gönderebilirim. Olmadı size anlatabilirim ancak karışık gelebilir. Meşgul olmadığımdan özel olarak size yardım edebilirim.
      İyi günler.

      Sil
    4. Teşekkür ederim. Videonuz gayet açıklayıcı olmuş. Kendim bi denemek istiyorum. Eğer yukarıdaki sorularıma cevap yazabilirseniz sevinirim. Aynen videodaki gibi o kodu atlamalı mıyım, atlamanın mantığı nedir? Nelere dikkat etmeli?

      Sil
    5. Yeniden merhaba, videoda kayma yapılmış olabilir. Siz kodları sırasıyla yapın. Yani atlama yapmayın. Sanırım videoyu çekerken o gözümden kaçmış. Kısacası 5.satırdaki kodu aratıp, değiştirin dediğim kısımdaki 5.satırdaki kod ile değiştirin . Geri kalanları altına ekleyin. En kısa sürede o videoyu düzelteceğim. Ancak sanki o kod olmadanda gayet çalışır gibi duruyor videoda. Yinede düzelteceğim. Dediğim gibi atlama yapmayın. İyi günler.

      Sil
    6. Kaydırma yapmamanız için numaralandırdım.

      Sil
    7. Teşekkür ederim cavaplarınız için. Biraz önce aynen dediğiniz gibi yaptım ama maalesef aynen mobilde de masaüstü görünüm var. Neden olmadı anlamadım. Temayı kaydettiğimde aşağıdaki uyarıyı verdi;

      Sayfa görünümünde geçersiz değişken bildirimi: Değişken kullanılmış ancak tanımlanmamş. Giriş: main.column.right.width

      Sil
    8. Ayrıca width: 1100px; kodunu da bulamadım yok bende.

      Sil
    9. Merhabalar, yorumlarınızı gördükten sonra bütün dikkatimi size verdim. Şu anda sizin ve diğer okurların daha iyi anlayabilmesi için detaylı bir "mobil uyumlu tema" yayını yapıyorum. Çok kısa süre içinde paylaşacağım. Bu süre zarfında eski temanızı kullanmanızı öneriyorum. En geç bugün detaylı yayını paylaşmış olacağım. Emin olun size çok yardımcı bir yayın olacak. İyi günler.

      Sil
  3. Merhaba, blogumda sağ sütunun mobilde görünmesi için mobile yes düzenlemesini yapmıştım. Bu anlattığınız responsive işlemini yapmadan önce mobile yes yaptığım yerleri kaldırmalı ve tamamen masaüstü görünümüne mi dönmeliyim?

    YanıtlaSil
    Yanıtlar
    1. Evet "mobile yes" ibarelerini kaldırmalısınız. Ancak size tavsiyem , temayı sıfırdan başlatarak yapın. Yani örneğin Harikalar Tic. temasını blogunuza uygulayın. Ardından responsive yapın. Zaten responsive yapsanız bile "özelleştir" kısmından rahatlıkla renkleri ve boyutları değiştirebiliyor olacaksınız. Kısacası internetten indirdiğiniz temalar gibi "özelleştir" kısmını düzenleyememe gibi bir sorun olmaz.

      Sil
  4. Yeni yazınızı da okudum şimdi ama zaten yaptım büyük bir dikkat ile bunları ben. Farklı bir şey göremedim yeni yazıda. Olmamasının sebebi ne olabilir bilmiyorum. İşin ilginç yanı o kadar kod sildim yazdım ama hiç bir sıkıntı olmadı. Normalde kodlarla oynamak tehlikelidir ve en ufak bir hatada görüntüde sıkıntılar olabilirken hiç bir problem yok ama mobile uygun olmadı sadece. Öngörünüz nedir? Sanki ufak bir dokunuşla düzeltilecek bir şey var gibi. Belki de sizin videoda yaptığınız gibi o atladığınız kodu yazmamak olabilir mi? O şekilde denesem mi bilemedim.

    YanıtlaSil
    Yanıtlar
    1. Merhaba, eğer ayarlardan mobilde masaüstü temasını göster seçeneğini seçmediyseniz olmaz. Eğer bunda da olmadıysa ilk başta dediğim gibi temanızı bana gmailden yollayabilirsiniz. Yardımcı olabilirim.

      Sil
Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)