Blogger şablonunuzu kodlarla uğraşmadan, doğrudan panel üzerinden özelleştirmek ister misiniz? Birçok özel temada renk veya yazı tipi ayarlarını değiştirmek için her seferinde HTML/CSS kodlarına girmek zorunda kalıyoruz. Oysa Blogger'ın kendi "Tema Tasarımcısı" paneli üzerinden bu ayarları yönetmek mümkün.
Bu yazıda, Blogger şablonunuza kendi "Değişken Tanımlamalarınızı" (Variable Definitions) nasıl ekleyeceğinizi adım adım anlatıyorum.
Değişken Tanımlaması Nedir?
Blogger'da bir değişken oluşturduğunuzda, bu değişken Tema > Özelleştir > Gelişmiş sekmesinde bir seçenek olarak görünür. Böylece renkleri veya fontları kodlarla değil, görsel paneller üzerinden tek tıkla değiştirebilirsiniz.
1. Renk Değişkeni Oluşturma
Bir renk değişkeni oluşturmak için şablonunuzun <b:skin> etiketleri arasına şu satırı eklemeniz yeterlidir:
<Variable name="ozelRenk" description="Ana Renk Ayarı" type="color" default="#66bbdd" value="#66bbdd"/>
name: Değişkenin teknik adı (boşluk bırakmayın).
description: Panelde görünecek açıklama (boşluk bırakabilirsiniz).
type: Değişkenin türü (renk için "color").
default/value: Başlangıç renk kodu.
Kullanımı:
Artık CSS kısmında bu rengi kullanmak istediğiniz her yere şu formatı yazın: $(ozelRenk)
Örnek:
.kutu { background-color: $(ozelRenk); }
2. Yazı Tipi (Font) Değişkeni Oluşturma
Font ayarlarını panelden yönetmek için ise şu formatı kullanın:
<Variable name="ozelFont" description="Başlık Fontu" type="font" default="normal normal 16px Arial, Sans-serif" value="normal normal 16px Arial, Sans-serif"/>
Kullanımı:
CSS kısmında ilgili seçiciye şu satırı ekleyin: font: $(ozelFont);
Örnek:
font: $(ozelFont); }
Nasıl Uygulanır?
Blogger panelinizden Tema > HTML'yi Düzenle yolunu izleyin.
<b:skin>etiketinin içerisine, yani CSS kodlarınızın en üst kısmına yukarıdaki değişken kodlarını yapıştırın.Değişkenleri kullanacağınız yerlere
$(degisken_adi)şeklinde tanımlamaları ekleyin.Şablonu kaydedin.
Tema > Özelleştir > Gelişmiş sekmesine gidin. Artık kendi eklediğiniz ayarların panelde belirdiğini göreceksiniz.
Önemli Not: Değişken isimlerinde nokta kullanmak isterseniz (örneğin ana.renk) herhangi bir sorun olmaz, ancak isimlerde boşluk karakteri kullanmaktan kaçının. Ayrıca, CSS içerisinde değişkenleri mutlaka $() parantezi içinde kullanmayı unutmayın.
Bu yöntem sayesinde hem temanızı çok daha profesyonel bir yapıya kavuşturabilir hem de gelecekteki değişiklikleri saniyeler içinde yapabilirsiniz. Kodlarınızla uğraşmadan tasarımın keyfini çıkarın! renk, yazi tipi, tanimlama
Hiç yorum yok: