Blogger mobil uyumlu tema yapma

Blogger Mobil Uyumlu Tema Nasıl Yapılır? 

 Blogger'ın kendi temalarını özelleştirerek yaptığımız temalar gerçekten çok hoş görünebiliyor ancak aynı şeyi mobil görünümde diyemiyoruz maalesef. Peki internetteki harika görünen mobil uyumlu temaları nasıl yapıyorlar?


Aslında çok basit.Sadece bir dizi kod eklememiz yeterli oluyor.Tabii bilmeyene zor görünüyor ancak  adım adım yapacağımız için hiçbir şey bilmeyen birisi bile rahatlıkla kendi mobil uyumlu temasını oluşturabilir.


 Mobil uyumlu tema yapımına geçmeden önce şuan kullandığınız temayı yedeklemeniz çok önemlidir. Ayrıca sıfır bir tema ile başlamanızı tavsiye ederim. Çünkü sonradan kod eklenmiş temaların bazılarında nadirde olsa hata çıkabiliyor. Zaten mobil uyumlu yapsanız bile sonradan temanın özelleştir kısmından renkleri,genişlikleri ve yerleşimi değiştirebilirsiniz.


1) Alttaki Kodu 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'/>

2) Yukarıda bulduğunuz kodun yerine alttaki kodu yapıştırın.


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

3) Alttaki kodları bulun ve silin. Ya da buna benzer olanları. (Alttaki kodlar <b:template-skin> içinde yer alıyor. Yani <b:template-skin> kodunu aratarak alttaki kodların yerini bulabilirsiniz)


<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'/>

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

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

 Genelde gadget ekleme alanları sağ tarafta oluyor. Eğer sizin temanızın gadget ekleme kısmı da sağ tarafta ise sorun yok. Eğer her iki tarafta ya da sadece solda gadget ekleme alanınız var ise yorumlardan belirtin. Ona göre kodları size gönderebilirim. Eğer uğraşmak istemiyorsanız temanızın gadget alanını sağ taraf olarak ayarlayın.

5) <b:template-skin> Kodunda bulunan aşağıdaki kodları bulun.


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) }

 Yukarıdaki kodları sırasıyla aşağıdaki kodlar ile değiştirin. Biliyorum yukarıda değiştirilmesi gereken 7 kod aşağıda 10 kod var. Bu yüzden Sırasıyla 7 tane kodu aşağıdaki 7 kod ile değiştirin. Geriye kalan 3 kodu ise en son değiştirdiğiniz 7. kodun sonuna ekleyin.


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) }
6) Yukarıdaki kodları birbirleri ile değiştirdikten sonra eklediğiniz son kodun hemen altına aşağıdaki kodları ekleyin.


.main-inner .column-center-outer{float: left;width:65%;}

7) Hangi temayı kullanıyorsanız o temanın kodlarını kopyalayın ve ]]></b:skin> kodunun hemen üzerine yapıştırın. 

Blogger'ın basit teması için aşağıdaki kod


/*Responsive*/ @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 kod


/*Responsive*/ @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 kod


/*Responsive*/ @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;} }
 İşlemleri yaptıktan sonra temayı kaydedin ve ayarlardan mobil görünüm kısmını "hayır mobilde masaüstü temayı göster" seçeneğini seçin.

İşlemler bu kadar basitti . Umarım hayalinizdeki temayı yapabilmişsinizdir. Hala tema>özelleştir diyerek temanızdaki renkleri ve yerleşimi değiştirebilirsiniz. 

Yorum Gönder

1 Yorumlar

  1. *Hatırlatıcı Not*:Zaten mobil tema yapımı hakkında içerik paylaşmıştım ancak yapamayanlar olduğu için detaylı anlatım ile yeniden paylaştım. İyi günler.

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