Dün Tarifsiz Bir Gece sitesini oluştururken istediğim 3 kolonlu bir şablon kullanmaktı. Birkaç hafta önce Delfina da bana benzer bir soru sormuştum. O zamanlar yaptığım araştırmalar sonucunda kafamda bişey oluşmuştu ama tam çözememiştim.

Temel olarak yapılan şey koda ekstra şablonun komutlarını eklemek. Bunun için internette ingilizce birsürü ders var onlara da bakabilirsiniz. Ancak bunlardan birine mesaj da atmıştım. Sidebarın yeri nasıl ayarlanıyor diye. Çünkü kodda buna dair bir bilgi yok ve ortada yazı yanlarda sidebar mı yoksa bir yanda yazı diğer yanlarda sidebarlar mı olsun bunu nasıl belirliyoruz diye. Tabi cevap vermediler ama dün akşam kafamda bir ışık yandı. Bugün dikkatlice okuyunca ve bir daha deneyince anladım ki çok basitmiş. Peh. Kodu nereye koyarsan sidebar orada oluyormuş.

Şimdi adım adım başlayalım. Daha önce var olan şu şablonu değiştireceğim.

Şablonu düzenlemek için yerleşimden html düzenleye geliyoruz ve aşağıdaki bölümü buluyoruz.

/* Outer-Wrapper--- */
#outer-wrapper { width: 900px; margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont; }

#main-wrapper {
width: 660px;
padding: 0 10px 0 10px; float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Outer wrapper'ı değiştireceğiz. Koda bakarsanız burası main wrapper (yazıların girildiği bölüm ve sidebar wrapper dan oluşuyor. Bu kodu yenileyip içerisine bir sidebar wrapper daha ekleyeceğiz adı newsidebar olsun.

#newsidebar-wrapper {
width: 133px;
margin-left: 30px;
margin-right: 15px;
float: left;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Bu kodu yukardaki bölüme ilave ediyoruz. Gördüğünüz gibi sidebar wrapper ile aynı sadece ismi değişik. Bir de margin ayarları var burda hazır girilmiş ancak bu ayarları zaten istediğimiz gibi değiştirebiliyoruz. Bu kodu buraya eklemekle bitmiyor malesef bir şey daha eklemek lazım.

Yukarıdaki kodu da aşağılarda biryerde şu ifadeyi bulduktan sonra yapıştıracağız. Kodu resim olarak koydum çünkü işleme alıyor. (Yukarıdaki ve hemen aşağıdaki kodları resim olarak koyduğum için kopyalanmayacaktır. Bunun için sizin html düzenlenin içinde zaten var olan sidebar için div id kodunu resimdeki kadar kopyalayın ve tekrar yapıştırın adını da newsidebar wrapper olarak değiştirin)

Gördüğümüz gibi bu yukarıdaki kod main wrapper'ın nasıl çalışacağını gösteren kod. Bu kodun benzeri her bir wrapper için mevcut. Biz yeni sidebar eklediğimiz için bu sidebarın id kodu da yer almalı (hemen yukardaki pembe yazılı div id=newsidebar yazan kod)

İşte bu noktada sidebarın yeri belirlenmiş oluyor. Eğer mainden önce konursa (yani yazı yazılan bölüm) yeni eklenen sidebar solda çıkacak (sol sidebar-main-sağ sidebar gibi)

Eğer mainden hemen sonra konursa main-yeni sidebar-eski sidebar şeklinde dizilecek.

Örnek olarak ben sola ekledim. Ancak resimden de görüldüğü gibi mevcut genişlik ayarları üzerine bir ilave yapıldığı için sağdaki sidebar aşağıya kaydı.

Bunu düzeltmek için toplan genişlik ile herbiri için ayrı ayrı verdiğim genişliklerin eşit olması lazım. Kendi kodlarımdan düzelteceğim.

Sidebarların ikisinin de margin lerle birlikte toplamı 380 piksel benimki. Dış genişliği 900 piksel ayarlamışım. Çıkarırsam kalan 520 pikseli main kısım için yapacağım. Onun marginleri de 10+10 imiş yani 500 piksel mainbara kalan miktar oldu.

İşte Oldu....

Sol sidebarın genişliği daha dar olduğu için, kiraz resmi küçük kaldı. Sol ile sağ tarafı aynı yapsaydım düzelecekti.

Hadi bakalım buyrun değişim başlasın.

Nihayet son ders ile şablon oluşturma işini tamamlıyoruz. Arkaplanla ilgili bir değişiklik yapacaktım ve böylece sidebar kısa kaldığı için ortaya çıkan bozuk görüntüyü düzeltebileceğiz.


Arkaplanı aldığım siteden resmin küçük kare halini kaydettim bilgisayarıma ve fotoğraf programında düzenleyip yeni bir arkaplan oluşturdum. Bu yeni arkaplanım şöyle.

