Mobil Uyumlu Blogger Şablon Çerçevesi Oluşturma

7/13/2016
Mobil Uyumlu Blogger Şablon Çerçevesi Oluşturma

Mobil Uyumlu Blogger Şablon Çerçevesi Oluşturma Blog ziyaretçileri tarafından kullanılan görüntü aygıtını takip eden bir blog şablonudur. Cihaz genişliğine göre boyutlanan masaüstü (dizüstü / bilgisayar), tablet, cep telefonu gibi cihazlarda farklı boyutlarda görünmektedir. Şablonu mobil uyumlu hale getirmek için temel kural yüzde (%) değerleridir.

Bir değer kural ise medya sorguları için piksel (px) değerlerinin değişken olmasıdır. Bu iki kuralın tam olarak kullanılması, yani tüm cihazlar tarafından algılanması için yazımızın en altında bulunan meta viewport etiketinin <head> ve </head> kodları arasında olması gerekmektedir.

Tüm Şablon Birimlerine Yüzdelik (%) Oran verilmeli Mi?

Tüm birimleri yüzdelik (%) oran vermeyebilirsiniz. Örneğin, content-wrapper, sidebar, main-wrapper ve sidebar-css ana birimlere yüzdelik oran vermeniz yeterli olacaktır. Kenar çubuğunda yer alan sidebar1, sidebar2 gibi birimlere 300px gibi değerlere değişkenlik özelliği vererek mobil uyumlu hale getirebilirsiniz.
Masaüstü kodlama - örnek kodlama
#sidebar-wrapper {
    float: right;
    width: 32%;
    max-width: 302px;
    margin: 0 auto;
}
Mobil uyumlu kodlama - örnek kodlama
@media only screen and (max-width: 800px)
#sidebar-wrapper {
    width: 100%;
    max-width: 100%;
}
Böylece, en küçük cihaz türüne kadar (mobil özellikli) kenar boyutu ekran boyutuna uyum sağlar.

Blog Şablonuna Mobil Uyumlu Medya Çerçeve Nasıl Eklenir?

Aşağıdaki kodlama özelliği, yani ortam sorgulamaları günümüz teknolojisine en uygun kodlama türüdür. Yukarıda örnek olarak göstermiş olduğumuz kodlar gibi blogunuzun kodlarına yüzdelik oran vererek ve bir kaç değişiklik yaparak değişkenlik özelliği kazandırabilirsiniz.
@media screen and (max-width:1216px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:1024px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:992px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:880px){
. /*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:768px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:736px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width: 667px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:600px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:568px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:480px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:414px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width: 375px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:320px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
@media screen and (max-width:240px){
/*  değişken özellikli css kodlarını buraya ekleyin */
}
Yukarıdaki kodda bulunan tüm ortam çerçeve özellikleri kullanmayabilirsiniz. Blogunuzun kod durumuna ve birimlerine göre yeterli kodlama yapmanız yeterli olacaktır.

Masaüstü Ekran Görünümü 14 İnc ve Üzeri Kullanılabilir Mi?

Genellikle blog şablon tasarımları 14 inc masaüstü ekran boyutlarına göre tasarlanır.Daha büyük masaüstü ekran boyutları için 15 inc, 17 inc ve 27 inc boyutlarına göre tasarlanır, fakat pek yaygın kullanılmamaktadır. Bu genişliği sınırlamak için aşağıdaki örnek kod kullanılır.
.outer-wrapper {width:85%;max-width:1240px}
max-width: 1240px ile masaüstü boyutlarını şablonun genişliğine göre sınırlamak için kullanılır. Bu değişken genişlik (width) blog şablonunun tüm unsurları için yukarıdaki kod örnek alınır.

Blog Şablonunun Mobil Uyumlu Olması İçin Gereken Diğer Özellikler

Yeni başlayan blog şablon tasarımcıları zor olarak görünse de uygulaması oldukça basittir. Yukarıda açıklamış olduğumuz kodların tam olarak işlevsellik kazanması için blog şablon kodlarına aşağıdaki kodları da eklemeniz gerekmektedir. Bu tür koşullara bağlı örnekler;
<b:if cond='data:blog.pageType != &quot;item&quot;'>
Ayrıca, aşağıdaki meta etiketini <head> ve </head> kodları arasına koymak gerekir.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Bu yazımız hakkında daha geniş bilgiler hazırlık aşamasında olup en kısa sürede sitemizde yayınlanacaktır. Ve ayrıca online olarak blog şablon tasarımcı programıda sitemizde sizlerin hizmetinde olacak.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

1 yorum

Program ne Zaman hazır olur

Cevap