Blogger Şablonunu Düzenleme - 2

Yeni, yine, yeniden...

Blogger Şablonunu Düzenleme başlıklı yazımda sizlere Blogger şablonunun ana yapısını, çalışma mantığını ve bir kaç ipucunu anlatmıştım. Bu yazı ile bir çok arkadaş Blogger şablonlarının çalışma mantığını öğrenmiş oldu. Ancak sorulan sorular azalmak bir yana gittikçe artmaya başladı. Blogda sormak istemeyip e-posta ile soru soranların sayısı hiç düşmüyor :) Ama sakın alınmasınlar, bu duruma kızmıyorum; aksine sorulan her soruya elimden geldiğince cevap veriyorum.

Bu yazımda Blogger'da en çok yapılmak istenen şeyleri anlatmaya çalışacağım.

Unutmadan şu hatırlatmayı yapayım. Aslında burada anlattığım bir çok şeyin direkt olarak Blogger ile alakası yok. Sözgelimi bir sitenin genişlik ayarı ile oynamak istediğinizde hangi platformda olursanız olun aynı şeyi yaparsınız; CSS değerlerini değiştirirsiniz. Ancak şablonunuzun altyapısını bilmez, nasıl kodlandığını anlayamazsanız, bu değişiklikleri de nasıl yapacağınızı kestiremeyebilirsiniz. Ben Blogger altyapısını baz alarak devam edeceğim.

1-) Site Genişlik Ayarlarını Değiştirmek

Blogger şablonumuzu istediğimiz gibi şekillendirmek istiyorsak onun dilinden iyi anlamalıyız. Onu anlamak için de hangi dilden konuştuğunu; yani hangi değişkenler ile iletişime geçtiğini çok iyi bilmeliyiz.


Blogger şablonlarının iskeleti şu 4 ana öge üzerine kuruludur:

• Header
• Main
• Sidebar
• Footer

Bu 4 ögeyi de sarıp sarmalayan en dıştaki öge ise genellikle Content Wrapper yada Outer-Wrapper ismini alır.


Şimdi yazı alanımızın genişliğini değiştirmek istediğimizi düşünelim. Yazı alanının bulunduğu yer main etiketi ile tanımlanmış olduğundan CSS kodları arasında ilgili tanımlamayı bulalım.


Burada gördüğünüz gibi benim blogumda yuvarlak köşeler oluşturabilmek adına main-wrap1 ve main-wrap2 şeklinde iki tanımlama yapıldı. Yuvarlak köşeler oluşturmanın detayı girmeyeceğim zira bunu eburhan'ın blogunda anlatmıştım. Şimdi adım adım ilerleyelim:

1-) İlk olarak yazı alanını 100px genişleteceğinizi düşünelim. Yazı alanını yani main .Blog ögesininin genişliğini 100px arttırın.

2-) Yazı alanıyla birlikte Sayfa Ögelerinin yani widget'lerin de boyutunu 100 px arttırmalıyız. Böylece yazı altına bir Sayfa Ögesi koyduğunuzda eşit genişlikte olacaktır. Bunun için main . widget ögesinin genişliğini de 100px arttırın.

3-) Son olarak main-wrap1 ve en dıştaki ögeyi yani Outer-Wrapper ögesini de 100 px genişletmeliyiz. Böylece içinde oluşan genişliğe ayak uydurabilsin ;)

İşlem adımlarını daha iyi anlayabilmek için yukarıdaki Blogger şablonunu temsil eden resme bakmanız yeterli ;)

Gördüğünüz gibi, yapmak istediğiniz değişikliğin nereleri etkilediğini bilirseniz işiniz kolaylaşıyor. Blog şablonunuzun iskeletini anladığınızda geriye çok birşey kalmıyor.

2-) Bağlantıları (linkler) Yeni Bir Sayfada Açma

Bu işi yapmak çocuk oyuncağı olsa da şablonunu tanımayan insanlar için en zor işlerden biri halini alabiliyor. Zira sıradan bir bağlantıya target="_blank" satırını eklemek kolay olsa da blog üzerinde bulunan herhangi bir kalıcı bağlantı için bu satırı nereye ekleyeceğini bilmeyen kullanıcıların sayısı bir hayli fazla.

Şimdi blog yazarlarının sıkça kullandığı Bağlantı Listesi (Blogroll) içindeki bağlantıların yeni bir sayfada nasıl açılacağını öğrenelim.

Eğer Blogger'ın sunduğu Sayfa Ögesi olan Bağlantı Listesi ile bir liste oluşturduysanız şablon kodlarınız arasında "Linklist" şeklinde aratmanız işinizi kolaylaştıracaktır. Doğru bir arama ile aşağıdakine benzer bir kod satırı bulmalısınız.


Altını kırmızı ile çizdiğim kısmı ekleyerek Blog Listesi içinde bulunan tüm bağlantıların yeni bir sayfada açılmasını sağlayabilir, bunun gibi diğer ögeler için de aynısını yapabilirsiniz.

3-) Devamını Oku Bağlantısını Özelleştirme

Blogger üzerinde yayın yapan bir çok blog Blogger'da "Devamını Oku" Bağlantısı Yapmak yazısı ile bloglarına "devamını oku" bağlantısı eklediler. Daha sonra benim blogumda görmeleri üzerine bazı kimseler devamını oku bağlantısını nasıl özelleştirebileceğini sordu.

<b:if cond='data:blog.pageType != "item"'><br/>
<a class='fullpost-link' expr:href='data:post.url'>Yazının devamını okuyun...>></a>
</b:if>

Yukarıda gördüğünüz gibi orjinal kodda bulunan a etiketine bir sınıf atadım ve bunu CSS'te tanımladım. CSS'te tanımlama yaparken Main ögesinin tanımlamasını dikkate alarak aşağıdakine benzer bir tanımlama yapmalısınız:

#main-wrap1 a.fullpost-link {
background-color:#??????;
color:#??????;}
#main-wrap1 a.fullpost-link:hover {
background-color:#??????;
color:#??????;}

CSS tanımlaması yaparken bir çok farklı kombinasyon yapmak mümkün. Örneğin siz devamını oku kodunu bir div etiketi içine alıp, CSS'te buna bir id atarsanız CSS kodunuzu da buna göre yazarsınız. Ama bir a etiketini özelleştirirken sınıf atamak daha doğrudur.

Bitirirken...

Gördüğünüz gibi anlattığım hiç bir şey Blogger'a özgü değil. Önemli olan şablonunuzu tanımak. Bu yazı ile aklınızdaki soru işaretlerini azaltmakla birlikte yenilerinin de eklendiğinden şüphem yok. Ancak kendi başınıza uğraşıp, öğrenmek en iyisi.

Bu tür yazıların sorumluluğu da fazla oluyor. Bundan önce yazdığım benzer yazılardaki yorumları okuyabilirsiniz. Her sorulan soruya cevap yetiştirmek zaman ve sabır istiyor. Bu sebepten dolayı aklınıza gelen her soruyu sormak yerine, yazının gelişmesine olanak verecek sorular sormak daha yerinde olur.

İlgili Yazılar

• Blogger Şablonunu Düzenleme (Güncellendi)
• Blogger'da "Devamını Oku" Bağlantısı Yapmak
• Blogger'da Kod Penceresi Oluşturma

Bu yazıya 41 adet yorum yapılmış. Düşüncelerini belirtmek istiyorsan durma yorumunu paylaş!