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

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

Bknz: Blogger Mobil Uyumlu Youtube Video Iframe Eklenlentisi

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.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

2 yorum

Program ne Zaman hazır olur

Cevap

Post by T.V. Raman, Google Research Scientist
From The Everything Can Be Done In Emacs Dept...
Blogger exposes a clean API based on Atom Publishing Protocol (APP) and Google Data APIs (GData). This Emacs module leverages this functionality to enable one to blog from within the comfort of a full-featured editing environment.
Where to get it
The Emacs Blogger client is part of g-client, a suite of Emacs clients for accessing Google Services. The current distribution can be downloaded from Google Code and the source code is available via Subversion.
Installation
Unpack the tar archive and place the resulting g-client directory on your emacs load-path.
Type make to compile the code.
In your .emacs, add (load-library "g") to set it up.
Google Blogger gblogger
This client implements posting, editing and deleting of blog entries using the new Blogger API --- it replaces the now obsolete atom-blogger that implemented similar functionality using the old Blogger API. It uses value of customization option g-user-email by default; this can be overridden via option gblogger-user-email. See Blogger GData API for the underlying APIs used. For editing posts, I recommend installing nxml-mode.
Browse command gblogger-blog brings up the list of blogs owned by the currently authenticated user.
Posting command gblogger-new-entry takes a post URL and sets up a special buffer where you can compose your article. The post url is obtained from the feed of blogs above; use the post link for the blog to which you wish to post.
Browsing command gblogger-atom-display displays the atom feed for a specified blog as a browsable HTML page. In addition to reading your blog, this helps you find the edit url for individual posts.
Editing command gblogger-edit-entry takes the edit url of a previously posted entry. It retrieves the entry, and sets up a special composition buffer where you can edit the entry.
Submitting - the special composition buffer created by commands gblogger-new-entry and gblogger-edit-entry provide a special command gblogger-publish (bound to C-c C-c) that submits the entry to blogger.
Deleting Command gblogger-delete-entry deletes an entry specified by its edit url.
The emacspeak blog has further details.

Cevap