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:

İ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.