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:
Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada aşağı ki kodu aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;
#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 */
}
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 */
}
Bu kodların aynısı sizde olmayabilir, bunun sebebi ise farklı temalarda farklılık gösterdiğindendir ama buna yakın kodlar mutlaka kodlarınız arasında mevcuttur.Simdi 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;
}
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>
<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>
<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.
Kaynak:
http://www.ehliblog.com/2012/05/blogger-sidebar-iki-sutuna-nasl-bolunur.html
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.
Kaynak:
http://www.ehliblog.com/2012/05/blogger-sidebar-iki-sutuna-nasl-bolunur.html
