Kendi Şablonumu Kendim Yaptım (Yazı Dizisi 2)

Bu yazıda önce iki kolonlu bir şablonu değiştirip uyarlayalım. Blogger'ın "yeni şablon seç" bölümünden önce minima beyaz şablonu seçtim. Önce bu şablonun genişliğini ayarlayacağız. Yaptığımız değişikliklerin etkisini görebilmek amacıyla yazı tipi ve renklerden sadece arkaplan rengini istediğiniz bir renk yapalım.

Html'yi düzenle kısmına geldiğimizde mevcut minima şablonunun genişliği 660 piksel görünüyor. Günümüzde bilgisayar ekranlarının çözünürlükleri daha iyi olduğundan 660 piksel çok dar kalmakta. Bu yüzden kodda genişliği değiştirip istediğimiz boyuta getirmemiz gerekiyor. 15' bir laptopun ortalama genişliği 1280px dir. Ziyaretçilerin en düşük 1024 piksel genişlik kullandığını göz önüne alırsak 900 piksel bizim için uygun olabilir. Bu yüzden kodda 660px gördüğümüz her yeri 900px yazacağız. (Başka bir genişlik de yapabilirsiniz)

Önce Yerleşim panelinin altındaki html 'yi düzenleye geliyoruz ve aşağıdaki pencerede Şablonu Düzenle kısmında değişikliklerimizi yapıyoruz. Kodlar içinde gezinirken ilk karşıma çıkan 660px yazısı "/* Header" içinde buradaki 660 ı 900 yapalım. Burası bannerin olacağı alan.

#header-wrapper

{ width:900px;

margin:0 auto 10px;

border:1px solid $bordercolor; }

şeklinde olacak. Daha sonra

#outer-wrapper { width: 900px;

bölümünü 900 yapalım. Bu kısım ise şablonun orta kısmı, yazıların ve gadgetlerin olduğu bölüm. Bu kodun hemen altında #main-wrapper ve #sidebar-wrapper başlıkları var. Bunlardan main kısmı yazıların yazıldığı, sidebar ise yandaki eklemeleri yaptığımız bölüm. Değişiklik yapmadan önce birinde 410 diğerinde 220 yazıyor ve toplamı 630 ediyor. Oysa genişlik değiştirmeden önce 660 idi. 30 piksel ise bu iki kısım arasındaki boşluğa harcanmış. Eğer iki kısım aralıklı durmasını istiyorsanız bu 30 pikseli muhafaza edecek şekilde, birleşmesini istiyorsanız toplamı 900 olacak şekilde sayıları değiştirelim. Ben ikisini birleştirdim ve

#main-wrapper {
width: 680px;
background:#ffffff;

Sidebarı ise

#sidebar-wrapper {
width: 220px;
background:#ffffff;

Bir de ilave olarak arkaplan renklerini beyaz yapmak amacıyla background:#ffffff; kodunu ekledim her iki bölüme. Şimdilik beyaz olsun sonra istediğimiz renge dönüştüreceğiz. Böyle bir değişimle yazı alanında yazı ve resimlerin nasıl göründüğünü ayarlayacağız. Tabi boş bir şablonsa birkaç yazı eklemekte fayda var.

Tekrar genişliği değiştirmeye devam edersek aşağılarda footer bölümü kaldı orayı da 900 piksel yapıyorum ve genişlik değiştirme işi bitiyor.

#footer {

width:900px;

Bütün bu değişikliklerden sonra benim şablonum şu hale geldi.

Sizin de göreceğiniz gibi yazının başlığı çok kenarda gözüküyor. Bunun dışında yazı arkaplanı beyaz ve site arkaplanı ise gri (ben öyle seçtim). Şimdi sitemize makjay yapmaya başlayalım. Öncelikle şöyle renkli bir arkaplan olsun istiyorum. Arkaplanı düz bir renkte bırakabileceğimiz gibi desenli resimler de kullanabiliriz. Temel olarak üç şekilde arkaplan oluşturulabilir.

1-düz tek bir renk, bu rengı yazı tipleri ve renklerden ayarlayabileceğimiz gibi, aşağıda söyleyeceğim kısma hex kodunu da yazabilirsiniz. Bu durumda background:#(sayılar ve harflerden oluşan rengin kodu); şeklinde olacak.

2- Yandaki gibi, kendini tekrar eden küçük bir resim ile. Bu resmi arkaplana koyduğunuzda resim kendini sayfa büyüklüğü kadar tekrar edip tamamlayacak. Bu resmin boyutu çok büyük olmamalıdır ağırlaştırmaması için. Bu resmi koyduğumda ekranın tamamını dolduracak.

3-Sayfanın tamamı kadar büyük bir resim ile. Bu durumda çok dikkatli olunmalıdır. Birincisi resmin her türlü ekran boyutunda düzgün görünebilmesi için eni boyu yeterince büyük olmalı ( çünkü diyeli 19 inçlik bir bilgisayardan bakan kişi için resim eğer yeteri kadar büyük değilse kendini tekrar etmiş gözükür ve hoş bir görüntü olmaz). Bunun dışında bu büyük resmin ekranın üstüne ve ortasına sabitlenmesi gerekir ki düzgün gözükebilsin. Diğer yandan böyle büyük bir resmin boyutu da büyük olacağından yüklenmesi zaman alacaktır, dolayısıyla küçük boyutlu ama büyük bir resim olmak zorunda.

Bu üç arkaplan uygulamasını da yeri geldikçe göstereceğim. Ama ikincisi şimdilik daha popüler gözüküyor. Bu yüzden aşağıdaki böyle bir uygulama olacak.

Arkaplanlar için internette mevcut bir sürü siteden birini seçelim. Bu sitede arkaplan için kodlar veriliyor. Başka birçok site bulabilirsiniz. ( bir diğeri de burası) Birinci verdiğim linkten şu arkaplanı beğendim ve şimdi bunu uygulayacağım. Arkaplan eklemek için böyle kodu hazır veren siteler olduğu gibi, resim olarak kaydetmenizi isteyen siteler de olabilir. Size bir kod veremiyorsa o resmi bir önceki yazıda bahsetiğim imageshack'e koyup kendinize bir kod oluşturabilirsiniz. Bu site üzerinden devam edersem benim ihtiyacım olan şey bu resmin url adresi. Benim seçtiğim kodda yer alan " background: url(http://www.arka-planlar.com/ap/arka planlar 131.jpg); " adresi bana gerekli olan şey. Şimdi bu adresi şablonumuzun genişliğini değiştirdiğim kodun içerisine yazacağım. Bunu yazacağımız yer en yukarılarda "body" eklentisinin içinde

body {

background: url(http://www.arka-planlar.com/ap/arka planlar 131.jpg);

şeklinde olacak. Burada her bir koddan sonraki noktalı virgüle dikkat edelim. Şimdi şablonu kaydedip tekrar blogu görüntülediğimizde şu hale gelecek.

Şimdi bundan sonra arkaplanla uyumlu banner ve diğer tasarımları yapacağız. Onlar da bir sonraki yazıda. Şu ana kadarki değişiklikleri yaptığım blogum Gecedesign1 burada.