Blogger Temalarında Arka Plan Resmi Değiştirme Rehberi

Blogger sitenizin görsel kimliğini güçlendirmenin ve ziyaretçilerinize benzersiz bir deneyim sunmanın en etkili yollarından biri, şablonunuza özel bir arka plan resmi eklemektir. Standart ve sıradan görünümlerden sıyrılarak blogunuzun nişine uygun bir atmosfer yaratmak, sitenizin akılda kalıcılığını artırır.

Bu rehberde, Blogger şablonunuza hem yerleşik tema tasarımcısını kullanarak hem de CSS kodları yardımıyla nasıl arka plan resmi ekleyeceğinizi adım adım ve en detaylı haliyle öğreneceksiniz.

Adım 1: Görselinizi Hazırlayın ve Optimize Edin

Arka plan resmi seçerken görselin kalitesine ve boyutuna dikkat etmelisiniz. Çok büyük boyutlu görseller sitenizin yüklenme hızını olumsuz etkiler.

  • Çözünürlük: En az 1920x1080 piksel çözünürlüğünde görseller tercih edin.

  • Optimizasyon: Görselinizi yüklemeden önce WebP veya JPEG formatına dönüştürerek sıkıştırın.

  • Görsel Barındırma: Eğer resmi kodla ekleyecekseniz, resmi Blogger paneline (örneğin boş bir taslak yazıya) yükleyerek kalıcı bir görsel URL'si elde edin.

Adım 2: Blogger Tema Tasarımcısı ile Ekleme (Kolay Yöntem)

Blogger'ın modern ve klasik temalarının birçoğu, kodlama bilmenize gerek kalmadan arka plan değiştirmenize izin verir.

  1. Blogger Paneline giriş yapın.

  2. Sol menüden Tema sekmesine tıklayın.

  3. Kullandığınız temanın altındaki Özelleştir butonuna basın.

  4. Açılan Blogger Tema Tasarımcısı menüsünden Arka Plan seçeneğine gelin.

  5. Arka Plan Resmi alanına tıklayarak bilgisayarınızdan seçtiğiniz görseli yükleyin veya Blogger'ın sunduğu hazır kategorilerden birini seçin.

  6. Resmin hizalamasını (ortala, döşe, esnet) ayarladıktan sonra sağ alttaki Kaydet (Disket) ikonuna tıklayın.

Adım 3: CSS Kodları ile Arka Plan Resmi Ekleme (Gelişmiş ve Esnek Yöntem)

Eğer özel bir XML şablon kullanıyorsanız veya tema tasarımcısı görseli tam istediğiniz gibi konumlandırmıyorsa, CSS kodları ile tam kontrol sağlayabilirsiniz.

  1. Blogger > Tema yolunu takip edin.

  2. Özelleştir butonunun yanındaki aşağı ok simgesine tıklayıp HTML'yi Düzenle deyin.

  3. Kod editörünün içine bir kez tıklayın ve CTRL + F tuşlarına basarak ]]></b:skin> kodunu aratın.

  4. Bulduğunuz ]]></b:skin> satırının hemen üzerine aşağıdaki CSS kodlarını kendinize göre düzenleyerek yapıştırın:

body {
  background-image: url('RESİM_URL_ADRESİNİZ');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

Not: Kodun içindeki RESİM_URL_ADRESİNİZ kısmına, ilk adımda hazırladığınız resmin bağlantı adresini yapıştırın.

  1. background-size: cover; komutu resmin tüm ekranı kaplamasını sağlar. background-attachment: fixed; ise sayfa aşağı kaydırılsa bile arka planın sabit kalmasına yardımcı olur.

  2. Sağ üstteki Kaydet butonuna basarak değişiklikleri uygulayın.

Blogger arka plan değiştirme, Blogger tema özelleştirme, Blog tasarımı

İlgili Olabilecek Diğer Başlıklar

  • Blogger Sitelerinde Tam Ekran Arka Plan Yapma Yöntemleri

  • En İyi Minimalist Blogger Temaları ve Tasarım İpuçleri

  • Web Sitelerinde Arka Plan Görseli Seçerken Dikkat Edilmesi Gerekenler

  • Blogger CSS Kodları ile Tema Görünümünü Özelleştirme Rehberi

  • Blog Yüklenme Hızını Artırmak İçin Görsel Optimizasyonu Nasıl Yapılır?

Konuyla İlgili Anahtar Kelimeler

blogger arka plan, blog tasarımı, blogger css ekleme, şablon özelleştirme, web tasarım, blogger tema düzenleme, arka plan resmi, görsel optimizasyonu, blogger kodları, site görselliği,