Yeni bir site açılmış , tasarımını da kim yapmış acaba?

Merhabalar, sizleri harika resimleri olan bir bayanla tanıştıracağım. Adı gibi efsane kalacak resimler çekiyor. Özel sitesi vardı ama sıcacık yazılar yazabileceği bir blogu yoktu. İşte bu aşamada beraber çalıştık. Kendisi sade, biraz vintage tarzı tasarımlardan hoşlanıyordu. Beğendiği renklerde kahve ve mavi tonları idi ama maviyi fazla kullanamadım. Yine de iç açıcı bir tasarım oldu.

Bu tasarımda ilk defa bir slayt (kendi tasarımımdan başka tabi) kullandım. Ancak bu tasarımın çok hoş bir yönü daha var. Resimlerin slaydı benim temamda bir swf dosyası ile sağlanırken (ki bu değiştilmez neyse o şekilde kalır) bu temada slayt, herhangi bir gadget düzenlemesi gibi düzenlenebilecek ve zamanla değiştirilebilecek. Üstelik üzerinde de hoş yazıların yazılabileceği bir alan var.

Bu temayı çok farklı özelliklerde temalar barındıran btemplates den hazır aldım, ancak değiştirdim ve uyarladım. Özellikle slaydın kodlarıyla oynadım ki bu ebatlarda (hatta istenilen her ebata değiştirebilirim), bu kadar işlevsel bir slaydı olan başka bir tasarım daha görmedim.

Blogun tasrımına, harika resimlerin yer aldığı slayda buradan bakabilirsiniz.

Merhabalar... Hala eski performansıma dönmüş değilim, zira dönüp dönmemek konusunda da kararsızım yazdığım gibi. Bu arada yaptıklarımı blogumda paylaşmayınca, aslında ne de çok hatıranın unutulup gittiğini farkına varıyor insan, geçmişe baktıkça iyi ki paylaşmışım, ne çok şey yapmışım diye düşünülüyor.

Bu aralar kocacığımla ayrılık öncesi maksimum zaman geçirme konusunda çabalıyoruz. Geçen yazımda tahmini bir süre vermiştim, şimdi neredeyse kesinleşti, 10 gün kadar sonra gidecek.

Bu arada Paşanın annesi olan ablam yeni evine taşınma telaşında. Daha önce de yazmıştım, evinin dekorasyonu için özenle çalıştık, ben de bu arada bazı şeyler hazırlıyorum. Yukarıdaki resimde görülen resimler beyaz çerçeve içinde tablo olacaklar.  Yazılı olan mutfağa, EAT WELL LIVE WELL yazdım ki ablam sağlıklı lezzetli yemekler hazırlaması gerektiğini unutmasın :)

Diğeri de antre için ya da salonun bir köşesine uygulanacak olan dinlenme köşesi için, daha karar vermedim.


Bundan başka beyaz ağırlıklı döşenmiş mutfağına biraz renk katmak amacıyla resimdeki yastık kılıflarından örüyorum, kimisi de aynı renklerde ve çiçekli olacak. Bunlar mutfak sandalyelerinin oturma kısımlarına ince bir minder ile uygulanacak.

Daha birçok şey yapmıştım ama baktım ki fotoğraf makinesinin hafızasından aktarmış kocacım, evdeki bilgisayarda yani. Onları da daha sonra paylaşırım.

Tamamen hobi olarak başladığım blog tasarımı işim haline geldi sanki, kendime şaşıyorum. Ama çok seviyorum tasarlamayı. Sırada yeni tasarımlarım var yapılacak ve heyecanlandırıyor beni. Bazıları tanıdığınız bloglar olacak bakalım görünce şaşıracak mısınız.


Son yaptığım tema Deniz'in Mutfağı, öyle şeker ve ferah oldu ki. Deniz renkli bir arkaplan uyguladım. Biraz farklı bir tasarım oldu bu.  Banner, arkaplan, yukarı ve aşağı doğru görülen çerçeveli beyaz alanların tasarımı bana ait. yandaki kız resmi ve cupcake resimleri hazır, Hoş bir kombinasyon oldu. Sitesi burada.




Bir önceki yazımda link verdiğim ama resimlerini koymadığım bundan önceki iki blog tasarımı da  şöyle, 3prenses'in teması


ve Finlandiya'da  Fizik Doktorasını yapan (meslektaşım) Hintli Ananda'nın blogu.

