Blogger Sütun Başlıklarına Simge Ekle

Blogdaki blogger yardım konularına göz attığınızda, neredeyse kendi blog temanızı yapabilecek kadar ön bilgiye yer verildiğini görebilirsiniz. Muhakkak eksikler vardır ancak temel hatları ile temada yer alan başlık alanı, sütun, yazı alanı ve sayfa altlığı hakkında yazılara yer vermeye çalıştım. Sizlerin tema düzenleme hakkında eksik kaldığını düşündüğünüz konular varsa, önerilerinizi bekliyorum.

Daha önce, Blogger Sidebar Başlık Düzenleme konusuna bir nevi ek olarak blogger sütun başlıklarına simge ekleme konusunu ele almanın faydalı olacağını düşünüyorum.

Blogger sütun başlıklarına simge eklemek için, öncelikle sütunlar kısmında yer alan eklentilerin isimlerini ve temada tanımlanan id isimlerini ögrenmek gerekiyor. Temanızda sütun için belirtilen isim sidebar'dır. Sütun, sidebar ile isimlendirilebileceği gibi sidebar wrapper vb. isimlerle de isimlendirilmiş olabilir. Kullandığınız temaya göre değişiklik gösterecektir. Alttaki kodlar sütunlar da yer alan eklentilerin temanızda nasıl kodlandığını göstermek için hazırlandı. Sizin de bulacağınız kod benzer bir kod dizini olacak.

Blogger Sidebar Başlıklarına Icon Ekleme

1. Sütunda yer alan Eklenti İsimlerini Bulma

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Hakkımda' type='Profile'/>
<b:widget id='Label1' locked='false' title='Etiketler' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Arşivi' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='İzleyiciler' type='Followers'/>
<b:widget id='HTML1' locked='false' title='Resim' type='HTML'/>
</b:section>
</div>

Kodda kırmızı renkler eklenti id adını mavi renkler de blogunuzda görüntülenen adını belirtmektedir. Profile1 profil, Label1 etiket, BlogArchive1 Arşiv, Followers1 İzleyiciler ve HTML1 HTML/Javascript eklentilerini belirtiyor.

2. Eklenti İsimlerine Göre CSS Kodları düzenleme
Yukarda bulmuş olduğumuz id eklenti isimlere özel CSS kodları düzenleyeceğiz. Bu kodlar sayesinde sütunlarda yer alan herbir eklenti için farklı simge kullanılacak.

Örnek olarak ele alınacak eklentiler şu şekildedir;
Profile1 , Label1 , BlogArchive1, Followers1, HTML1

Her bir eklenti için alttaki gibi birer CSS kodu oluşturulacak ve parantez içleri {} kullanıcı tarafından kişiselleştirilecek.

#Profile1 h2{}
#Label1 h2{}
#BlogArchive1 h2{}
#Followers1 h2{}
#HTML1 h2{}

Denemek isteyenler için, örnek CSS kodlarını şu şekilde sıralayabiliriz;

#Profile1 h2{
background:transparent url(http://i48.tinypic.com/bhdi0o.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:15px;
}

Yukarıdaki kod ile Profil bilgimizi gösteren eklenti başlığında kırmızı ile renklendirilmiş olan yere yapıştıracağınız icon adresi görüntülenecektir. Icon, başlığa göre havada ya da altta olabilir. Temanıza göre değişiklik gösterecektir. Padding değerlerini değiştirerek simgenin yerini tam olarak düzenleyebilirsiniz.

3. Temaya Blogger Sütun Başlıklarına Simge Ekle için Gerekli CSS Kodu Ekleme
Uygulamayı önce test blogunuzda denemenizi tavsiye ederim. Profil eklentisine simge ekleme yönteminden sonra arşiv, hakkımda ve diğer eklentiler içinde simge ekleme için aynı CSS kodlarını resim linklerini değiştirerek kullanmak mümkün;

#Profile1 h2{
background:transparent url(http://i48.tinypic.com/bhdi0o.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:10px;
}
#Label1 h2{
background:transparent url(http://i46.tinypic.com/fbygz5.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:10px;
}
#BlogArchive1 h2{
background:transparent url(http://i47.tinypic.com/v5gv9t.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:10px;
}
#HTML1 h2{
background:transparent url(http://i48.tinypic.com/15dv38x.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:10px;
}

Yukarıdaki kodda mavi ile renklendirilmiş kısımlara istediğiniz simge (icon) adreslerini yapıştırın. Daha sonra temanızda ]]></b:skin> kodunun hemen üstüne tüm kodu yapıştırın.

Blogger Sütun Başlıklarına Simge Eklemek için size lazım olacak simgeleri en iyi bedava Icon sitelerinden bulabilirsiniz.

Kolay Gelsin...