Arkadaşlar Xperia Z1 de denediğim bu Emulate IE7 Temaları Responsiveleştirme kodunu,sizinle paylaşmaktan gurur duyuyorum
Şimdi Bir temamız var ama telefonlarda istediğiniz ölçüyü yakalayamadığınızı mı düşünüyorsunuz?
Blogger temalarını responsive yani telefonla uyumlu moda getirmek atacağımız bir ikim adımla mümkün
1.adım
Bloggerımızın
Şablon > Html'yi düzenle > Widget şablonlarını genişlet kısmına geliğ
yandaki yazılı kodu bulmak
geri dönüş yaparsanız sevinirim. Hadi Şimdi Hepinize Kolay Gelsin :)
<meta name="viewport" content="" />
Bu meta etiketimiz sayfanın mobil uyumlu olması için mutlaka gerekli. Content kısmımız gördüğünüz gibi boş buraya gelebileceklere bakalım ve kendimize göre burayı dolduralım.
width Sayfanın ekran genişliğine göre duyarlı hale gelmesini sağlayan koddur. Ayrıca diğer kullanımı da width=device-width şeklindedir.
height Sayfanın ekran yüksekliğine göre duyarlı hale gelmesini sağlayan kodumuzdur. Çok kullanılan bir kod değildir. Bazı projelerde kullanılabilir.
initial-scale Sayfa gösterileceği zaman ölçeklendirmeye yarar. initial-scale=1.0 şeklinde bir kullanımı vardır. 1.0 değeri ölçeklendirme yapılmamasını sağlar. 0 ve 10.0 arasında bir değer verebilirsiniz.
user-scalable Ziyaretçi sayfayı görüntülediğinde zoom (çimdikleme) veya ölçekleme yapıp yapamayacağını belirleyebileceğiniz özelliktir. yes veya no değerlerini alır. user-scalable=no şeklinde kullanılmalıdır.
maximum-scale Ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom’un yani yakınlaştırma-büyültme oranını belirlemenizi sağlar. maximum-scale=1.0 şeklinde kullanılabilir.
minimum-scale Aynı maximumun gibi ama bu sefer tersi şeklinde ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom out yani uzaklaştırma-küçültme oranını belirlemenizi sağlar. minimum-scale=1.0 şeklinde bir kullanım uygundur.
Şimdiye kadar yazıklarımız mobil uyumlu hale getirmek için bir başlangıç aşamasıydı. Devamı konumuz da çözünürlüğe göre CSS kodları belirleyebileceğim @media özelliğimizden bahsedeceğim. Daha detaylı bir konu olduğundan ayrı bölümde yazmak istedim. İkinci konuya ” Siteyi CSS ile Mobil Uyumlu Responsive Yapma ” tıklayarak gidebilirsiniz.
Data:Blogger Temalarını Responsive Hale Getirme
Blogger Temalarını Mobilleştirmek için yapılması gerekenler
Blogger Temaları Nasıl Mobil ile uyumlu hale gelir
Şimdi Bir temamız var ama telefonlarda istediğiniz ölçüyü yakalayamadığınızı mı düşünüyorsunuz?
Blogger temalarını responsive yani telefonla uyumlu moda getirmek atacağımız bir ikim adımla mümkün
1.adım
Bloggerımızın
Şablon > Html'yi düzenle > Widget şablonlarını genişlet kısmına geliğ
yandaki yazılı kodu bulmak
geri dönüş yaparsanız sevinirim. Hadi Şimdi Hepinize Kolay Gelsin :)
Sayfamızı Mobil Duyarlı Hale Getirelim
Html etiketlerimizin arasına alttaki kodumuzu ekleyelim ve sayfamızı mobil duyarlı hale getirelim. <head> </head> etiketlerimizin arasına alttaki meta etiket kodumuzu çağıralım.<meta name="viewport" content="" />
Bu meta etiketimiz sayfanın mobil uyumlu olması için mutlaka gerekli. Content kısmımız gördüğünüz gibi boş buraya gelebileceklere bakalım ve kendimize göre burayı dolduralım.
width Sayfanın ekran genişliğine göre duyarlı hale gelmesini sağlayan koddur. Ayrıca diğer kullanımı da width=device-width şeklindedir.
height Sayfanın ekran yüksekliğine göre duyarlı hale gelmesini sağlayan kodumuzdur. Çok kullanılan bir kod değildir. Bazı projelerde kullanılabilir.
initial-scale Sayfa gösterileceği zaman ölçeklendirmeye yarar. initial-scale=1.0 şeklinde bir kullanımı vardır. 1.0 değeri ölçeklendirme yapılmamasını sağlar. 0 ve 10.0 arasında bir değer verebilirsiniz.
user-scalable Ziyaretçi sayfayı görüntülediğinde zoom (çimdikleme) veya ölçekleme yapıp yapamayacağını belirleyebileceğiniz özelliktir. yes veya no değerlerini alır. user-scalable=no şeklinde kullanılmalıdır.
maximum-scale Ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom’un yani yakınlaştırma-büyültme oranını belirlemenizi sağlar. maximum-scale=1.0 şeklinde kullanılabilir.
minimum-scale Aynı maximumun gibi ama bu sefer tersi şeklinde ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom out yani uzaklaştırma-küçültme oranını belirlemenizi sağlar. minimum-scale=1.0 şeklinde bir kullanım uygundur.
Şimdiye kadar yazıklarımız mobil uyumlu hale getirmek için bir başlangıç aşamasıydı. Devamı konumuz da çözünürlüğe göre CSS kodları belirleyebileceğim @media özelliğimizden bahsedeceğim. Daha detaylı bir konu olduğundan ayrı bölümde yazmak istedim. İkinci konuya ” Siteyi CSS ile Mobil Uyumlu Responsive Yapma ” tıklayarak gidebilirsiniz.
Data:Blogger Temalarını Responsive Hale Getirme
Blogger Temalarını Mobilleştirmek için yapılması gerekenler
Blogger Temaları Nasıl Mobil ile uyumlu hale gelir
Hiç yorum yok:
Yorum Gönder