Ders 2: Blogger Temasına Widget ve Bölüm Eklemek

Bu derste, Blogger temalarına widget (araç) ve bölümler eklemeyi öğrenerek temalarınızı daha işlevsel hale getireceğiz. Blogger, widget sistemi sayesinde dinamik ve özelleştirilebilir içerikler sunar.

Amaç:

• Blogger’da section ve widget kavramlarını öğrenmek.
• Temaya dinamik içerik alanları eklemek.
• Blogger araçlarını özelleştirmeyi anlamak.

---

1. Widget ve Section Nedir?

Section (Bölüm):

Bir temada, belirli bir içerik alanını temsil eder. Örneğin, header (başlık), sidebar (yan panel) ve footer (alt bilgi) bölümleri, birer section olarak tanımlanır.

Widget (Araç):

Blogger’ın sunduğu dinamik içerik bloklarıdır. Örneğin, bir blog arama kutusu, etiket bulutu veya popüler gönderiler birer widget’tır. Bu araçlar, kullanıcıların temayı kolayca özelleştirmesine olanak tanır.

---

2. Blogger’da Section ve Widget Kullanımı

Bir section (bölüm) oluşturmak için <b:section> etiketini kullanırız. Bu bölüm içerisine widget eklemek için ise <b:widget> etiketi yerleştirilir.

Temel Kod Yapısı

xml

<b:section id='header' class='header-section' showaddelement='yes'> <b:widget id='Header1' type='Header' title='Blog Başlığı' /> </b:section>

• id: Bölümün veya widget’ın kimliğini belirler. Her bölüm ve widget için benzersiz olmalıdır.
• class: CSS ile özelleştirmek için sınıf adı verir.
• showaddelement: Kullanıcıların yeni widget ekleyip ekleyemeyeceğini belirler (yes veya no).
• type: Widget türünü belirtir (örneğin, Header, HTML, PopularPosts).
• title: Widget başlığıdır.

---

3. Örnek Tema Bölümleri

Header (Başlık Bölümü)

Bir header bölümü ve bu bölümde bir başlık widget’ı:

xml
<b:section id='header' class='header-section' showaddelement='no'> <b:widget id='Header1' type='Header' title='Blog Başlığı' /> </b:section>

Sidebar (Yan Panel)

Bir yan panel bölümü ve örnek bir HTML widget:

xml

<b:section id='sidebar' class='sidebar-section' showaddelement='yes'> <b:widget id='HTML1' type='HTML' title='Hakkımızda'> <content><![CDATA[ <p>Bu blogda yer alan içerikler hakkında bilgi alın.</p> ]]></content> </b:widget> </b:section>

Footer (Alt Bilgi)

Bir footer bölümü ve içinde popüler yazılar widget’ı:

xml

<b:section id='footer' class='footer-section' showaddelement='yes'> <b:widget id='PopularPosts1' type='PopularPosts' title='Popüler Gönderiler' /> </b:section>

---

4. Önemli Detaylar

1. Widget Türleri: Blogger birçok hazır widget türü sunar. Bazı örnekler:

   • Header: Blog başlığı ve açıklaması.
   • HTML: Özel HTML içeriği eklemek için.
   • PopularPosts: En çok okunan yazılar.
   • BlogArchive: Arşiv widget’ı.

2. Dinamiklik: Widget’lar Blogger arayüzünden kolayca düzenlenebilir, taşınabilir ve silinebilir.

3. CSS İle Stil Verme: Section ve widget’lara CSS ile özel görünümler kazandırabilirsiniz.

---

Öğrendiklerinizi Test Edin

1. Header, sidebar ve footer bölümlerini içeren bir tema iskeleti oluşturun.
2. Her bölümde en az bir widget ekleyin ve çalıştığını kontrol edin.
3. Blogger kontrol panelinden eklediğiniz widget’ları düzenleyin.

---

Şunları Şunları Yapmış Olun ve Öğrendiğinizden Emin Olun:

• Section ve widget yapılarını anladınız mı?
• Dinamik widget eklediniz mi?
• Blogger’da widget’ları düzenlemeyi test ettiniz mi?

Tüm bunları başarıyla gerçekleştirdiyseniz, Ders 3’e geçmeye hazırsınız! 😊