7 Kasım 2008 Cuma

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.

29 yorum:

  1. Sevgili Ge-Ceciğim , öyle güzel anlatmışsın ki hemen denemek istiyorum. Yazının devamını dört gözle bekliyorum. Bizimle bu değerli bilgilerini paylaştığın için teşekkürler canım.

    YanıtlaSil
  2. Sevgili Ge-Ceciğim , öyle güzel anlatmışsın ki hemen denemek istiyorum. Yazının devamını dört gözle bekliyorum. Bizimle bu değerli bilgilerini paylaştığın için teşekkürler canım.

    YanıtlaSil
  3. aaaa nasıl oldu anlamadım site kilitlendi iki tane olmuş yorum. silemiyorum da. neyse artık sende vardır çöp kutusu silersin canım.bye.

    YanıtlaSil
  4. Heyy hey yaba-daba duuu...
    Birazdan dügüne gidicez en gec yarın uygulayacagım ama cok güzel anlatmışsınız harikasınız teşekkür ederim...

    YanıtlaSil
  5. Canım şablon genişletme konusunda verdiğin bilgileri kendi bloğumda uyguladım.Diğerlerini de fırsat buldukça uygulayacağım.verdiğin bilgiler ve paylaşımın için çok teşekkür ediyorum.sevgiler.

    YanıtlaSil
  6. Ben de denedim ama sağ tarafta kalması gereken profil, izlediklerim, vs... gadgetlerim oldukça aşağı kaydı. Nasıl yaptıysam artık. Sanırım footer kısmında bir hata yaptım.

    YanıtlaSil
  7. Gececim sağol ilgilendiğin için. Dediğin gibi tekrar yaptım oldu. Bu sefer de sağ yandaki görüntüde kesilme oldu. Neyse biraz daha kurcalayacağım, taktım kafayı. Zaten 3 sutunlu şablon istiyorum aslında. O zaman uygularım bunu da...

    YanıtlaSil
  8. sevgili gece ben biyere bişey yaptım kocaman oldu nasıl oldu nasıl düzeltirim anlamadım

    YanıtlaSil
  9. Merhaba Ge-ce,

    Ziyaretinden sonra arka plan resmimi değiştirmeyi başardım. :).Tabii derslere devam.Şimdi 3. derse geçtim.
    İyiki varsın.

    Sevgilerimle*

    YanıtlaSil
  10. http://nurmedresesi.blogspot.com/

    Burda nerde hata yaptık ki?

    Sayfanın önceki hali ile sonraki hali birleşti..

    Bir de banner kısmı neden genişlemedi..?

    YanıtlaSil
  11. Tamamdır, banner resmini kaldırıp tekrardan yükledik..

    Düzeldi..

    Yalnız "Burda nerde hata yaptık ki?

    Sayfanın önceki hali ile sonraki hali birleşti.."

    bunu çözemedim hala..Geçmiş nasıl düzelecek..?

    YanıtlaSil
  12. o kadar araştırma yaptım ki bu bilgilere ulaşmak için.çok çok teşekkür ederim şahsım adına))

    YanıtlaSil
  13. Sağol kardeş ben sadece genişletmeleri uyguladım ve güzel oldu.Eline sağlık

    YanıtlaSil
  14. Ne iyi etmişsiniz de bu güzel bilgileri bizlerle paylaşmışsınız. Ne zamandır nasıl yapıldığını merak ettiğim bir çok şeyi sayenizde yapabildim. Herşey için çok teşekkürler.

    YanıtlaSil
  15. TEŞEKKÜRDE BİRAZ GEÇ KALDIM,BİR TAKIM DÜZENLEMELERİ SİZDEN YARDIM ALARAK BLOGUMU AÇTIM TEŞEKKÜRLER MUTLU HAFTALAR SEVGİLER..

    YanıtlaSil
  16. Merhaba Gece,

    Kendi şablonumu kendim yaptım yazı dizisi zaman zaman tekrar tekrar okuyup ulgulama yaptığım bir bölüm.
    Ancak şablonunu değiştirdiğinden beri bazı yazılar çok açık sarı ve okunmuyor.Sanırım renk ayarlarına bir bakmalısın gececiğim.

    Sevgiler*

    YanıtlaSil
  17. Defalarca denememe ragmen cozemedigim bir nokta var. Blogger'ın "yeni şablon seç" bölümünden önce minima beyaz şablonu seçtim. Tum soylediklerinizi yaptim ancak body eklentisinin oldugu kisimda sorun cikiyor. Sizin soylediginiz gibi arka fonun degismesi gerekirken sadece beyaz renge donusuyor.Kodu yazmam gereken kisim

    /* Use this with templates/template-twocol.html */

    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }
    burasi degilmi. Yardimci olursaniz sevinirim.

    YanıtlaSil
  18. cinnamon'un ki gibi oluyo benimkide beyaza dönüşüyo.

    YanıtlaSil
  19. merhaba gece ben yeni blog aldım ancak içini doldurmadımki kendimce düzenlemeler yapayım diye.araştırmalar sonucu senin bloğunu buldum mükemmel anlatımınla bir tema oluşturmak istedim ancak bu kodları falan herşeyi dediğin gibi yaptığım halde hiç bir değişiklik olmuyor minima şablon olduğu gibi duruyor aynı:(:(birşey yapmanı beklemiyorum ama çok sinir oldum ondan yazayım dedim.herkes yapabilmiş çünkü bu durumda sorun bende oluyor :):) sevgiler...

    YanıtlaSil
  20. kaydet dedikten sonra bazı hata mesajları verebiliyor o zaman da kaydetmiyor doğru kaydedildiğinden eminseniz değişiklik olacaktır ben sürekl yapıyorum her şablon düzenlememde

    YanıtlaSil
  21. yanıt için teşekkürler.sanırım klasik şablonla idare etmek zorunda kalacağım çünkü yapamadım:)mutlu günlerr...

    YanıtlaSil
  22. Emeğinize sağlık. Bloğunuzu bulunca altın bulmuş kadar sevindim. Ben de blog hazırlamaya çalışıyorum ve verdiğiniz bilgiler çok çok değerli oldu benim için.Bir kaç deneme de ben de yapamadım ama yine siteniz sayesinde bulduğum Delfina da birşeyler okurken widget şablonlarını genişlet kısmını tıklamam mı gerekiyor diye tekrar denedim ve oldu. Paylaşımınız için çok çok teşekkürler

    YanıtlaSil
  23. Gececim verdiğin biller için gerçekten sağol ama arka plan desen değişikliğini o kadar denemem rağmen olmuyor başka bir yolu varsa lütfen yardımcı ol sağol..

    YanıtlaSil
  24. çok faydalı ve açıkça bir anlatım.teşekkürler.ancak genişletmeyi yaptıktan sonra profil bilgileri ve izleyici gadgetı aşağıda kaldı,ya da aşağı geçti bilemiyorum.neyi yanlış yaptım?:)

    YanıtlaSil
  25. sevgili Ge-Ce 3 sütünlu şablonunu indirdim ama uygulayamıyorum. Ben 2008'den beri Blogger'dayım ama bi' türlü blog yapamamıştım nedeniyse gördüğüm bloglar gibi olmamasıydı. Blogumu yapar yapmaz adını duyurmaya çalışacağım. Yavaş yavaş ilerlemek zorundayım. Çünkü; hem dikkatli oluyor, hem de yazının bir bölümünü okuduktan sonra uyguluyorum. Gerçekten de sen çok güzel anlatmışsın. Bazı kişiler yarım yamalak anlatıyorlar nedeniyse en güzel blogu onların yamak istemesi. Çok teşekkürler cnm:))

    YanıtlaSil
  26. ----------------------------------------------- */body
    {background: url(http://www.arka-planlar.com/ap/arka-plan-301.jpg);}
    font: $(body.font);
    color: $(body.text.color);
    background: $(background: url(http://www.arka-planlar.com/ap/arka-plan-301.jpg);
    padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
    $(body.background.override)
    }
    çok saol gececim yardımların için ama yapamıyorum
    bu na göre bı yerde yanlıs yapıyorum ama nerde bulamadım cunku hep yarım cıkıyor resım sebebı nedir ?

    YanıtlaSil
  27. bu yazılar yazıldığı zaman güncellenmiş temalar mevcut değildi bu yüzden kodlarla yapıyorduk ancak şimdi tasarım bölümünden (font ayarlarının falan olduğu kısımdan) kodlara hiç bulaşmadan direk istediğiniz resmi arkaplan olarak yükleyebilirsiniz.

    YanıtlaSil
  28. dediğiniz yere geliyorum fakat



    hiç 600px gibi bi boyutlama göremiyorum şablon düzenleme- header a geldim :(

    YanıtlaSil
    Yanıtlar
    1. Bu yazıda anlattığım temaları değiştirdi blogger, ne yazık ki bilgiler eski ksldı

      Sil