Bu blog, bir şablon üzerinde çalışıyor.
www.blogger.com üzerinden girdiğiniz bir arayüz var, burada blogu seçil, Tema->Şablon->Özelleştir->Html görüntüle diyerek kendi şablonunuzu oluşturabiliyorsunuz.
Blogger, şablonlarını yani web sayfanızı tamamen XML tabanlı bir dil kullanarak esnek bir yapıda oluşturmanızı sağlıyor. Aynı zamanda bir çok hazır şablon da var. Paylaşacağınız birşeyler varsa, hızlı biçimde paylaşabilirsiniz.
Ben zamanında blog yapısını hazır bir şablon kullanmış, ardından kendime göre değiştirmiştim. Bununle ilgili bir temelleri anlatan bir yazı da yazmıştım ama yayınlamamışım.
Sene oldu 2025, 2017'de taslaklarda kalan yazıyı AI yardımıyla düzenledim.
Şablonun Temel Yapısı
Bir Blogger template’inde en önemli yapı taşları; stil tanımlamalarını içeren <b:skin> bölümü, sayfa düzenini belirleyen <b:template-skin> ve dinamik içerikleri aktaran <b:include> ve <b:section> etiketleri olarak karşımıza çıkar. Şablon dosyası, HTML gibi başlar ve Blogger’a özgü etiketlerle devam eder. Şu şekilde yapılandırılır:
-
XML bildirimi, DOCTYPE ve gerekli xmlns nitelikleri eklenir.
-
<head> kısmında meta etiketleri, sayfa başlığı ve stil tanımlamaları yer alır.
-
<b:skin> ile CSS kodlarını, Blogger’ın dinamik verilerini kullanarak tanımlayabilirsiniz.
-
<b:template-skin> bölümü, sayfa genişliği, sütun düzeni gibi temel yapılandırmaları belirler.
-
<body> içinde, <b:section> etiketleri aracılığıyla header, içerik, yan paneller ve footer gibi bölümler oluşturulur.
Bu temel yapı sayesinde Blogger, blogunuzda dinamik olarak içerik oluşturur; gönderiler, yorumlar, arşiv listesi ve diğer widget’lar bu bloklar sayesinde ekrana gelir.
Kullanılan Özel Etiketler ve Fonksiyonları
Blogger template dilinde kullanılan özel etiketler her biri farklı bir işleve sahiptir:
-
<b:skin>: CSS stil tanımlamalarını içerir. Burada Blogger’ın değişken sistemi ile renk, font, arka plan gibi özellikler dinamik olarak ayarlanır.
-
<b:template-skin>: Sayfa düzenini, içerik genişliğini, kenar boşluklarını ve sütun yapılandırmasını belirlemek için kullanılır.
-
<b:include>: Blogger tarafından sağlanan dinamik içeriklerin (örneğin, Google Analytics kodu, profil bilgileri) veya şablon içinde tanımlı diğer dosya parçalarının çağrılması için kullanılır.
-
<b:section>: Sayfanın farklı bölümlerini (header, main content, footer gibi) tanımlar. Bu bölümler, blogunuzdaki widget’lar veya diğer içerik parçalarıyla doldurulur.
-
<b:widget>: Her bir bölümde, gönderileri, arşivleri, etiketleri, arama kutusunu ve profil bilgilerini dinamik olarak oluşturmak için kullanılan modüllerdir.
-
<macro:include>: Özellikle sütun düzeni gibi tekrar eden yapıların gruplandırılması için kullanılır.
Bu etiketler Blogger’ın sunucuları tarafından işlenir; blogunuzda dinamik olarak veri çekilir ve oluşturulan şablon, ziyaretçilere yayınlanır.
Template Hazırlarken Dikkat Edilmesi Gerekenler
Template hazırlarken aşağıdaki noktalara dikkat etmek önemli:
-
Kod Düzeni ve Temizlik: Şablon dosyası, XML olduğu için doğru biçimlendirilmiş ve kapatılmış etiketlerden oluşmalıdır. Herhangi bir küçük hata bile şablonun çalışmamasına neden olabilir.
-
Responsive Tasarım: Mobil uyumlu bir şablon hazırlamak için <b:skin> içerisinde medya sorguları kullanarak veya Blogger’ın mobil sınıflarını (örneğin, body.mobile) göz önünde bulundurarak tasarımınızı optimize edebilirsiniz.
-
Dinamik Değişkenler: Blogger’ın sunduğu değişkenleri (örneğin, $(body.font), $(content.background.color)) kullanarak blogunuzun stilini kolayca özelleştirebilirsiniz. Bu sayede, template ayarlarında yapacağınız değişiklikler tüm şablona otomatik olarak yansır.
-
Widget ve Bölümler: Template üzerinde hangi alanın hangi widget veya içeriği barındıracağını planlamak, kullanıcı deneyimi açısından kritik bir rol oynar. Gönderiler, yorumlar, arama kutuları veya etiket listesi gibi bölümlerin doğru yerleşimi, sayfanın kullanılabilirliğini artırır.
Blogger Template Hazırlama Süreci
Blogger template hazırlama süreci, planlamadan kodlamaya kadar birkaç aşamada ilerler:
-
Planlama: Blogunuzda hangi alanların bulunmasını istediğinizi belirleyin. Üst bilgi, ana içerik, yan paneller ve alt bilgi gibi bölümleri gözden geçirin.
-
Temel Yapıyı Oluşturma: XML bildirimini, DOCTYPE'u ve xmlns niteliklerini ekleyerek şablon dosyasını oluşturun. Ardından, <head> ve <body> bölümlerini yapılandırın.
-
Stil Tanımlamaları: <b:skin> etiketi altında CSS stil tanımlarınızı ve Blogger değişkenlerini kullanın. Renk, font ve düzen ayarlarını bu bölümde yapabilirsiniz.
-
Dinamik İçerik Entegrasyonu: <b:section> ve <b:widget> etiketleri ile blog gönderilerini, yorumları ve diğer dinamik içerikleri yerleştirin. Blogger’ın hazır widget’larını kullanarak işlevselliği genişletebilirsiniz.
-
Test ve Düzeltme: Hazırladığınız şablonu Blogger’da test edin. XML doğrulaması, hata mesajları ve sayfa düzeni üzerinde gerekli düzeltmeleri yapın.
Blogger template hazırlamak, blogunuzun görünümünü ve işlevselliğini tamamen kontrol etmenize olanak tanır. XML tabanlı yapı sayesinde, dinamik içeriği, stil ayarlarını ve widget entegrasyonunu tek bir dosyada yönetebilirsiniz. Bu giriş yazısı, şablonların temel yapısını, kullanılan özel etiketleri ve hazırlama sürecinde dikkat edilmesi gerekenleri özetliyor. Kendi template’inizi oluştururken adım adım ilerlemek, hata ayıklamak ve esnek düzenlemeler yapabilmek, blogunuzun benzersiz görünümünü yaratmada önemli bir adım olacaktır.
--
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version="2"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://www.google.com/2005/gml/b"
xmlns:data="http://www.google.com/2005/gml/data"
xmlns:expr="http://www.google.com/2005/gml/expr">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<b:include data="blog" name="all-head-content" />
<title>Merhaba Dünya</title>
<b:skin><![CDATA[
body {
font-family: sans-serif;
background: #fff;
color: #333;
text-align: center;
padding: 50px;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
p {
font-size: 18px;
}
]]></b:skin>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu, basit bir Blogger template örneğidir.</p>
</body>
</html>
