Yuppi İşte Oldu

Daha önce bu yazımda sitemin genel olarak şablonunu beğendiğimi ama yazı alanının daha geniş olmasını istediğimi söylemiştim. Geniş ekranlı pc lerde kenar boşlukları çok kalıyor ve bu da upuzun sayfalara yol açıyor. Günümüzde artık en düşük ekran çözünürlüğünün 1024*768 px olduğunu gözönüne alarak, kullandığım minima şablonunun izin verdiği 660 px kullanım alanını 980 px'e çıkardım.

Kodlardan anladığım için ne yapacağımı biliyordum ama Blogger'ın buna izin verip vermeyeceğini bilmiyordum. Önce deneme tahtası olarak açtığım gecedesign'ı değiştirdim. Bir denemede istediğim sonuca ulaştım. Çok kolay oldu. GeCe'yi değiştirmeden önce ne olur ne olmaz diye bir kopyasını aldım önce. Sonra html düzenleyi açtım ve istediğim değişiklikleri yaptım. Denemek isteyenler olabilir diye ayrıntılarıyla yazacağım. Öncelikle kaç piksel genişlik istediğinize karar vermeniz gerekir, ben 980 seçtim. Daha farklı bir değer de olabilir.

Temel olarak üç yapıya sahip olduğundan sırasıyla bunları değiştirdim. Birincisi header kısmı, banner'in ve blog adlarının yazıldığı alan. Bu kısmı kod içinde

/* Header
-----------------------------------------------

yazısından sonra bulacaksınız. İlk olarak resim alanının genişliğini 980 px'e ayarlamak için aşağıdaki kodun genişliğini 980 yazdım.

#header-wrapper {
width:980px;

Daha sonra header'ın içindeki yazı alanının genişliğini de isterseniz

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;

kodundaki 700 px'i değiştirerek belirleyebilirsiniz. Ben bu kısmı değiltirmedim çünkü bannerimde yazı gözükmüyor,sadece resim var. Böylelikle header genişliği bitmiş oluyor.

Kodun aşağılarına doğru inildikçe diğer kısım olan outer-wrapper'a geliyoruz. Bu kısım yazı yazılan ve yanda gadget'lerin olduğu bölüm. Önce aşağıdaki kodun genişliğini 980 px yaptım. Bu genişlik yazı+gadgetlerin toplam genişliği. Header ile aynı olması sayfa görünümü açısından daha uygun.

#outer-wrapper {
width:980px;

Outer-wrapper'da yazıların olduğu bölümün genişliğini değiştirmek için

#main-wrapper {
width: 730px;

kodundaki genişliği 730 yaptım. Yan taraftaki gadgetlerin olduğu bölümü ise aynen bıraktım. Onun kodu da şöyle:

#sidebar-wrapper {
width: 220px;

Burada şuna dikkat edilmeli. main ve sidebar wrapper ların toplam genişliği değiştirmeden önce 660 px idi. Main kısmı 410 ve sidebar kısmı ise 220 px yazıyordu. Toplamda 630 ediyor ve 30 px fark oluyor. Her şablonda aynı olmayabilir ama buna dikkat edilmeli ve yeni boyutlandırmada da bu fark muhafaza edilmeli. 30 px nerede diye soracak olursanız, iki kısım arasındaki boşluklarda ve yazıyı yazarken sınıra tam dayanmaması için gereken boşluklarda kullanılmış.

Ve son olarak da footer kısmının (en alttaki gadget eklenebilen bölüm) yine sayfa düzgünlüğü açısından 980 px 'e ayarlanması gerekiyor. O da bu kodda:

#footer {
width:980px;
clear:both;

Ben footer kısmını kullanmıyorum ama oraya ince bir resim çok hoş duracaktır. Bazı sitelerde var, mesela headeer gökyüzü resmi ise footer'a bir çim resmi koyuyorlar çok güzel oluyor.

Bu değişikliklerden sonra genelde ortalanmış resimler kullandığım için resimlerin yanları çok boş kaldı. Resmin görünen boyutunu da değiştirmeyi düşündüm ama değiştirmeye izin vermiyor sanırım. Hem html kodunun içinde hem de gadgetlerde bulamadım. Bu durumda resimler yazının yanında olacak ilk iki postun resimlerini koddan değiştirerek yan tarafa aldım. Diğer hepsini tektek uğraşmam gerekecek. Bu kodun ne şekilde olacağını da bir sonraki postta yazarım artık gayri bu post çok uzadı. Tabi daha bir önceki posttan devredilmiş bir yazı da var onu da unutmadım, kafamda şekillendirmekteyim. Umarım bu yazıdan faydalanan olur.

Not: Boyutları değiştirdikten sonra banneriniz küçük kalabilir, bu durumda yapılacak şey ya yeni bir resim bulmak, ya da mevcut resminizin boyutunu büyütmek. Ben öyle yaptım ama kalite biraz düştü. Genelde bir resmi ilk yaptığımda büyük boyutlu yapar, daha sonra istediğim kadr küçültürüm. Bannerimin orjinal resmi ofisteki bilgisayarımda olduğundan ve ben de izinde olduğumdan bir süre böyle idare edeceğiz artık.