6 Ocak 2009 Salı

Kendi Şablonumu Kendim Yaptım (Yazı Dizisi 7) - Şablona İlave Bir Sidebar Ekleme

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.

25 yorum:

  1. Şu ışık birazcık da bizde yansa ne güzel olacak :) bunu da denemek için sabırsızlandım şimdi eve gidince yapacağım hehe.

    YanıtlaSil
  2. En samimi duygularımla, yeni güzelliklerin ve mutlulukların başlangıcı olan Muharrem Ayı ve Aşure gününün; inananların maddi ve manevi arınmasına, ülkemizin, Filistinin ve insanlığın kurtuluşuna, sevgi, huzur ve barış iklimine kavuşmasına vesile olmasını diliyorum.Cenab-i Hak bu kiymetli günlerin hürmetine edilen dualarimizi kabul buyursun.Amin.

    YanıtlaSil
  3. ama bu haksızlık:))) sabahtan beri şablon değişcem diye uğraşıyorum ben de...keşke önce yazını okusaydım...iki sidebar eklensin diye koca şablonu değişip bide silinen herşeyi tek tek ekledim yaa...ağlamak istiyorum:)))

    YanıtlaSil
  4. yaa bu sidebar,şablon v.s çok karışık geliyor bana ama senin blogundaki açıklamalara bakarak yazı genişliğimi artırmıştım,derslerime çalışırsam bunlarıda yapabilirim herhalde sayende ,yani sen bilgilendirmesen haberim olmaz bunlardan sağol,teşekkür ederim,ellerine sağlık...

    YanıtlaSil
  5. gececim çok çalışkansın :) bilgiler benim için çok kıymetli...akşam hemen deneyeceğim..

    teşekkürler...

    YanıtlaSil
  6. ay bu üç sütun olayını bende çok istiyordum birazdan deneyeceğim sağolasın canım ya

    YanıtlaSil
  7. ay bu üç sütun olayını bende çok istiyordum birazdan deneyeceğim sağolasın canım ya

    YanıtlaSil
  8. ay bu üç sütun olayını bende çok istiyordum birazdan deneyeceğim sağolasın canım ya

    YanıtlaSil
  9. Merhaba arkadaşım,
    kodları oluşturdum fakat başarılı olamıyorum, hiçbir değişiklik olmuyor, acaba yanlış yerlere mi yapıştırıyorum, yapıştırdığımız kısımları daha net olarak gösterir misin? çok şey istemedim umarım, yardımcı olursan sevinirim, bir kaç gündür bu konuyla ilgileniyodum sen de açıklama görünce çok sevinmiştim :(

    YanıtlaSil
  10. Bu yorum bir blog yöneticisi tarafından silindi.

    YanıtlaSil
  11. Güzel bir anlatım şekliydi..Teşekkürler..

    İşin ehlini bulmuşken soralım bari, benim blogda başlık ve tanımın altına resim eklediğim halde sayfada görünmüyor.. Şablonu 3 sütunlu diye aratıp eklemiştim..Derdi nedir anlamadım, bir türlü resmi göstermiyor..İzah ederseniz, şimdiden teşekkürler..

    YanıtlaSil
  12. Sabahtan beri bununla uğraşıyordum. Sizin sayenizde hallettim çok çok teşekkür ederim.

    YanıtlaSil
  13. geccecim sabahtan beri işi gücü bıraktım blogundayım:) Şu şablon derslerini okuyorum,çok güzel anlatmışsın,ama çook çalışmam lazım çok bir şablon cahili olarak:) Deneme blogu açtım uğraşıyorum şaşı oldum valla:)))
    Bu harika dersler için ellerine yüreğine sağlık, çoooook teşekkürler

    YanıtlaSil
  14. Şablonlarla boğuşurken yazılarınızı buldum, dediğiniz tüm adımları yaptım eski şablonumda ve oldu . ama sonra şablonumu değiştirip yeni şablonda denediğimde aynen sizin yaşadığınız gibi üçüncü sidebar aşağıda kaldı.Ve maalesef ne yaptıysam yukarı alamadım sonunda pes ettim :(
    aa içimde de ukte kaldı. birşeyi gözden kaçırıyorum ama neyi?

    YanıtlaSil
  15. gececim lütfen yardım et 3.klonu eklicem amabi yerde yanlış yapıyorum sanırım bi türlü ekleyemedim kodu giriyorum eksik bişeyler var heralde kodda hata veriyor yardım lütfennnnnnnnnnnnnnn

    YanıtlaSil
  16. gececim derslerine bayıldım hepsi tamam anladım daedim ellerine sağlık ama 3.sütun işi karıştı aslında en açık olanı bu belkide ama nerde hata yapıyorum bulamadım yardım edermisin lütfenn:PP

    YanıtlaSil
  17. Ellerinize sağlık... Daha yeni başladım blog oluşturmaya, dersleriniz sayesinde 2 sidebarlı blog oluşturmaya çalışıyorum. Birazcık becerebildim sanırım ayrıca... Ama daha deneme aşamasında, aklımda renkler ve arka plan resimleri falan belli olmadığı için birbirinden alakasız oldu ama düzelteceğim sonra. Aslında ben rounders şablonundaki gibi birşey istiyorum. Sanırım bunun için daha fazla çalışmak gerek.
    Verdiğiniz bilgiler için çok teşekkür ederim...

    YanıtlaSil
  18. canım lütfen bana yardımcı olurmusun kendimi paraladım ne yaptıysamda şu bloğumu 3 kolonlu yapamıyorum şifremi versem benim için sen yapabilir misin

    YanıtlaSil
  19. Bu sayfanın bana çok faydası oldu Blog şablonlarımı düzenlememde. Onun için aylar sonara teşekkür etmek için geldim. Teşekkür ederim ge-ce

    YanıtlaSil
  20. merhabalar, harika anlatımınız için çok teşekkürler bir yerde takıldım sonuna gelmişken yardımcı olabilrseniz çok sevinirim

    newsidebar 1. kod ve 2. kodun yani (div) olanın tam olarak hangi kodlardan sonra geldiğini ayrıntılı açıklayabilrmisiniz,anlattığınız gibi yaptığımda "Yeni widget kimliği "NewProfile" şu tür için geçersiz: Profile" GİBİ bir hat ile karşılaşıyorum. teşekkürler.

    YanıtlaSil
  21. Ok çözdüm, sizin verdiğiniz kod daki gibi ikinci yaptığımız sidebar'a newsidebar ismini vermek yerine "sidebar2" ismini verdim ve sizin kodunuzda yerleştirdiğiniz yerlere yerleştirdim ve oldu,takılan arkadaşların bir de böyle denemesini öneririm. bu arada GECE teşekkürler bu ve diğer bütün paylaşımlar için..takip edicem.

    YanıtlaSil
  22. sevgili gece, öncelikle verdiğin faydalı bilgiler için teşekkür ederim.
    ilave sidebar eklemeyi ne yaptımsa başaramadım :S her türlü yolu denedim olmadı sanırım yanlış yaptığım bişeyler var. sürekli hata veriyor. ilave bir sidebara çok ihtiyacım var rica etsem resimli olarak anlatabilirmisin..

    YanıtlaSil
  23. Şablonunuzu kaydedemedik
    Lütfen aşağıdaki hatayı düzeltin ve şablonunuzu tekrar gönderin.
    Yeni widget kimliği "NewProfile" şu tür için geçersiz: Profile

    YanıtlaSil
  24. Şablonunuzu kaydedemedik
    Lütfen aşağıdaki hatayı düzeltin ve şablonunuzu tekrar gönderin.
    Yeni widget kimliği "NewProfile" şu tür için geçersiz: Profile
    aynısını bende de diyor ne yapacağım?:(

    YanıtlaSil
  25. yüklediğiniz şablon ne ise onda sorun var demek ancak eğer tüm gadgetlerinizi siler yeniden yüklerseniz şablonu düzelecek

    YanıtlaSil