1. Ders: CSS Nedir ve Blogger Temasına Doğru Şekilde Nasıl Eklenir?

1. CSS Nedir? (Blogger Gözünden)

CSS (Cascading Style Sheets), web sitelerinin görsel tasarımını, düzenini ve sunumunu kontrol eden dildir.

Blogger dünyasından bir benzetme yaparsak:

HTML/XML: Sitenizin iskeletidir. Yazıların nerede duracağını, resimlerin nerede listeleneceğini (yani ham içeriği) belirler.
CSS: Sitenizin kıyafetidir, makyajıdır. Yazının rengini, yazı tipini, arka plan geçişlerini, kutuların esnekliğini ve animasyonları yönetir.

Blogger'da CSS yazarken amacımız, temanın mevcut kodlarını şişirmeden, temiz ve saf (pure) kodlarla sitenin görünümünü tamamen değiştirmektir.

2. Blogger Temalarında CSS Nereye Yazılır?

Blogger, klasik HTML sitelerinden farklı olarak XML tabanlı bir şablon motoru kullanır. Bu yüzden CSS eklemek için temelde kullanabileceğimiz 3 farklı yöntem vardır. Her yöntemin kendine göre avantajları bulunur.

Yöntem A: Temayı Özelleştir Menüsü (En Güvenli ve Kolay Yol)

Blogger panelini terk etmeden, şablon kodlarına hiç dokunmadan CSS eklemenin en temiz yoludur. Buraya yazılan kodlar temanın orijinal yapısını bozmaz ve kolayca silinebilir.

Blogger Paneli > Tema sayfasına gidin.
Özelleştir (Customize) butonuna tıklayın.
Açılan sol menüden Gelişmiş (Advanced) > CSS Ekle (Add CSS) seçeneğine tıklayın.
Kodlarınızı buraya yazıp sağ alttaki Kaydet (Disket) ikonuna basın.

Yöntem B: XML Kodları İçine `<b:skin>` Alanına Ekleme (Profesyonel Yol)

Temanızın tüm stil kurallarının toplu durmasını istiyorsanız, kodları doğrudan temanın XML yapısındaki "CData" alanına gömebilirsiniz.

Tema > Düzenle (HTML Düzenle) seçeneğine girin.
Kod alanında herhangi bir yere tıklayıp CTRL + F ile şu etiketi aratın:

<b:skin><![CDATA[

Kendi yazdığınız CSS kodlarını, bu etiketin hemen altına (mevcut CSS kodlarının başladığı yere) ekleyebilirsiniz.
Kodların bittiği yer ise ]]> </b:skin> etiketidir. Kodlarınız bu iki sınır arasında kalmalıdır.

Yöntem C: `<style>` Etiketi ile `<head>` İçine Ekleme (Dinamik ve Esnek Yol)

Eğer <b:skin> alanıyla uğraşmak istemiyor, yazdığınız kodların en son kural olarak baskın gelmesini istiyorsanız, saf HTML <style> etiketini kullanabilirsiniz.

HTML Düzenle kısmında CTRL + F ile </head> etiketini aratın.
CSS kodlarınızı şu şekilde sarmallayarak </head> etiketinin hemen üzerine yapıştırın:

<style type='text/css'> /* CSS Kodlarınız Buraya Gelecek */ </style>

⚠️ Kritik Blogger Kuralı: Blogger XML yapısında CSS yazarken kodların içinde < veya > gibi karakterler doğrudan kullanılacaksa şablon hata verebilir. Bu yüzden harici stil çağrıları yerine kodları saf (pure) olarak bu alanlara yazmak en sağlıklı yöntemdir.

3. Pratik Uygulama: İlk CSS Kodumuzu Yazalım

Teoriyi pratiğe dökelim. Blogger sitenizdeki blog yazı başlıklarının rengini değiştirmek ve altına şık bir görünüm kazandırmak istediğinizi varsayalım. Blogger temalarında yazı başlıkları genellikle .post-title veya .post-title a sınıfı (class) ile temsil edilir.

Aşağıdaki kodu yukarıda bahsettiğimiz yöntemlerden birini seçerek (Örneğin Yöntem A veya C) sitenize ekleyin:

/* Blog yazı başlıklarını özelleştirme */
.post-title a {
color: #2c3e50; /* Başlık rengi */
text-decoration: none; /* Alt çizgiyi kaldır */
font-weight: 700; /* Yazıyı kalınlaştır */
transition: color 0.3s ease; /* Renk değişimi için yumuşak geçiş efekti */
}

/* Fareyle başlığın üzerine gelindiğinde (Hover durumu) */
.post-title a:hover {
color: #3498db; /* Başlık maviye dönsün */
}

Ders Sonu Ödevi

Şimdi kendi test blogunda bu yöntemlerden birini dene. Eğer başlıkların rengi değiştiyse, ilk adımı başarıyla tamamladın demektir!