Şimdilik benden bu kadar, tekrar görüşmek üzere, yorum yazmıyorum ama ara sıra sizleri ziyaret ediyorum. Sevgilerimle..

Bu şablonu geçen hafta ablama yapmıştım bir çoğunuz da gördü zaten.



İçimdeki yolculuk benden bir header istemişti ve bunu minima 3 sutunlu beyaz şablonda kullanmak istiyordu. Kendisine huzur veren, içsel yolculuğu çağrıştıran bir resim arayıp buldum ve biraz düzenleyerek bu headerı hazırladım.

Güle güle kullanın.

Bu temayı yapalı yine çok uzun zaman oldu ama sahibinin bloglamaya başlaması biraz zaman almıştı. Beraber bolca konuşarak tasarımını oluşturduk. Kırmızı renkler ağırlıkta ve biraz da altın yaldızlar, yeşiller kullandık. Kendisi bana gerçekten çok yardımcı oldu, resimler araştırdı, fikirler getirdi.

Blog tasarımı yapmanın en keyifli yanlarından biri de yeni arkadaşlara sahip olma imkanı vermesi. Blog sahibi çok şeker sıcacık bir insanmış bunu anladım. İlk iki yazısını okuyunca siz de öyle düşüneceksiniz. Blogunda tariflerden başka masa dekorasyonlarına yer verecekmiş. Bu kısmı özellikle merakla bekliyorum. Sizler de Kırmızı Mutfak'ın büyüsüne kapılmak isterseniz kapısını bir tıklayın.

Geçen hafta Piti Piti için bir tema yapmıştım paylaşmayı unutmuşum. Gerçi onu takip edenlerin haberi olmuştu.

Aşağıda da daha önce yaptığım Hand Craft temasının arka fonlarını değiştirerek oluşturduğum yeni versiyonları mevcut. Bunları da bir ay önce yapmıştım ama yazmayı unutmuşum. İsteyenler aşağıdaki linklerden ücretsiz indirip kullanabilir.

İndirmek isteyenler için pembe arkaplanlı hali burada.


Yeşil arkaplanlı hali de burada.

Harika bir site bulmuştum içinde milyonlarca görsel olan. Bunlar hazır paketler halinde olduğu için yanına ne yakışır ne yakışmaz arayışından kurtarıyor insanı. Bu paketlerden birkaç tane bedava tema yapacağım ve sunacağım. İlki plaj terlikli, çiçekli böcekli şıkır şıkır bir tema. Sanıyorum moda güzellik hobi bloglarında kullanılabilir.

Pastacılar için de ayrıca temalarım olacak. Ders çalışırken arada dinlenme çalışmaları bunlar.

Temayı buradan indirebilirsiniz. Buradan bir süre için daha yakından bakabilirsiniz.

İndireceğiniz temanın bannerinde GeCe yazmayacak. Arkaplanı kaydet diyerek bannere isminizi yazın ve kumanda panelinden tekrar yükleyin.

Kaldera ve Volkan kardeşlerin annesi Nazan Hanım'a ne zamandır verilmiş sözüm vardı. Kaç ay önceydi hatırlamıyorum. Birkaç gün önce aldığım bu kağıtlar o kadar hoşuma gitti ki hemen aklıma birşeyler geldi. Bazen günler, haftalar sürerken bazen de birkaç saatte bitiveriyor. Bu da çabucak bitenlerden ama baştan savma değil. Gayet özendim ve çok beğendim. Buradan tamamına bakabilirsiniz.

Siparişler dışında sırada bekleyen paşam, prensesim, ablam ve kendi blogum olmasına rağmen daha onlara ne zaman sıra gelecek bilemiyorum.

Geçenlerde de belirttiğim gibi bu aralar çok fazla işim olmasına rağmen sanki hiç birşeye yetişemiyorum. Yapıyorum ama bitmiyor, ya da hiç birşey planladığım gibi gitmiyor. Kimi zaman o kadar daralıyorum ki, en çok üzüldüğüm de verdiğim sözlerin sürekli erteleniyor olması. Benden şablon bekleyenlere karşı o kadar mahcubum ki...

Sevgiler.

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.

Anne Kaz'ın yeni şablonunu gördünüz mü? Orjinal banneri ve footer'ı , konu aralarına koyduğu ayırıcı çiçekler, tarihin yanındaki küçük kelebekler ve sidebar'daki hoş başlıklar siteye cıvıl cıvıl bir hava getirmiş. Ben çok beğendim. Kim yapmış acaba? :)

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 :)