Bu makalede, Blogger temalarını sıfırdan nasıl oluşturacağınızı öğrenmeye başlayacaksınız. Bu süreçte, hazır temalar kullanmadan tamamen kendi özgün tasarımınızı yapmayı hedefliyoruz. Ders serisinin sonunda, işlevsel, estetik ve mobil uyumlu bir Blogger temasına sahip olacaksınız.
Amaç:
- Blogger teması yapımıyla ilgili temel bilgileri öğrenmek.
- Blogger'da bir temanın hangi bileşenlerden oluştuğunu anlamak.
- Temel yapı taşlarını hazırlamak.
1. Blogger Tema Nedir ve Neden Kendi Temanızı Yapmalısınız?
Blogger teması, bir blogun genel görünümünü ve işlevselliğini belirleyen HTML, CSS ve XML kodlarının bir kombinasyonudur. Kendi temanızı yapmanız, blogunuzun diğerlerinden farklı olmasını sağlar ve özgün bir marka oluşturmanıza yardımcı olur.
Hazır temalar genellikle sınırlıdır ve tam istediğiniz gibi özelleştirme yapamayabilirsiniz. Ancak sıfırdan tema yaparak:
- İstediğiniz görselliği elde edebilir,
- Daha hızlı ve hafif bir tema oluşturabilir,
- Mobil uyumlu ve SEO dostu bir yapı tasarlayabilirsiniz.
2. Blogger Tema Yapımına Hazırlık
Temanızı yapmaya başlamadan önce bazı gereksinimleri gözden geçirmeniz gerekiyor:
HTML ve CSS Bilgisi:
Blogger temaları HTML ve CSS üzerine kuruludur. Bu yüzden temel düzeyde bu dilleri bilmelisiniz. Eğer bilmiyorsanız, bu konuları araştırabilirsiniz.Blogger Hesabınız:
Blogger temaları bir blog üzerinde test edilerek geliştirilir. Bu yüzden bir Blogger hesabınız olduğundan emin olun.Kod Düzenleyici:
Kendi temanızı yaparken kod yazmanız gerekecektir. Kullandığınız bir kod düzenleme programı (örneğin, VS Code, Sublime Text veya Notepad++) olduğundan emin olun.
3. Blogger Temasının Yapı Taşları
Bir Blogger teması aşağıdaki temel bileşenlere sahiptir:
HTML:
Blogun iskelet yapısını oluşturur. Header, footer, ana içerik ve widget alanları gibi bölümler HTML ile tanımlanır.CSS:
Blogun stilini belirler. Renkler, yazı tipleri, kenarlıklar ve arka planlar gibi görsel düzenlemeler CSS ile yapılır.XML:
Blogger'a özel etiketlerin ve işlevlerin kullanılmasını sağlar. Örneğin,<b:section>ve<b:widget>etiketleri Blogger'ın içeriği dinamik olarak yönetmesini sağlar.
4. İlk Blogger Tema Dosyanızı Oluşturmak
Bir Blogger teması oluşturmak için başlangıçta şu dosya yapısını kullanabilirsiniz:
xml<?xml version="1.0" encoding="UTF-8" ?>
<b:skin version="1.0">
<b:layout> <!-- Temanın düzeni burada tanımlanacak --> </b:layout> <b:widgets> <!-- Widget'lar burada yer alacak --> </b:widgets>
</b:skin>
Bu, bir Blogger temasının temel iskelet yapısını temsil eder. Buradaki b:layout ve b:widgets, Blogger'ın özel etiketleridir ve temanızın temel işlevlerini oluşturur.
5. Başlangıç İçin Temel Kodlar
Şimdi basit bir header (başlık) ve footer (alt bilgi) içeren temel bir tema iskeleti hazırlayalım:
xml<?xml version="1.0" encoding="UTF-8" ?>
<b:skin version="1.0"> <b:layout> <header> <h1>Blog Başlığı</h1> <p>Hoş geldiniz!</p> </header> <main> <h2>İçerik Alanı</h2> <p>Blog yazılarınız burada görünecek.</p> </main> <footer> <p>© 2024 Blog Adı. Tüm Hakları Saklıdır.</p> </footer> </b:layout> </b:skin>
Bu temel düzen, başlık, içerik alanı ve alt bilgi bölümlerini içerir. İlerleyen derslerde bu yapıyı genişletecek ve detaylandıracağız.
Öğrendiklerinizi Test Edin
- Bu kodları bir Blogger teması olarak yükleyin ve çalıştığından emin olun.
- Temanın hangi bölümlerinin göründüğünü ve nasıl düzenlenebileceğini gözlemleyin.
Bir Sonraki Derse Hazırlık
Bir sonraki derste:
- Blogger temalarında widget ve dinamik içerik eklemeyi öğreneceğiz.
<b:widget>ve<b:section>etiketlerini nasıl kullanacağımızı göreceğiz.
Şunları yapmış olduğunuzdan emin olun:
- Blogger hesabınıza giriş yapıp test blogunuzu hazırladınız mı?
- Temel HTML yapısını ve Blogger’a özel etiketleri anladınız mı?
- Kodları yükleyip test ettiniz mi?
Tüm bu adımları tamamladıysanız, bir sonraki derse geçebilirsiniz. 😊
