Blogger Tema Tasarımını Anlamak: HTML Yapısı Üzerinden Pratik Rehber

1. Genel Yapılar ve Bölümler

id="main"

• Açıklama: Bu, ana içerik alanını tanımlar. İçerik widget'larının yerleştiği ana bölümdür. main öğesi, sayfanın ana odak alanıdır ve blog yazılarının görüntülenmesini sağlar.

class="content-outer"

• Açıklama: İçeriğin dış sınırlarını belirler. Bu sınıf, tasarımda içerik kutusunun dış çerçevesi olarak işlev görür. CSS’de içeriğin genişliğini, hizalamayı ve kenar boşluklarını kontrol eder.

class="post-outer"

• Açıklama: Blog yazısının dış çerçevesini tanımlar. Her yazı için kullanılan kapsayıcı bir sınıf olup, yazıyı diğer öğelerden ayırır.

id="sidebar-right-1"

• Açıklama: Sayfanın sağ tarafındaki kenar çubuğunun bir parçasıdır. Genellikle widget'lar ve menüler için kullanılır. Blog temasında bu id, sağ sidebar'ı (kenar çubuğu) temsil eder.

2. Widget’lar ve Özelleştirmeler

id="Header1"

• Açıklama: Sayfanın üstbilgi kısmını kontrol eder. Bu widget, blogun başlığını ve belki de açıklamalarını gösteren bir bölüme işaret eder. Header1, genellikle sayfa başlığı için kullanılan bir widget’tır.

id="BlogSearch1"

• Açıklama: Blog arama widget'ı. Kullanıcıların blog üzerinde arama yapmasını sağlayan formu içerir. Arama kutusu ve butonları bu widget içinde bulunur.

id="BlogArchive1"

• Açıklama: Blog arşivi widget’ı. Ziyaretçilere eski yazıları görüntüleme imkânı tanır. Bu widget genellikle tarihsel olarak düzenlenmiş içeriklere erişimi sağlar.

id="FeaturedPost1"

• Açıklama: Öne çıkarılmış bir yazıyı göstermek için kullanılan widget. Blog yazılarından birini ön plana çıkarır ve genellikle ana sayfanın en üst kısmında yer alır.

id="Followers1"

• Açıklama: Blogun takipçi widget’ı. Takipçilerin sayısını ve blogu takip eden kullanıcıların profillerini görüntüler.

3. Yazı ve İçerik Alanları

class="post-title"

• Açıklama: Her blog yazısının başlığını tanımlar. Yazının başlığı bu sınıf altında stilize edilir ve blog sayfasında görünür.

class="post-body"

• Açıklama: Blog yazısının içerik kısmını tanımlar. İçeriğin metni bu sınıf aracılığıyla düzenlenir ve genellikle yazının ana kısmını oluşturur.

class="post-footer"

• Açıklama: Yazının alt kısmını tanımlar. Yorumlar, etiketler ve paylaşım butonları gibi öğeler burada bulunur.

4. Yorum ve İletişim

class="comments"

• Açıklama: Blog yazılarına yapılan yorumları içerir. Yorumların listesi bu sınıf altında düzenlenir.

id="comment-form"

• Açıklama: Yorum formunun yer aldığı bölüm. Ziyaretçilerin yazılara yorum bırakmasını sağlar.

class="comment-link"

• Açıklama: Yorumlara dair bağlantıların stilini tanımlar. Bu sınıf, yorum bağlantılarını (yorum sayfasına gitmek için) stillendirir.

5. Sayfa Yapısı ve Navigasyon

class="blog-pager"

• Açıklama: Sayfalar arası geçişi sağlayan gezinti (pagination) bölümüdür. blog-pager sınıfı, kullanıcıların blogda gezinti yaparken eski ve yeni sayfalara geçiş yapmalarını sağlar.

class="home-link"

• Açıklama: Anasayfaya yönlendiren bağlantıyı temsil eder. Kullanıcıyı anasayfaya götürür.

class="post-share-buttons"

• Açıklama: Sosyal medya paylaşım butonlarının bulunduğu sınıf. Yazılar sosyal medyada paylaşılabilir hale gelir.

6. CSS Özelleştirmeleri

#layout .content-outer

• Açıklama: İçerik dış çerçevesinin stilini belirler. content-outer sınıfı içeriğin genişliğini, hizalamasını ve diğer düzenlemeleri belirler.

.column-center-outer

• Açıklama: Sayfanın ortasında yer alan içerik alanının dış çerçevesi. Bu sınıf, içerik sütununun dış sınırlarını tanımlar.

7. Dinamik Görünüm (Dynamic Views)

b:dynamicViews='true'

• Açıklama: Blogger teması için dinamik görünüm desteğini etkinleştirir. Dinamik görünümler, kullanıcıya sayfa yüklendikçe farklı düzenler sunar.

8. Kullanıcı Etkileşimi

b:if cond='data:post.allowComments'

• Açıklama: Bu, yazılara yorum yapılmasını kontrol eder. Eğer yorum yapılması izni varsa, yorum bölümü görüntülenir.

b:loop values='data:posts'

• Açıklama: Blog yazılarının döngüsü. Bu kod parçası, veritabanındaki blog yazılarının her birini döngüye sokarak kullanıcıya sunar.

Özet

id ve class etiketleri, her bir öğeyi tanımlayıp düzenlemeye imkan tanır. Blogger'ın temaya entegre ettiği bu yapılar sayesinde içerik, widget'lar ve sayfa yapısı rahatlıkla özelleştirilebilir. Blog yazıları, yorumlar, navigasyon menüleri ve sosyal paylaşım butonları gibi öğelerin her biri belirli sınıflar ve id'lerle tanımlanmıştır, bu sayede her öğe üzerinde farklı stiller ve işlevler uygulanabilir.