Blogger Sidebar Başlık Düzenleme

Blogger yardım konularında en son 'CSS ile Blogger Başlık Düzenleme' konusu hakkında bir yazı yazmıştım. Bu yazıdan sonra sidebar başlık düzenleme hakkında da yazmak şart oldu. Birde sidebar başlık değişiklikleri hakkında yardım isteyen arkadaşlar olunca konuyu hemen ele almak istedim.

Blogger sidebar başlıkları blogu ilk oluşturduğunuzda çok sadedir. Görsel olarak yetersizdir. Ancak, birçok hazır temada farklı sidebar başlıkları kullanılır. Siz de benzer sidebar başlıkları nasıl düzenlenir merak ediyorsanız, yazının devamını okumanızı tavsiye ederim.

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.

Temanızı görünütlediğinizde başlık yazıları istediğiniz yerde değilse padding değerleri ile başlıkların konumunu değiştirebilir, arka plan resminize uygun hale getirebilirsiniz. Sonuç olarak alttaki örnek resimdeki gibi sidebar başlık alanları oluşturabilirsiniz;

Sidebar başlık düzenleme konusu hakkında sizlere kısa ipuçları vermeye çalıştım. Gerisi, sizlerin hayal gücünüz ile bilginizin birleşiminde saklı... Ancak yazıda anlaşılmayan kısımlar varsa ya da merak ettiğiniz ekstra konular varsa, yorumlara yazabilirsiniz.

Kolay gelsin...