Blogger şablon yapısı
Posted by izzet GUVENILIR | Posted in blog, Blog şablonu, BT | Posted on Pazar, Ekim 11, 2009
Bilindiği üzere Bloggerda kullanmak üzere internet üzerinde çok sayıda şablona ulaşmamız ve istediğimizi seçmemiz zor değildir. Bu sebeple onları ihtiyaç ve zevkimize uygun hale getirmek için daha derin şablon yapısı bilgisine ihtiyacımız var. Bu yazıyla başladığımız yazı dizisiyle bu gereksinimi karşılamaya çalışacağız. Bir şablonu tasarlamadan önce onun temel yapısı hakkında bilgi sahibi olmak gerekir. Herhangi bir şablonun yapısı genellikle, diğerleriyle tamamen aynı değildir. Diğer taraftan şablonun temel yapısını bilmek, elimizdeki hazır şambonlarla oynamak ve onları kolaylıkla değiştirmek imkanını verir.
b- Blogger Şablon Tasarımı
c- CSS Yapısı
Şablon yapısının bazı bölümlerini; header, footer ve kayıt (post) gibi, çoğu blogda görebiliriz. Fakat bazı bölümleri vardır ki (bunlara blok ve taşıyıcı deriz) bilgisayar ekranında görünmez ama pratik ve uygun bir çalışma şablonu oluşturmak için HTML açısından önemlidirler.
Bir şablon yapısı temel olarak aşağıdaki taşıyıcı blokları içerir;
Büyük bloktan küçüğe giderek,
1. Body: en dış blok (temelde bilgisayar ekranında kapsadığı her şey) şablon gövdesidir.
2. Outer-wrapper: bu bölüm tüm şablonumuzu kapsar (body daha çok şablonun dışıdır). Genellikle içerde daha küçük bloklar yerleştirmek için bir wrapper yapılır. En bilinen Outer-wrapper, Header, Content ve Footer olarak söylenebilir.
3. Header: Blogunuzun en önemli bölümüdür. Fakat headerın içinde Header Title, Header Description ve diğerleri (adsense banner, menu bar vs.) gibi alt bloklarınız da olacaktır. Böylece bütün alt bloklar bir büyük taşıyıcı -Header bölümündeki en büyük taşıyıcı genellikle Header-wrapper dir- içindedir.
4. Content: Content-wrapper Header'ın hemen altındadır. Temel olarak en önemli taşıyıcı bloktur ve Sidebar taşıyıcılarını (1,2 veya herhangi bir numaraya sahip) ve Main taşıyıcıyı (kayıt, yorum ve bazı reklamlar) içerir.
5. Footer: çoğu zaman şablonunun en altında yer alır. Header bölümündeki gibi Footer bölümünde bulunan diğer alt-blokları barındıran bir Footer-wrapper bulunacaktır.
6. Main: content-wrapper içinde bulunan Main bölümündeki en önemli dış taşıyıcıdır. Main-wrapper Kayıt, Yorum, Date Header ve widget (sayfa yarat elementinden gelen) bloklarını ihtiva eder.
7. Sidebar: side widget'leri (hakkımda, etiket, arşiv, metin ve reklam vb) bulundurur. Standart bir blogger şablonunda 1 sidebar (bu şekilde 2 sütunlu -main ve sidebar- yapı) vardır. Fakat kolaylıkla ilave sidebar eklemek mümkündür. Çok bilinenler 2 ya da 3 sidebar'lı şablonlardır. Bu yazı serisinin sonunda şablon yapısını daha iyi anlayacaksınız. Main bölümünün sağına soluna sidebar eklemek oldukça kolaydır.
8. Blog Kayıt: Bu blok Kayıt Başlığı, Kayıt, Kayıt Yazarı ve Etiket vs. i barındırmaktadır.
Diğer taraftan şablon yapısını görmenin başka bir yolu da hiyerarşik bakış açısından mümkün olabilir. Yapı, en büyük taşıyıcıdan başlayarak onun alt-taşıyıcısına doğru giden bir anlayışla şöyle görünür;
Body
**Outher-wrapper
****Header-wrapper
******Blog Title
******Blog Description
******Other widgets
****Content-wrapper
******Sidebar-wrapper (1,2,...)
******Main-wrapper
********Date Header
********Kayıt (Post)
**********Kayıt Başlığı (Post Title)
**********Kayıt Footer
********Yorum
********Feed Link
********Other widgets (daha çok reklam birimleri)
****Footer-wrapper
Temel şablon yapısını anlamak Blogger şablonunun kod yapısını çözmeyi kolaylaştıracaktır. Kod yapısını öğrenmek HTML veya CSS öğrenmek değildir, fakat oluşturulan taşıyıcı yapısının çok benzeyen şablon kodlarını hakkında daha fazla bilgi sahibi olmak anlamına gelir. Çok az web programlama bilgisiyle ve temel yapıyı anlayarak şablonun üzerinde değişiklikler yapabilirsiniz.
Kaynak: Our Blogger Template
b- Blogger Şablon Tasarımı
c- CSS Yapısı
Bir şablon yapısı temel olarak aşağıdaki taşıyıcı blokları içerir;
Büyük bloktan küçüğe giderek,
1. Body: en dış blok (temelde bilgisayar ekranında kapsadığı her şey) şablon gövdesidir.
2. Outer-wrapper: bu bölüm tüm şablonumuzu kapsar (body daha çok şablonun dışıdır). Genellikle içerde daha küçük bloklar yerleştirmek için bir wrapper yapılır. En bilinen Outer-wrapper, Header, Content ve Footer olarak söylenebilir.
3. Header: Blogunuzun en önemli bölümüdür. Fakat headerın içinde Header Title, Header Description ve diğerleri (adsense banner, menu bar vs.) gibi alt bloklarınız da olacaktır. Böylece bütün alt bloklar bir büyük taşıyıcı -Header bölümündeki en büyük taşıyıcı genellikle Header-wrapper dir- içindedir.
4. Content: Content-wrapper Header'ın hemen altındadır. Temel olarak en önemli taşıyıcı bloktur ve Sidebar taşıyıcılarını (1,2 veya herhangi bir numaraya sahip) ve Main taşıyıcıyı (kayıt, yorum ve bazı reklamlar) içerir.
5. Footer: çoğu zaman şablonunun en altında yer alır. Header bölümündeki gibi Footer bölümünde bulunan diğer alt-blokları barındıran bir Footer-wrapper bulunacaktır.
6. Main: content-wrapper içinde bulunan Main bölümündeki en önemli dış taşıyıcıdır. Main-wrapper Kayıt, Yorum, Date Header ve widget (sayfa yarat elementinden gelen) bloklarını ihtiva eder.
7. Sidebar: side widget'leri (hakkımda, etiket, arşiv, metin ve reklam vb) bulundurur. Standart bir blogger şablonunda 1 sidebar (bu şekilde 2 sütunlu -main ve sidebar- yapı) vardır. Fakat kolaylıkla ilave sidebar eklemek mümkündür. Çok bilinenler 2 ya da 3 sidebar'lı şablonlardır. Bu yazı serisinin sonunda şablon yapısını daha iyi anlayacaksınız. Main bölümünün sağına soluna sidebar eklemek oldukça kolaydır.
8. Blog Kayıt: Bu blok Kayıt Başlığı, Kayıt, Kayıt Yazarı ve Etiket vs. i barındırmaktadır.
Diğer taraftan şablon yapısını görmenin başka bir yolu da hiyerarşik bakış açısından mümkün olabilir. Yapı, en büyük taşıyıcıdan başlayarak onun alt-taşıyıcısına doğru giden bir anlayışla şöyle görünür;
Body
**Outher-wrapper
****Header-wrapper
******Blog Title
******Blog Description
******Other widgets
****Content-wrapper
******Sidebar-wrapper (1,2,...)
******Main-wrapper
********Date Header
********Kayıt (Post)
**********Kayıt Başlığı (Post Title)
**********Kayıt Footer
********Yorum
********Feed Link
********Other widgets (daha çok reklam birimleri)
****Footer-wrapper
******Footer metin (copyrights, vs.)
******Other widgets
Temel şablon yapısını anlamak Blogger şablonunun kod yapısını çözmeyi kolaylaştıracaktır. Kod yapısını öğrenmek HTML veya CSS öğrenmek değildir, fakat oluşturulan taşıyıcı yapısının çok benzeyen şablon kodlarını hakkında daha fazla bilgi sahibi olmak anlamına gelir. Çok az web programlama bilgisiyle ve temel yapıyı anlayarak şablonun üzerinde değişiklikler yapabilirsiniz.
Kaynak: Our Blogger Template
Bir haftadır blog yapısı için beni bilgilendirecek bi yer ararken sonunda aradığımı buldum çok tşkr.
Yazının devamı olacak, en yakın zamanda yayınlayacağım.