Blogger'de Sidebar Dersi :):)

on 26 Ocak 2012 Perşembe
Selam benim,Ayşe.Blogger'de Sidebar Dersi paylaşmak istedim.Sidebar,blogcu dayken kolon anlamına geliyordu.Burada ise sidebar olarak kullanacağızz.

Hatırlatma; blog temanızın yedeğini almayı unutmayın.

Temanızda alttaki kodu aratın. Eğer temazızda alltaki kod yok ise; temanızda ]]></b:skin> kodunu aratın ve hemen üstüne alttaki kodu yapıştırın. Not olarak şunu eklemek isterim; eğer hazır tema kullanıyorsanız, sidebar'ın css kodlarında nasıl tanımlandığını kontrol edin. Her hazır temada farklılık gösterebilir.

.sidebar h2 {
border:1px solid #000000;
margin:0;
padding:0 1em;
line-height:2em;
}
Tüm sidebar düzenlemelerini üstteki kod üzerinde yapacağız.

Sidebar Başlık Düzenleme - Kenarlık Ekleme

Kenarlık eklemek için alttakine benzer CSS kodları kullanılabilir;
.sidebar h2 {
border:1px solid #000000;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

Yukarıdaki kodu kullanırsanız yandaki resimdeki gibi bir görüntü elde edersiniz;
Burada kenarlık çizgi kalınlığını (1px), rengini (#000000) ve kenarlık çizgi tipini (solid) değiştirmek mümkün. Kenarlık çizgi tipleri; none, dotted, dashed, solid, double, Groove, ridge, inset, outset şeklide sıralanabilir. W3Schools ile kenarlıkların kullanımı hakkında detaylı bilgi alabilirsiniz; CSS Border

Bir örnek daha verip kenarlıklar konusunu bitirelim,
.sidebar h2 {
border:3px double #000000;
margin:0;
padding:0 1em;
line-height:1.5em;
}

yukarıdaki kodda görebileceğiniz gibi çizgi kalınlığı arttırıldı ve double kenarlık çizgi tipi kullanıldı. Böylece, alttaki görüntü elde edildi;

Sidebar Başlık Düzenleme - Arka Plan Renk Ekleme

Sidebar başlıklarınızın arka plan renklerini değiştirmek isterseniz, alttaki kodu kullanabilirsiniz;

.sidebar h2 {
background:#00FF99;
margin:0;
padding:0 1em;
line-height:2em;
}

Kırmızı ile renklendirilmiş kısma istediğiniz renk kodunu yazarak farklı renkler kullabilirsiniz. Renk kodlarını öğrenmek ve farklı renkler tasarlamak ya da karıştırmak için sizlere Color Blender sitesini öneririm. Farklı renk kodlarını keşfetmek için; Keşif Aracı da kullanılabilir. Farklı önerileri olanlarda yorumlar kısmında belirtebilir.


Blogger Sidebar Başlık Düzenleme - Başlıkların Arka Planına Resim Ekleme

Sidebar başlık alanına arka plan resmi eklenebilir. Bunun için öncelikle kendi tasarımınız olan bir resmi ya da başlık arka planı olarak kullanılabilecek bir resmi tinypic.com, photobucket.com gibi yükleyici sitelere yükleyin ve adresini kopyalayın. Ardından alttaki kodda URL-ADRESI kısmına kopyaladığınız resim linkini yapıştırın.
.sidebar h2 {
background:url(URL-ADRESI)no-repeat;
margin:0px;
padding:0px 20px 0px 30px;
line-height:60px;
}

Yukarıdaki koda resim linkinizi yapıştırdıktan sonra kodu temanıza ekleyin. Örnek olarak yüklediğim resim 220 genişlik ve 60 yüksekliğe sahip. Tasarlayacağınız resimlerde sizler de resim genişliğinizin temanızın sidebar genişliğinden büyük olmamasına dikkat edin. Tasarladığınız resmin yüksekliğinizi yukarıdaki kodda mavi ile renklendirilmiş kısma yerleştirmeyi unutmayın.



      

0 yorum:

Yorum Gönder