06 Mart 2010

sidebar-icon
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...
Yorum
umutyildirim dedi ki...
ben birşey öğrenmek istiyorum hani kod yazarken arka planı nasıl yaptın acaba ???
gez-ye-ic dedi ki...
Merhaba Sade, blogundaki yazılardan çok faydalandım, sıfırdan başlamıştım bu blog işine. Çok teşekkürler.
Başlangıçda bahsettiğin gibi, özellikle blog "style" hakkında pek çok konuyu ele almışsın. Benim arayıp bulamadığım, eğer gözümden kaçmıyorsa, "tüm yazılarımı alfabetik listeleme" konusu. Bunu yapmışşsın ama nasıl yapılacağını bahsetmemişsin gibi geliyor bana. Tarihe göre sıralı arşiv insanlara genelde, pek hitap etmiyor, bunun yerine alfabetik daha kullanışlı gibi geliyor bana. Bu konuyu da ele alabirsen sevinirim. Bundan sonra sıra, robots.txt, seo gibi konulara mı gelecek acaba? İyi günler
Sade dedi ki...
@umutyildirim: Arkaplan renkleri tamamen CSS kodları ile yapıldı.
@gez-ye-iç: Alfabetik yazıları elle yazdım. 4 farklı site haritası yönteminde belirtmiştim. Gözünüzden kaçmış olabilir. Tarih ve etiketlere göre olan sıralama da işe yarar diye düşünüyorum.

Bu arada güzel sözler için teşekkürler. Ortada o kadar çok seo uzmanı varken iş bize düşmez. Kolay gelsin...
gez-ye-ic dedi ki...
Merhaba Sade,
Alfabetik sıralamayı manual yaptığınız yazısı gözümden kaçmış.
Ben, tüm yazıları alt alta sıralayan alternatif bir yöntem buldum ama alfabetik yapamadım.
Blog da gadget eklede, "recent post" gadgeti var. Bunu sidebara yükleyip , post sayısını oldukça büyük verince tüm yazıları sıralıyor. Fakat bunu nasıl sort layabilirim, onu çözemedim. Kodu buraya ekliyorum.


b:if cond='data:gadgetSnippet != ""'
data:gadgetSnippet/
b:else/
div class='widget-content'
b:if cond='data:nonSocialFragment != ""'
data:nonSocialFragment/
/b:if
/div
/b:if
b:else/
data:errorMessage/
/b:if



Javascript in sort() fonksiyonunu ile nasıl yapılır acaba? bir fikriniz olur mu?
İyi çalşmalar
Sade dedi ki...
üstad çok ısrar ediyorsan; sana şuan aklıma gelen en kısa yolu söylüyorum. Tarihlerine göre sırala yazılarını benim arşivdeki gibi al hepsini kopyala excel dosyasına at. İsimlerine göre sırala ordan kopyala alfabetik yazılarına yapıştır olsun bitsin. Farklı bir çözüm önerim var konusu da belli "4 Farklı Yöntem ile Site Haritası Oluşturma" ;)
casminella dedi ki...
Paylaşım için teşekkürler...
Sade dedi ki...
beğendiyseniz ne mutlu ;)
Mehmet San. dedi ki...
Gerçekten güzel bilgiler teşekkürler.
GÖK-TÜRK dedi ki...
Elinize sağlık yalnız bir sorum var...3 nolu başlıktaki kodları mavileri değiştirerek olduğu gibi ekledim ve oldu yalnız diğer başlıklar örneğin : takipçiler gibi bazıları burda yok ben de elle yazarak denedim ancak ilgili başlıkların yanında çıkmadı.Yazdığım sıra mı yanlış acaba ? Nerelere yazmalıyım ya da nasıl olmalı ? teşekkürler..
Sade dedi ki...
@Gök-Türk: İlgili eklentinin tanımlanmış isimleri önemli. 3 adımda fark edersen kırımız ile renklendirilen kısımlar bu isimlere işaret eder. İzleyeciler için Followers1 kodunu kırmızı yere yazmalısın. Diğer eklentilerden istediklerini yazarsan onlarında tanımlanmış isimlerini yazabilirim.
GÖK-TÜRK dedi ki...
Sanırım bunlar..Ben ilk tırnak içindeki isimleri yazıyorum ama olmuyor.
Siz yazarsanız eğer bu yeni yazdıklarınızı üstte verdiğiniz kodların neresine eklemem gerekiyor yani sıralama olarak onu da söylerseniz sevinirim.(Epey bir zamanınızdan çaldım kusura bakmayın..Acemilik işte anlayıncaya kadar sorup öğreneceğiz)
Sade dedi ki...
@Gök-Türk: Ne demek ayıpsın. Yardım edebileceğim bir konuysa ben herzaman hazırım. Hem hepimiz acemi sayılır, hiç kimse herşeyi bilemez ;)

Öncelikle sıralama önemli değil;
Takipçiler için 3. adımdaki kodun sonana şunu ekle;

#Followers1 h2{
background:transparent url(http://i47.tinypic.com/v5gv9t.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:10px;
}

Kullanmak istediğin resmin adresini http://i47.tinypic.com/v5gv9t.jpg yerine yapıştır. Bu kadar ;)
GÖK-TÜRK dedi ki...
Çok teşkkür ediyorum...Başardık sonunda...Elinize,emeğinize sağlık...
Adsız dedi ki...
merhaba sitenizdeki son yazılar kısmını nasıl yaptınız birde destek birimindeki şeyler ne işe yarıyor onları koyunca ne oluyor ve nerden koyabiliriz çok soru sordum yeniiyimde:)
Adsız dedi ki...
sade sen son yazılarım kısmına koymuşsun çok güzel olmuş da son yazılar kısmını biz naıl koyabiliriz arama yaptım ama bulamadım burda yardımcı olabilirmisin acaba
Mint Share dedi ki...
Öncelikle çok güzel bir konuya değinmişsiniz benim sorum şu ikon yerleştirdik peki arka planı nasıl değiştiricez. Ben ikon ekleyince "sidebar h2" atadığım başlık resmi gözükmüyor sadece ikon gözüküyor.

Benim istediğim ise ikon'u yerleştirmek arka planı'da değişik renklerde göstermek bu nasıl olacak? background'da sadece ikon yerleştiriyoruz bu yüzden arkaplan rengini atayamıyorum yada border-left ile ikonu atasatk background ile arkaplan seçsek olur mu. Yardımcı olursanız sevinirim.
duyguLU.. dedi ki...
paylaşım için teşekkürler..yaptım walla:)
zCODER Kaanz dedi ki...
PROGRAM KODLAMA HAKKINDA BİLGİ İPHONE VS BİLGİ UYGULAMA BENİM SİTEYE UĞRAYIN DERİM SİZE
Adsız dedi ki...
ziyaretlerinizi bekliyorum....

http://bugunkihaber.blogspot.com/