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.
Hocam bende sidebar wrapper kodları yok. Temamı inceler misiniz? Nereye eklemeliyim?
YanıtlayınSiltemanızı electrinick[at]gmail.com adresine gönderin.Düzenlemeye çalışayım
SilKardeş bende yapamadım bunu ?
YanıtlayınSilneresi 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ıtlayınSilAttım cevap vrrmiyornki
YanıtlayınSilgece 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
SilHocam sidebar kodlarını metin belgesi içinde atsam olur mu?
YanıtlayınSilmetin 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ıtlayınSilBuyrun: http://tinypaste.com/2b677564
SilBilgisayarım yanımda olmadığından ilgilenemedim pazartesi size döneceğim
YanıtlayınSilPeki ben beklerim.
YanıtlayınSilBenim sorunu yaptın mı hocam?
YanıtlayınSilHocam ş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.
Silbende bi mail attım zamanınız olnca yardım ederseniz sevinirim hocam .
YanıtlayınSilBir yardımda bana rica ediyorum :) mail gönderdim teşekkürler.
YanıtlayınSilBen 2 ayrı sidebar istemiyorum sahip olduğum side barı liste biçiminde bölmek istiyorum.
YanıtlayınSilMesela 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
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İyi akşamlar.Anlatımınızı çok sevdim..çokda faydasını gördüm..
YanıtlayınSilBen 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/
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
SilAnladı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
SilBuyrunkodlar(http://www.dosya.tc/server5/iCrdya/littletint.rar.html)
hocam size temamın xml göndericem benim temamda hiç bir yerde sidebar yok yani boş ikmi tarafada sidebar gadget ekleyebilirmisniz
YanıtlayınSilHocam 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.
Silallah razı olsun kodlara koyduğunuz kesme işareti temayı mahfetti sapıttı tema
YanıtlayınSilneyseki düzelttim üstat şu koddaki kesme işaretlerini düzeltin bence değiştirmeye çalışınca kendinden geçiyo kodlar :)
YanıtlayınSilUyarınız için teşekkürler.Yazıyı tekrar düzenleyeceğim
SilHocam 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ıtlayınSilMerhaba Poyraz
YanıtlayınSilbu şekild eekledim zaman altaki b:section kodları hata veriyor nerde problem var çok acil yardm kaç gündür yapamadım kfayı yicem
Nasıl bir hata aldın ?İletişim bölümünden bana yaz birlikte bakalım.
SilPoyraz bey bilgi için teşekkürler, buradan olur mu bilemem ama yapamayanlar için bir ekte bulunayım.
YanıtlayınSilBu 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...