Blogger Sidebar Iki Sütuna Nasıl Bölünür

Sidebar alanı blogumuza işlevsellik katabileceğimiz önemli kısımlardandır.Bu yüzden bu alanda olabildiğince okuyucularımızın blogumuzu kolaylıkla tanımalarını sağlayan ve onların bizi takip etmelerine izin veren araçları o kısıma eklemeliyiz.Sidebar alanını düzenlerken kimi zaman o alanı ikiye bölme ihtiyacı hissederiz.Bildiğiniz gibi çoğu blogger sidebar kısmında genellikle tek bir widget alanı ekleyebileceğimiz sütun bulunur.Fakat bazen o alanı ikiye bölüp iki widget ı yan yana eklemek isteriz.Bu yazımda sizlerden gelen istek üzerine sidebar alanını nasıl iki sütünlu hale getiririz onu paylaşacağım:

sidebar_iki_sütun

İlk olarak blogger şablonunuzun yedeğini almakta fayda var.

Blogger hesabınıza giriş yapıp Html düzenle kısmına gelin ve aşağıdaki kod yapısına benzer kısmı bulun :

#sidebar-wrapper {
width: 400px;
float: $endSide;
margin-right: 100px;
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 */
}

Sizin kodlarınız biraz farklı olabilir ama buna yakın kodların olması gerekir.Şimdi bu kodlara ilaveten aşağıdaki kodları yukarıdaki kod yapısının altına ekliyoruz:

#right-col {
width:48%;
float:right;
word-wrap:break-word;
overflow:hidden;
}

#left-col {
width:48%;
float:left;
word-wrap:break-word;
overflow:hidden;

}

Gördüğünüz gibi iki sütun oluşturduk.Ben alanları eşit olarak dağıttım.Siz isteğinize göre değiştirebilirsiniz.

Şimdi ikinci kısma gelelim.Aşağıdaki kodların olduğu kısmı bulun :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</div>

Bu kodları aşağıdaki kodlarla değiştirin :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
<b:section class='sidebar' id='left-col' preferred='yes'/>
</div>

Evet şimdi şablonunuzu kaydedin.Yerleşim kısmına gelerek sidebar kısmının iki sütuna ayrıldığını göreceksiniz.

Kendi blogumda kodları sizlerle paylaştım.Belki sizin şablonunuzda biraz farklı olabilir.Ama yapı ve mantık olarak aynı.Takıldığınız yeri yorum bölümünde belirtirseniz yardımcı olmaya çalışırım.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

