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.

body {

min-width: $(content.width);

}

.main-inner .column-right-outer {

width: $(main.column.right.width);

margin-right: -$(main.column.right.width);

}

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

body {

width: 1100px;

margin:0 auto;

min-width: $(content.width);

}

.main-inner .column-right-outer {

width: 30%;

float: right;

margin-right: -$(main.column.right.width);

}

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.

5 yorum:

  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