Blogger Sidebar Başlıklarına Icon Ekleme

Blogger Sidebar Başlıklarına Icon Ekleme

1. Sütunda yer alan Eklenti İsimlerini Bulma

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 ]]> 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.