29 yorum:

  1. Hocam bende sidebar wrapper kodları yok. Temamı inceler misiniz? Nereye eklemeliyim?

    YanıtlaSil
    Yanıtlar
    1. temanızı electrinick[at]gmail.com adresine gönderin.Düzenlemeye çalışayım

      Sil
  2. Kardeş bende yapamadım bunu ?

    YanıtlaSil
  3. neresi olmadı hangi noktada takıldınız?Olmadı yukarıda verdiğim mail adresine temanızı gönderebilirsiniz.Düzenleyip size tekrar gönderirim

    YanıtlaSil
  4. Attım cevap vrrmiyornki

    YanıtlaSil
    Yanıtlar
    1. gece mesaj atmışsınız ne zaman cevap vermemi bekliyorsunuz.Mailinize cevap attım.Bana xml dosyasını göndermeniz gerekiyor.Şablonu kopyala yapıştır şeklinde mail atarsanız hata verebilir.Şablonu bilgisayara indirip öyle gönderin

      Sil
  5. Hocam sidebar kodlarını metin belgesi içinde atsam olur mu?

    YanıtlaSil
  6. metin belgesine kopyalayıp oradan yapıştırayım diyorsanız elbette olur.Ayrıca @Pc oyuncum arkadaşımızınki gibi kod yapısı farklı olabilir.O yüzden kod yapınızı iyi incelemelisiniz eğer yukarıdaki kodlar olmadıysa ve hala yapamadıysanız bana şablonunuzu gönderin düzenleyip göndereyim

    YanıtlaSil
    Yanıtlar
    1. Buyrun: http://tinypaste.com/2b677564

      Sil
  7. Bilgisayarım yanımda olmadığından ilgilenemedim pazartesi size döneceğim

    YanıtlaSil
  8. Benim sorunu yaptın mı hocam?

    YanıtlaSil
    Yanıtlar
    1. Hocam şimdi baktım ama siz kodlarınızın bir kısmını göndermişsiniz.Şablonunuzu indirin bilgisayarınıza onu gönderin bana.

      Sil
  9. bende bi mail attım zamanınız olnca yardım ederseniz sevinirim hocam .

    YanıtlaSil
  10. Bir yardımda bana rica ediyorum :) mail gönderdim teşekkürler.

    YanıtlaSil
  11. Ben 2 ayrı sidebar istemiyorum sahip olduğum side barı liste biçiminde bölmek istiyorum.
    Mesela yıllar diye etiketim var o etiket ( 2012 2011 2010 2001 ) gibi 4 bölüm olsun.
    Misal oyuncular diye bi etiketim var oda 2 bölüm olsun. Anlatabildim mi bilmiyorum :S

    YanıtlaSil
    Yanıtlar
    1. sidebar ı liste biçiminde bölmek ne demek anlayamadım.Sahip olduğunuz arşiv gadget ını 4 farklı sütüna mı bölmek istiyorsunuz ?

      Sil
  12. İyi akşamlar.Anlatımınızı çok sevdim..çokda faydasını gördüm..
    Ben sidebarımın yerini değiştirebiliyorum..Ama ben hem sağ tarafta hemde sol tarafta sidebar istiyorum..
    ama bunu yapamadım.Temam hazır olduğu için genelde değişiklik yapması zor oluyor.
    Birde temam sadece 3 konunun ilk sayfada görünmesine izin veriyor..uzamıyor..buda haliyle sidebarları iki kısma yaymamı istememe neden oluyor...

    http://littletiny16.blogspot.com/

    YanıtlaSil
    Yanıtlar
    1. Bu soru çok soruluyor ama standart bir anlatım yapamıyorum.Kodlarınızı görmem gerekiyor.3 konunun görüntülenmesi olayı ise yerleşimden blog kayıtları bölümüne geldiğinizde buradan sayısını ayarlayabilirsiniz

      Sil
    2. Anladım.Ama konu sayısını arttırınca başka bir sorun çıkıyor..ama yinede teşekkürler..hem yardımınız hemde bu kadar çabuk cevap verdiğiniz için
      Buyrunkodlar(http://www.dosya.tc/server5/iCrdya/littletint.rar.html)

      Sil
  13. hocam size temamın xml göndericem benim temamda hiç bir yerde sidebar yok yani boş ikmi tarafada sidebar gadget ekleyebilirmisniz

    YanıtlaSil
    Yanıtlar
    1. Hocam bana yeniden tema yap desen daha kolay olurdu.Şİmdi kod yapını anlayıp main wrapper daraltıp iki tane sidebar tanımlayıp ona göre yerleştirmek gerekir.Temanızı bilmiyorum ama sidebar olan yeni bir tema tercih etmen daha doğru olacaktır.

      Sil
  14. allah razı olsun kodlara koyduğunuz kesme işareti temayı mahfetti sapıttı tema

    YanıtlaSil
  15. neyseki düzelttim üstat şu koddaki kesme işaretlerini düzeltin bence değiştirmeye çalışınca kendinden geçiyo kodlar :)

    YanıtlaSil
    Yanıtlar
    1. Uyarınız için teşekkürler.Yazıyı tekrar düzenleyeceğim

      Sil
  16. Hocam peki sidebardaki widgetler yada gadgetler arasınadaki boşluğu nasıl ayarlıcaz. Yani demek istediğim altalta olduğu için hepsinin yukarsından ve aşağısından boşluk bırakmam gerekiyo ama hepsi dipdibe durumda benim blogumda. Sidebar bölümündeki herşeyi denedim margin padding ayarlarını oynadım bi türlü değiştiremedim. yardımcı olurmusun.

    YanıtlaSil
  17. Merhaba Poyraz

    bu şekild eekledim zaman altaki b:section kodları hata veriyor nerde problem var çok acil yardm kaç gündür yapamadım kfayı yicem

    YanıtlaSil
    Yanıtlar
    1. Nasıl bir hata aldın ?İletişim bölümünden bana yaz birlikte bakalım.

      Sil
  18. Poyraz bey bilgi için teşekkürler, buradan olur mu bilemem ama yapamayanlar için bir ekte bulunayım.

    Bu kodu silin


    onun yerine alttakini olduğu gibi yapıştırın.




    Başka hiç bir şeyi ellemeden ben bu şekilde yaptım ve Poyraz arkadaşımıza tekrar teşekkürler...

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.