22 Eylül 2008 Pazartesi

# Banner # şablon değiştirme

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.

20 yorum:

  1. cok cok tesekkur ederim,bu benim tek basima bulabilecegim birsey degildi

    YanıtlaSil
  2. çok güzel olmuş. Bende hep ondan şikayetciydim. Dediklerini uyguladım ama benim bloguma yakışmadı :( Ben seninkinen birazcık daha dar kullanabilmem için hangi kodu girmem gerekir ki?

    YanıtlaSil
  3. ben kod işini çozmüştümde...yazmayı unuttuğum bir şey vardı aslında..onu eklemek istedim ;Amigurumi oyuncaklarınız bir harika...arkadaşlara anlatıyorum.mutlaka girip görün diye.bayıldım inanınki.hatta dedimki anlatırken, bakarken ipleri çıkarıp öresim geldi..öyle heveslendim..ellerinize,emeğinize,yüreğinize sağlık..sevgiler.

    YanıtlaSil
  4. Ferah olmuş canım.Bilsem derdini yazardım sana neyseki çözmüşsün. ^lü kolonda olmuyor ama bende yaptım ama olduğu kadar şu anki hali.Hayırlı olsun canım.

    YanıtlaSil
  5. evet böyle daha iyi durmuş 3 oda bir salon gibi valla ellerine ve beynine sağlık.ben bloğuma kategori kısmı istiyorum ama blogun böyle bir seçeneği yok gördüğüm kadarıyla hani kategoriler olsaydı daha bi düzenli olurdu gibi geliyor bana bunları tabiiki kendim için söyledim.Kolay gelsin

    YanıtlaSil
  6. Gece ablacıgım, ben bu yazı alanını geliştirmek istedim, senin dediklerinin aynısını yaptım ama benimkinde bir tuhaflık oldu sanki. yazı alanı genişlemedi. profil bölümü yazı alanına çok yakın kaldı yinede. Nerde yanlış yapmış olabilirim ki? Veya neyi degiştirmem grekiyor ablacım?

    YanıtlaSil
  7. umarım birgün bende başarırım şablon işini:(

    YanıtlaSil
  8. Gerçekten kolay değişiyormuş da ben bu 3 stun hastalığımdan kurtulmam lazım geniş metin gövdesi kullanabilmem için off off :)

    YanıtlaSil
  9. banada kolay gibi geldi.bir deneyeceğim...ne güzel anlatmışsın.teşekkürler gece.

    YanıtlaSil
  10. merhaba,
    anlattıklarına dayanarak sitemi yapmaya çalışıyorum
    hepsini eksizksiz ve atlamadan anlatıyorsun kolay oluyor yapmak, sağol.
    ama bunu yapamadım dediğin bütün değerleri girdim
    bir türlü olmuyor neyi atladım acaba :( sevgiler...

    YanıtlaSil
  11. benim yapmak isteyip yapamadığım şey, konuları kategoriye ayırmaktır. yani etiketler böyle görünse...hatta etiketlerin temasına göre resim yüklesem falan...nasıl olur ki?

    YanıtlaSil
  12. çok güzel anlatmışsınız ;) genel olarak sitedeki bilgiler çok faydalı oldu, sağolun.. fakat bu genişletme işini yapamadım, blogumun daha önceki şablonuna uygulamıştım (aynen dediğiniz gibi) fakat şimdiki haline uygulayamıyorum.. çünkü kodlar bildirdiğiniz gibi değil, ne yapmam gerekiyor, yardımcı olabilir misiniz??
    işte şablonumdaki header kodları;
    /* ----- HEADER ----- */



    #header-wrapper {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

    #header {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

    #header h1 {
    float: left;
    color: $blogTitleColor;
    font: $blogTitleFont;
    text-align: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 0px;
    }

    #header h1 a {
    text-decoration: none;
    color: $blogTitleColor;
    }

    #header h1 a:hover {
    text-decoration: none;
    color: $blogDescriptionColor;
    }

    #header .description {
    float: left;
    color: $blogDescriptionColor;
    font: $blogDescriptionFont;
    text-align: left;
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 0px 0px;
    }

    #header h1 p, #header .description p {margin:0;padding:0}

    #header a img {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    }

    YanıtlaSil
  13. valla şahane anlatmışsın ama ben şablon konusunda daha önceden mimliyim bi ara bi girdim külliyen bozdum herşeyi...

    yardımcı olursan çok sevinirim canım...

    YanıtlaSil
  14. merhaba, ellerinize, yüreğin,ze sağlık. Ben ilk defa blog yapmak istersem nereden başlamalıyım? Teşekkürler,

    YanıtlaSil
  15. blogger şablon oluşturma dersleribi görünce insan herşeyi kendisi yapacakmış zannediyor ancak öyle değil, zaten hazır bir şablon veriyor blogspot. ve etrafta çok güzel bedava şablonlar da mevcut, benim derslerim hiç kimseye benzemeyen şablonlara sahip olmak isteyenler için,

    bana göre yeni bir blog yazarı önce hazır şablonlar kullanıp iyice bloglamayı öğrenmeli, daha sonra ihtiyacları ve tercihleri şekillenecektir buna göre şablon oluşturma derslerinden kendisine özel şablon oluşturabilir

    YanıtlaSil
  16. Süper anlatmışsınız..sizin sayenizde artık daha geniş bi bloğum var..yapamam diyordum ama bende başardım:)yazı alanım genişledi ancak resimler küçük kaldı daha büyük olsun istiyorum,nasıl yapıcam..yine burada şablon derslerinde anlatmışsınız sanıyorum ama hangisi çözemedim :( yazı alanını sizin verdiğiniz ölçülerde ki gibi yaptım,resimleri nasıl büyütebilirim

    YanıtlaSil
  17. ABİCİM ÇOK GÜZEL BİR PAYLAŞIMDA BULUNMUŞSUN ÖNCELİKLE TŞKLER... BENİM Bİ İSTEĞİM OLCAKTI SENDEN ŞU ÜSTTE HEADER KISMINDA RESİM KOIYMUŞSUN VE RESİMLER KENDİLİĞİNDEN DEĞİŞİYOR SIK SIK ONU NASIL YAPTIĞINI ANLATIRSAN SEVİNİRİM DİĞER BİR HUSUS BLOG ŞABLONUN HOŞUMA GİTTİ BLOG ŞABLONUNDAKİ KATEGORİLERİ NASIL AYARLADIN YADA ŞABLONUN KENDİ ÖZELLİĞİMİYDİ BU ŞABLON U NERDEN BULABİLİRİZ KODU LAZIM... YARDIMCI OLURSAN SEVİNİRİM

    YanıtlaSil
  18. Ben left strech şablonunu kullanıyorum. Yeni bir font eklemek istiyorum. Font isimlerini gördüğüm her yere istediğim font ismini ekledim ama olmadı. Bunu yapabilir miyiz yoksa değişikliğe izin vermiyor mu?

    YanıtlaSil