Görüldüğü gibi arkasında başlangıçta seçtiğim arkaplanın resminin olduğu ortasında ise yazı alanının arkaplan renginde doldurulmuş uzun bir resim. Bu resim yine kendini enine ve boyuna sonsuza kadar tekrarlıyor. Ancak biz bunun yatay düzlemde tekrarlandığını görmüyoruz sadece düşey düzlemde tekrar ediyor. İnternetten aldığım kırmızı arkaplan resmi 199*200 piksel uzunluğundaydı. Önce resim programında 2000*200 piksel boyutlarında bir boş resim açtım. İçine kırmızı küçük resmi kopyalayıp yapıştırarak enine tekrarladım. Daha sonra da başka bir boş sayfa oluşturdum ve içini yazı alanının renginde doldurdum. Bunun genişliğini 930 piksel ayarladım (yazı alanım 900 pikseldi yanlardan da biraz gölge için taşma payı verdim). Sonra bu resmi uzun kırmızı resmin tam ortasına yapıştırıp gölgeler verip kaydettim. Daha sonra da kodda bu yeni resmi arkaplan olarak atadım. Koda top (yukarı) ve center (ortaya) komutlarını eklemeyi unutmayalım.

body { background: url(http://gece.fezaneverd.com/pic/arka1.jpg) top center;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small; font-size: /**/small;

text-align: center; }

Yeni oluşturduğum bu arkaplan resmini 2000 piksel uzunluğunda seçmemin sebebi ise şu. Google Analytic kullanıyorsanız ziyaretçilerin hangi kapasitede ekran çözünürlükleriyle size geldiğinin bilgilerine erişebilirsiniz. Çoğunluk 1024 piksel genişilik olmasına rağmen en fazla 1900 piksel genişlikteki bilgisayarlardan bloguma bakılmış. Ben de onların da düzgün görüntülemesi için 2000 yaptım. Eğer 1500 falan yapsaydım, sağ taraftan yeniden tekrarlandığını ve yarım bir arkaplan göreceklerdi.

Bu arkaplanı ekleyip bannerimde biraz düzeltmeler yaptıktan sonra şablonum tamamlandı ve

haline geldi. Şimdi sidebar ve yazı alanının tamamı aynı renkte ve yan taraflardaki gölgeler biraz derinlik kattı. Yan taraflarda gölge yerine, kurdele, noktalar, çerçeve, küçük süsler, çiçekler gibi bir sürü şey kullanılabilir. Yaratıcılığınıza kalmış.

Yapmış olduğumuz değişikliklere buradan bakabilirsiniz.

Buraya kadar öğrendiklerinizi hayal gücünüzü de kullanarak geliştirebilirsiniz. Web tasarımında işin %50 si bilgi ise %50 si de tasarıma kalmıştır. Her kişi bu kodları öğrenebilir uygulayabilir. Ancak görsel objeleri kullanma becerisi herkeste aynı değildir. Sanatsal yatkınlığa bağlı. Bu yüzden teknoloji ve yaratıcılığın kullanıldığı web tasarımı benim her zaman ilgimi çekiyor.

Bu yaptığım tasarımı üzerinde çok düşünmeden yaptığım için çok hoşuma gitmese de, elimizdeki malzemelerin her zaman uygun bir kombinasyonla güzel görünür hale getirilebileceğinin ispatıdır. Bundan sonra anlatımdan ziyade, boş zamanlarımda yaptığım şablonları yayınlayacağım ve ilave olarak yeni bilgiler varsa bundan bahsedeceğim.

Umuyorum ki bu son yazı olacak şablon düzenlemeyle ilgili. Bana mail atarak özel olarak bu konuya ilgi gösteren, anlamadıklarını soranlar oldu. Çok teşekkür ediyorum ilginiz için. Geçenlerede şablon yapımı ile başka kaynaklar olup olmadığına baktım. Elbette ki bir sürü kaynak var incelediğim kadrıyla benim yazdığım kadar açıklayıcı yazan pek yoktu (tabi gözümden kaçanlar da olabilir). Diğer yandan en basit anlatımda bile birçok yeni kavram ortaya çıkıyor hiç bilmeyenler için. Birçok kişi daha en başta "aman bunlar ne" diye korkup kaçıyor. Çaba göstermeye çekiniyor. Normal eğitim hayatından uzak kalmış, bu yüzden yeni şeyler öğrenme alışkanlığından zorunlu olarak vazgeçmiş kişiler tekrar başlangıç yapmakta zorlanıyor. Diğer yandan her türlü sorunuzu anlamadığınız yerleri sorabilirsiniz.

Buraya kadar tüm anlattığım ve anlatacaklarım illa ki hepsi birden olmak zorunda değil. İstediğiniz değişikliği tek başına yapabilirsiniz. Sadece banner yada sadece genişilik değişimi. Ya da sadece arkaplan. Size kalmış.

Bu yazıda belki de bayanların en hoşuna gidecek aşamayı yapacağız. Mevcut şablonunuza yine sadece bu eklemeleri de yapabilirsiniz.

Birinci aşamada sidebarlar için süsleme yapalım. Daha önceki yazılardan birinde sidebarların ve yazı alanların görünmez tablolar olduğunu söylemiştim. Her bir postu eklediğimiz mainbar ya da her bir gadget i eklediğimiz sidebar ayrı bir tablo içinde. Mantık olarak biz bu tabloya yine blogun tamamının arkaplanına eklediğimiz gibi bir resim ekleyeceğiz. Yani tablonun background'nu değiştireceğiz. Koyduğumuz resim küçük bir resim ise gadget'in (ya da postun) büyüklüğü kadar kendini tekrarlayacak. Ya da büyük bir resim koyup yine sabitleyebiliriz. Siteyi fazla ağırlaştırmamak adına küçük bir resim ekleyip bunun kendini tekrarlamasına izin vermeyeceğim ve bir noktaya sabitleyeceğim. Eğer yukarı sabitlersen başlık resmi, aşağı sabitlersen gadgetleri ayıran resim olarak gözükecek. Dar bir resim ise sol üstte yada diğer köşelere de sabitleyebilirim. Gördüğünüz gibi tamamen resme ve hayalgücünüze kalmış bişey.

Yeniden yaptığım şablon üzerinden devam edersem, sidebar için toplam genişliği 220 piksel ayarlamıştım. Şimdi yazımın başlığında 220 piksel genişliğinde bir süslü çerçeve şekilinde bir resim canlandırdım kafamda. Önce bu resmi fotoğraf düzenleyicilerde oluşturayım.


Temanın genel tarzına uygun olacak şekilde fonu aynı renk olan yanında bir kalp ve çerçeveli bir resim oluşturdum. Genişiliği 220 piksel ayarladım. Şimdi bu resmi koda ekleyeceğim. Kodda yer almayan background ifadesini .sidebar .widget, .main.widget { yazan yere ekleyeceğim. Kodda bu kısmı bulup içine eklediğim zaman hem sidebar da hem de main kısmının en başında resim gözüktü. Çünkü ikisi için ortak başlık atmış. Aynı resmi kullanmak isterseniz bu şekilde kalabilir. Ancak ben iki kısma farklı resimler ekleyeceğim için kodu kopyalayıp ikiye ayırdım.

.sidebar .widget {
background:url(http://gece.fezaneverd.com/pic/1.jpg) no-repeat center top;
min-height:53px;
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

Koda sidebar için arkaplanın url adresini verdim ve yanına no-repeat (tekrar etme), center (ortala) , top (yukarıda) komutlarını verdim. Bunu center-left-right (orta-sol-sağ) ile ve top-bottom (yukarı-aşağı) ile çeşitlendirebilirsiniz. Bundan başka resmin yarım yamalak kalmaması için minimum yüksekliği resmin yüksekliği olmasını söyleyen min-height:53px; ekledim.

Düzenlemelerden sonra sidebar resimleri yerini aldı. Sadece sidebar başlıklarının yerlerinin ayarlanması gerekiyor. Resmin çok üzerinde olduğundan okunması zorlaşıyor. Şimdi yukarıda yazdığım kodda görüldüğü üzere margin ve padding değerleri var. Bunlarla oynayarak yazıların yerlerini konumlandıracağım.

.sidebar .widget, {
background:url(http://gece.fezaneverd.com/pic/1.jpg) no-repeat center top;

min-height:53px;
border-bottom:1px dotted $bordercolor;
margin:10px 0 10px 0px;
padding:25px 0px 25px 10px; }

Benim resmim düzgün görünecek şekilde olması için bu değerleri girdim. Sizde kendi resminize uygun olması için deneyerek bu değerleri belirleyin. Sırasıyla yukarı-sağ-aşağı-sol yanlardan olan boşluklar bunlar.

Sidebar için düzenlediğim bu resimde kalpleri önce sola yapmıştım. Ancak yazının gözükmesi için padding değerlerini oynadığımda sadece başlığınkini değiştirme imkanı olmadığını gördüm bu alan için. Alttaki yazıların tamamı birden kayıyor ve görüntü hoş olmuyordu. Bu yüzden sağ tarafa kalpleri koyduğumda sorunsuzca ayarlayabildim.

Şimdi footer bölümüne resim ekleyelim. Kodda farklı renkle gösterdiğim ilaveleri yaptım. Yüksekliği eklemek özellikle önemli çünkü belirtmezseniz dar gözüküyor. Resmin yüksekliği kaç piksel ise bu değeri ekliyoruz.

#footer {
width:900px;
background:url(http://gece.fezaneverd.com/pic/5.jpg) no-repeat center;
height:100px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;}

Bu eklemeyi de yaptıktan sonra footer resmi eklenmiş oldu. Main bar ile arasında bir boşluk var ama bu boşluk şimdilik önemli değil. Arkaplanı değiştireceğim için bu boşluk kaybolacak. Resim olarak ben 900 piksel genişliğinde ve 100piksel yüksekliğinde bir resim hazırladım. Üzerine ismimi yazdım. Çiçekli böcekli de olabilir sizinki. Koda eklediğiniz yüksekliğin sizinkiyle tamamen aynı olduğuna dikkat edin.

Şimdi de post aralarına ve tarihin yanına koymak için resimler ayarlayalım. /* Posts başlığının altında post footer bölümüne

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
background:url(http://gece.fezaneverd.com/pic/post.jpg) no-repeat center bottom;

height:100px;

text-transform:uppercase;
letter-spacing:.1em; font: $postfooterfont;
line-height: 1.4em;}

ilavelerini yaptım. Burada yüksekliği resim yüksekliğinden daha fazla ayarlıyorum. Çünkü etiketler yazısı resmin üzerine geliyor ve iki kesişmeyecek şekilde bir değer olması lazım. Ben 100 piksele ayarladım. Tarih yanlarına da bir resim oluşturdum ve date-header bölümüne ekledim.

*/h2.date-header {
background:url(http://gece.fezaneverd.com/pic/saat.jpg) no-repeat left top;
height:50px;
padding-left: 100px;
padding-top: 20px;
margin:1.5em 0 .5em; }

Bu değişikliklerden sonra şablonumuz daha da sevimli oldu. bakmak için tıklayın.

Malesef bütün bunlar oldukça vakit aldı, arkaplanın yeniden düzenlenmesini anlatmak için vaktim kalmadı. Bir yazı daha uzayarak tema oluşturmayı tamamlayacağım. Bu derste anlatılanlar mevcut şablonuzu değiştirmeden de ilave edebileceğiniz şeyler. Umarım beğenirsiniz.

Banner düzenlemesini yaptıktan sonra main wrapper (yazıların olduğu bölüm) ve sidebar için ayarlamalar yapalım. Kullandığım renklere uyumlu olacak şekilde yazı arkaplan rengini değiştireceğim. Bannerde çoğunlukla yer alan rengin hex kodunu fotoğraf programından aldım ve ikinci yazıda background:#ffffff; yazdığım yere ekledim. Yani beyaz fonu değiştirmiş olduk.

Diğer yandan yazının başlıkları ve yazılar, alanın hemen sınırından başlamıştı. Yanlardan biraz boşluk olursa göze daha hoş görünecek ve daha okunaklı olacaktır. Kenar boşluklarını ayarlamak için kodlarda iki ifade vardır. Bunlardan birincisi margin diğeri ise padding kelimesi. İkisi de temel olarak sol-sağ yukarı-aşağı boşluklarını ayarlasa da fark hangi objenin kaydırıldığındadır. Margin kodu tabloların boşluklarını, padding ise tablo içinde yer alan objelerin (yazı+resim) kenar boşluklarını ayarlar. Her bir postun sınırlarını görmediğimiz tablolar halinde olduğunu düşünün. Bu tabloların birbirleriyle olan (ve sidebar ile olan) mesafelerini margin belirler. Kodda yer alan margin ve padding değerlerini değiştirdiğimizde şablonda bazı değişiklikler gözlenecektir.

Şimdi main-wrapper bölümüne (postların gözükeceği bölüm) şu ilaveyi yapalım. Böylece yazılar sol ve sağdan 10 piksel içerde olacak. Üst ve alt için ise sıfır dedim. Çünkü zaten kodun başka yerinde o mesafe ayarlanmış durumda.

#main-wrapper { width: 680px;
background:#CCC8B1;
padding:0 10px 0 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Bu düzenlemeden sonra yukarıdaki resimde görüldüğü gibi ( tıklayıp büyük halini görebilirsiniz) yazılar sağ ve soldan bir miktar içerde başlamakta. Ancak ilave ettiğim bu 20 piksel nedeniyle, sidebar+main alanı 900 pikseli aştı ve sidebar yan tarafa sığamayıp aşağıya kaydı.

Bu yüzden uzunluklarını yeniden ayarlamam gerekecek ancak önce sidebar için de padding ayarı yapalım, çünkü onda da yazılar çok sınırda. Sidebarı da yine sağ ve soldan 10 ar piksel içeri alabiliriz. Ya da sadece sağdan yapıp, (bu şablonda solunda mainbar olduğu için) sol tarafını sıfır bırakabiliriz. Çünkü zaten main için sağ tarafta boşluk bırakmıştık.

Ancak bana kalırsa göz yormaması göze hoş görünmesi için herbir bölümün birbirinden bağımsız olması daha iyidir. Aksi takdirde yazılar içiçe geçmiş gibi görünüyor. Hele bir de ziyaretçinin tarayıcısında (ie , firefox vs) yazı boyutu normalden büyük ise çok daha karmaşık görünecektir. Bana göre 10 piksel bile az görünüyor (ben en az 20 yapardım) ama daha başka ayarlamalar yapacağım için 10 pikselde bırakalım. Sidebar'ın da padiing ayarlarını aşağıdaki kodda olduğu gibi düzenleyelim.

#sidebar-wrapper {
width: 220px;
background:#CCC8B1;
padding:0 10px 0 10px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Sidebar içine de padding değerlerini ekledikten sonra, şablondaki değişiklikleri kaydedip görüntülerseniz, yukardaki resimde görülen kesişmenin daha da arttığını görürsünüz. Şimdi aşağıdaki sidebarı yukarı almam lazım. Bunun için eklediğim 40 pikseli bir yerlerden çıkarmam ya da genişliği arttırmam gerekir. Yine oranın bozulmaması için her bir bölümden eklediğim kadar genişliği çıkarayım.

#main-wrapper { width: 660px;
background:#CCC8B1;
padding:0 10px 0 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

#sidebar-wrapper { width: 200px;
background:#CCC8B1;
padding:0 10px 0 10px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Main-wrapper genişliğini 680 den 660 a indirdim ve sidebarı da 220 den 200 piksele indirdim. Şimdi sidebar eski yerinde.

Bu yazıda son olarak banner ile yazılar arasında, arkaplanın gözükmesine izin veren boşluğu kaldıralım. İsterseniz kaldırılmayabilir tabi. Aynı şekilde bu boşluktan sidebar ile main bar arasında da oluşturabilirsiniz. Bunu da birinci yazıda söylemiştim. Ben bannerin etrafına arkaplandaki kırmızıyla geçiş olması açısından kırmızı bir gölge oluşturmuştum. Şimdi bu boşluğu kaldırsam da kırmızı çizgi gözükecek. Aşağıdaki kodda 10piksel yazan yeri sıfır yaptım ve aralarındaki boşluk kalkmış oldu.

#header-wrapper {
width:900px;
margin:0 auto 0px;
border:0px solid $bordercolor; }

Ancak bu değişikliği yapınca gözüme hoş gözükmedi ben yine boşluğu muhafaza ettim sonradan. Bu ayarlamalar tamamen bannere, sizin seçiminize ve renklere bağlı.

Bu yazıda bitirceğimi düşünmüştüm ama daha bir miktar düzenleme var. Aslında buraya kadar, birçok bedava tema veren sitelerde sunulan örnekler seviyesinde bir şablon oluşturduk. Birçok tema hoş bir banner, geniş bir yazı alanı ve uyumlu renklerden ibaret. Ancak ben işi daha da öteye götürerek, daha da süslemeyi anlatacağım.

Geriye kalan şeyler yazı aralarına yazı başlıklarına ve sidebara resim ekleme, footer'ı düzenleme ve benim hoşuma gitmeyen arkaplanın yarım yamalak görüntüsünü düzenleme.

Genelde yazılarımız sidebarlardan daha uzundur. Yaptığım örneğe de bakarsanız, yazı arkaplanı için seçtiğim şu sarımsı yeşilimsi renk sidebar bitince bitiyor. (Aşağıdaki resimde okla belirttiğim bölge) Blog aşağı doğru uzadıkça kalınlığı değişik gözükecek. Bu yüzden arkaplanın tamamının aynı renkte görünmesi için kırmızı arkaplan desenini yeniden ayarlayacağım.

Bir sonraki yazıda görüşmek üzere.

Not: Yorumlarıyla hep yanımda olan sürekli ziyaretçilerimin bu yazı dizisinden sıkıldığı izlenimini ediniyorum. Zira birkaç yazıdır yorum sayıları azaldı. Diğer yandan blogumun ziyaretçi oranı iki katına çıktı (ki benim için oldukça yüksek bir rakam). Okuyan ve faydalanan birileri olduğu umuduyla hevesim kaçmış olsa da bu işe devam edeceğim.

Sesini çıkarmadan okuyan ve faydalanan kesim!! Yorumlarınızla bizi şenlendiriniz efendim.

Şimdi arkaplana uygun bir banner ayarlayalım bunun için kendimiz de oluşturabiliriz ya da beğendiğimiz bir resmi uyarlayabiliriz. Şimdilik deneme amaçlı şu resmi kullanacağım. Ancak resmin boyutları 600'e 450 piksel imiş. Header genişliğini 900 piksel ayarlamıştım. Bu yüzden resmin küçük kalmaması için yeniden düzenleyeceğim. İsterseniz resmi yeniden boyutlandırarark genişliğini 900'e çıkarabilirsiniz. Ancak ben bunu kullanmayacağım. Genelde yeniden boyutlandırma işini resmi daha küçültmek için kullanırız. Daha büyütmeye çalıştığımızda resmin kalitesi düşer.



Bu yüzden resmin yanlarındaki düz rengi biraz çoğaltarak, uzatacağım. Bunun için fotoğraf programında uzunluğu 900 yüksekliği ise bu resimle aynı olacak şekilde boş bir sayfa açıyorum. Resmi tam ortasına koyup, yanlarındaki boşlukları zemindeki renkle dolduruyorum. Bu işlemi kova yardımıyla yapabilirsiniz ya da düz bir bölümden bir parça kopyala yapıştır deyip beyaz zemini doldurabilirsiniz.

İşte resmin yeniden düzenlenmiş hali.

Bu resim üzerinde yapımcıya ait çeşitli yazılar var ama ben şimdilik gösterme amaçlı kullanıyorum. Daha ilerde tamamen kendim oluşturduğum bannerleri de göstereceğim.

Banneri site şablonuna eklemek için iki yöntem mevcuttur. Birincisi herkesin bildiği kontol panelinden banner ekleme, diğeri ise banneri doğrudan koda yazıp arkaplan olarak gösterme. Doğrudan koda yazılmasıyla sonradan eklenmesi arasındaki tek fark blog adının ve tanımının gözüküp gözükmemesi durumu. Mesela Anne Kaz'ın bannerinde blog adını resim üzerine yazmıştık ve kod içine banneri eklediğimde blog adı tekrar gözükmekteydi. Onun gözükmesini engelleme şansı olmuyor. Diğer yandan eğer kontrol panelinden resim ekler gibi eklerseniz isterseniz blog adının yerine seçeneğini işaretleyerek onun gözükmesine engel oluyorsunuz.

Şimdi yukarıda kullanacağım bannerde ise ortada isim yazılması için bir alan olduğundan koda ekleyebilirim ve blog adı kendiliğinden gözükebilir. Tabi daha süslü püslü fontlarla resmin üzerinde de doğrudan yazılabilir.Başlangıçta seçmiş olduğum minima şablonunda görüldüğü gibi banner kısmı iç içe iki çerçeveden oluşuyor. Ve bu iki çerçeve arasında 5 piksel boşluk var. Çerçevelerin görünmemesi ve bu 5 piksel farkı kaldırmak için kodda şu değişiklikleri yapacağım. Aşağıda renkli yazdığım yerler kodda değiştirdiğim alanları ifade ediyor.

#header-wrapper {
width:900px;

margin:0 auto 10px;
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Bu değişiklikleri kaydedip bakarsanız banner için çerçeveler ortadan kalkmış olacak. Şimdi koda banneri ekleyelim. #header içine background olarak resmin url adresini yazıyoruz. Daha önce dediğim gibi resmi depoladığınız yerin adresi olacak ben kendi adıma ait hesaba koydum. Kodun yanına "no-repeat" yazarak kendini tekrar etmememesi ve "center" diyerek ortaya yerleşmesi emrini verdim. Bir de resmin tamamının gözükmesi için banner resminin yüksekliği neyse (benimki 452 pikseldi) height:452px; kodunu ekledim.

#header {
margin: 0px;
border: 0px solid $bordercolor;
background:url(http://gece.fezaneverd.com/pic/Untitled - 1.jpg) no-repeat center ;
height:452px;
text-align: center;
color:$pagetitlecolor;

Bu değişikliklerden sonra sayfamın görüntüsü şöyle:

Görüldüğü gibi banner üzerinde blogun adı gözüküyor. Öncelikle blogun adını resimde beyaz kalbin ortasına gelecek şekilde ayarlayacağız. Sonra da banner ile yazıların olduğu bölüm arasında görünen bölümü yok edip birleştireceğiz. aslında bu şekilde de kalabilir, fena gözükmüyor. Şimdi Gecedesign1 yazısını ortalamak için header içinde

#header h1 {
margin:5px 5px 0;
padding:200px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

değişikliğini yaptım. h1 başlığı temsil eder. Resmimin yüksekliği 450 piksel civarı olduğu için 200piksel padding ortalanır gibime geldi ve oldu da. Padding kodu koyulan nesnenin sağ, sol , yukarı ve aşağı bölümlerden ne kadar içerde olacağını belirlememize yardım eder. Daha sonra post yazı alanlarını düzenlerken padding ve margin arasındaki farkları ve uygulamaları göreceğiz . Şimdi başlığın rengini de yazı stili ve renklerden temaya uyumlu hale getirelim ve sitemin son hali işte bu.
Bir sonraki yazıda postların ve sidebarların olduğu bölümü makyajlayıp güzelleştireceğiz. Sona yaklaşıyoruz az kaldı. Görüşmek üzere herkese kolay gelsin.

Bu yazı zaten birçok şeyi yapıp değiştiren kişiler için basit kalabilir. Ancak hiç bilmeyenler için en baştan başlamak gerekiyor. Bir yıldan fazla sürede kendi başıma okuyarak, deneyerek öğrendiğim bilgileri sizlerle paylaşacağım. Meraklı olan kişi bu bilgileri birçok yerde bulup öğrenmiştir zaten. Öncelikle bir miktar ingilizce bilgisi gerektiriyor çünkü kodlar çoğunlukla ingilizce komutlar içeriyor. Ancak ben burda her bir kodu açıklamaya çalışacağım.

Öncelikle web tasarımı temel olarak iki unsurdan oluşmaktadır. Birincisi görsel malzeme, ikincisi de yerleşimi sağlayan tablolar pencereler vs. Blogger bize sadece görsel malzemeyi değiştirmeye izin veriyor. Şablon yapısını da değiştirmek mümkün ama 2 yada 3 kolonlu şablonlar olması dışında ve bunların genişlikleri dışında bir değişiklik yapamıyoruz. Bu yüzden önce kendimize blogger'ın şablonlarından basit bir tanesini seçmekle işe başlayalım (benim değiştirmeye en uygun gördüğüm minima şablondur, genelde 2 ya da 3 kolonlu minima şablon kullanıyorum) Minima şablonun 3 kolonlu olanından google da birçok yerden bulabilirsiniz. Birçok denemeden sonra ben buna karar verdim.

Bir şablonu yeniden oluşturmak için öncelikle kullanmadığınız bir blog sitesi daha açmakta fayda var. Değişiklikleri onda yapıp son haline karar verdikten sonra kendi sitenizi değiştirin. Yani önce kendimizi güvenceye alıyoruz.

Sonra şablon tipimizi belirleyip (2 yada 3 lü) bunun üzerinden değiştirmeye başlayacağız. Kodlarda bazı değişiklikler yaptıktan sonra görsel malzemeleri ekleyeceğiz.

Sitede kullanacağımız görsel malzemeleri kendimiz de oluşturabiliriz ya da internette bir sürü kaynaktan indirebiliriz. Her iki durumda da bir fotoğraf programına ihtiyacımız olacak. Birkaç yazı önce bahzettiğim PhotoScape ve Windows paint ile bu iş kolayca yapılabilir. Temel olarak bize gerekli resimler, bir banner (sitenin en üstündeki resim), bir footer (en alta koymak için bir resim, olmayabilir de), sidebar resimleri ( yandaki gadgetlerin olduğu kısımlara koymak üzere küçük bir resim) , post resimleri (kayıt aralarına koyup yazıları ayırmak için resim) ve tarih ve başlık yanına koymak için resim. Vee yine isteğe bağlı arkaplan için bir resim. Bunların hepsini birden yapmak istemezseniz kimilerini yapıp kimilerini yapmayabilirsiniz.

Fotoğraf programlarını kullanmaya başladığımızda artık bir resmin eni ve boyunun piksel uzunluğu ile tasvir edildiğini, bir pikselin ne kadar uzun olduğunu bilmemiz gerekiyor. Kodlar içinde bu piksel değerleri çok önemli. Diğer bir konu da yükleyeceğimiz resimlerin kapladığı yerin (büyüklüğünün) çok fazla olmaması gerekiyor ki sitenin açılırken yüklenişi yavaşlamasın.

Diğer bir gerekli konu da sitede kullanacağınız resimlerin depolanması olayı. Koda ekleyeceğimiz resimleri bir url adresinden çağırmak durumundayız. Çünkü Blogger bize depolama hakkı vermiyor. Bu yüzden yine birçok seçenek var. ImageShack bunlar içinde en meşhur olanı. Ücretsiz depolama alanı veriyor ve resimlerinizi yükledikten sonra resme tıkladığızda adres çubuğunda yazan adres o resmin linki olacak kodun içersinde.

Şimdi eğer bir blog açıp, basit bir şablon yüklediyseniz, site tasarımınızda kullanacağınız renklere ve resimlere karar verme aşamasındasınızdır. Gönlünüzde yatan stilde resimler arayıp ya da kendiniz yapıp birer banner ve footer oluşturmaya başlayalım. Son zamanlarda gözümüze çok hoş gözükmeye başlayan scrapbooking kartlarını banner ve resim tasarlamada kullanabilirsiniz. Bu tarz resimleri bedava indirmek için birçok site var ancak ben bu siteyi çok beğendim. Birçoğunu da kullandım. Şimdi sizler de kendine uygun resimleri bulun indirin tasarlayın ve oluşturun.

Bir sonraki aşamada kendi başıma nasıl yapıyorsam adım adım bir şablonun değiştirilişini ve yenilenişini anlatacağım.

Bir süredir ne yazdım ne çizdim, sadece kodlarla uğraştım.

İçimde bir türlü yetişemediğim merak, öğrenme hırsı, başarma hevesini durduramıyorum. Söylemiştim sanırım daha önce bu blog dünyasına ilk başta web tasarımıyla girdim. html siteler yapıyordum ama blogger şablonları bana çok farklıymış gibi geliyordu. Hiç de değilmiş. Kodlar her yerde aynı kod.

Şablon yapma hevesim hep vardı ama bloggerın kapatılıp da kısa süre olsa da wordpress'e geçtiğimde oradaki şablonların yetersizliğinden dolayı şablonumu değiştirmek istemiştim. Bir şablon beğendim ama malesef ücretsiz blogculara şablon değiştirme imkanı vermiyor. Daha doğrusu indirdiğiniz harika Wordpress temaları ancak alanınızın olması durumunda çalışabiliyor. Ben de düşündüm taşındım bu güzel şemeları bloggera uyarlayım dedim. Bir çok tema bu şekilde başkaları tarafından uyarlanmıştı zaten. Deneme amaçlı birkaç tema uyarladım, oldu da. İşte ilk uyarlamam.

Bundan sonraki aşamada ise bir temayı dönüştürmek değil, tamamen kedime has bir tema oluşturmayı denedim. Vee o da oldu. Şimdi kafamda binlerce fikir uçuşuyor. Sanırım bir süre sonra çizimlerle başlayan, örgülerle devam eden bu blog temalarla canlanacak. Bir süre sonra birkaç temayı paylaşmayı umuyorum.

Sadece duyurmak isterim ki artık blogspotun şablonları veya çoğunlukla erkeklerin yaptığı bayanlara uymayan şablonları kullanmak zorunda değiliz. Geçi bir çoğumuz farklı bannerlerle ya da stillerle kendimize has bir ortam yaratmış olsak da, hep beraber daha orjinal şablonlarımızı oluşturup, yazı başlıklarının yanlarını yada herbir postu birbirinden ayırmak için küçük süsleri, sidebarların başlarına koymak için çiçekleri kullanabileceğiz.

Duyurulur :)

Nereden nereye.

Blog dünyasına adım atmam yaklaşık bir yıl önce web tasarımı ile zorunlu olarak tanışmamla başladı. İşim gereği webmaster oldum ve hiç başından ayrılmadığım bilgisayara daha da yapıştım. html kodları öğrendim ve bir site tasarladım. Site yapımında daha çok hoşuma giden görsel tasarımı yapmaktı. Çok araştrdım, okudum, gezdim. Siteleri inceledim. Bir süre önce web2 stilinde tasarımlar ağırlıktayken (be bunlara parlak, cam görünümlü siteler diyorum, ya da daha anlaşılır şekilde vista stili) bana göre şimdi ilustürasyon ağırlıklı tasarımlar gözde. Bütün araştırmalarımda bildirgeç kaynaklarıyla bana çok yardımcı oldu. Zaten onun aracılığıyla 10marifet'i keşfettim, sonra da kolumu kaptırdım.

Site tasarımında kullanmak amacıyla çeşitli ilustürasyon programları ile çalışmaya başladım ancak çok da ilerlediğimi söyleyemeyeceğim. Blogumu açtıktan sonra da hazır şablonların çoğunu araştırdım. Öyle ki artık hep aynı şablonlar karşıma çıkmaya başlamıştı. Bu yüzden artık ciddi şekilde olmasa da karşıma çıkan yenilikleri araştırmaya ve bilgilerimi arttırmaya devam etmekteyim.

Bazen bir bloga girdiğinizde tasarımı çok hoşunuza gidebilir. Acaba nasıl yapılmış derseniz çoğunlukla altında tasarımcının adı ve linki bulunur. Bir çok tasarımcıyı bu şekilde bulmuştum. Genelde çoğu tasarımcılar erkektir ve şablonlar bayanlara çok fazla hitap etmiyor. O kadar çok araştırmadan sonra bir site gördüğümde tasarımcının erkek mi kadın mı olduğunu anlayabiliyorum. Kadınların tasarımlarında "kadın dokunuşu" kendini hissettiriyor.

Dün Annekaz'ın yazısında link verdiği blogun dizaynını çok beğendim. Hemen altında link aradım ve buldum. Ben bu siteyi nasıl daha önce görmedim. Süper stiller var ve tasarımcı bir kadın , hemen anladım.

Simply Fabulous Blogger Templates sitesine girince hem bedava şablonlar hem de blogger ile ilgili dersler bulabilirsiniz. Ayrıca kişisel tasarımlar da yapıyor Lena. Free Templates linkine girince ise büyülendim. Özellikle elişi tasarımlar yapan bayanlara uygun harika şablonlar var. İşte bunlardan birkaçı.





Bu harika stillerden kullanıp daha da özgün bir şablon elde etmek için de Annekaz'ın blog arkaplanı değiştirme ile ilgili son yazısından faydalanabilirsiniz. Ben deneyeceğim. Biraz yenilik hepimize çok iyi gelecektir.

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.