Blog başlığı (header’ı) düzenlemek

Blog’unuzun linki yazılarak blog’uğunuza girildiğinde web tarayıcısı, sayfayı yukarıdan aşağı ve soldan sağa doğru yükleyeceği için  ilk görüntülenecek bölüm blog başlığınızın ve blog tanımızın bulunduğu bölüm olan header dır.

Durum böyle olunca blog başlığınızın önemi de artıyor blogger da barındırılan blog'ları gezdiğinizde içlerinden çok başarılı blog başlığına sahip olanlarını görmek mümkün fakat çoğu blog için bu durum söz konusu değil.

Blogger’ın en güzel taraflarından biriside çoğu işlemi bir kaç tıklama sayesinde kolayca yapabilmeniz. Örnek verecek olursak, blog başlığınızın (header’ın) arka planı olarak hazırladığınız görseli , sayfa öğeleri bölümünde kolayca değiştirebilmeniz.

Eğer blog başlığınızın arka planını olarak hazırladığınız bir görseli kullanmak gibi basit bir işlemle kalmayıp, biraz daha ileriye giderek blog başlığınızın yanında arama kutusu,rss aboneliği veya reklam yayınlayabileceğiniz farklı bölümler de oluşturmak istiyorsanız, blogger kodlar üzerinde değişiklik yapabilme imkanını da size sunuyor.

Blog başlığına ait kodları düzenleyebilmeniz öncelikle bu kodların hangisi olduğunu bilmeniz gerekiyor her şablonda bu kodlar farklı isimlerle tanımlanmış olsa da yapacağımız işlemler aynı olduğu için daha sonra kendi şablonunuzda blog başlığınıza ait kodları bularak yaptığımız işlemleri tekrarlayabilirsiniz.

Genellikle “header” diye tanımlanan bu kodları daha kolay bir şekilde bula bilmek için bilgisayarınızın klavyesinde bulunan CTRL ve F tuşuna bastıktan sonra açılan arama formunda aratın.

Kendi şablonumda “header” diye arattığımda aşağıdaki ekran görüntüsünde bulunan kodlar çıkıyor.

 

Bu kodların tanımanız ve ne işe yaradığını bilmeniz yapacağınız işlemleri kolaylaştıracaktır.

Not: Kullandığınız şablon blogger’ın şablon tasarımcısını kullanarak düzenlediğiniz bir şablonsa blog başlığına ait kodlar <header> diye başlayıp </header> diye bitebiliyor kodlarınız bu şekildeyse yapacağımız işlemleri bu bölümde uygulayacaksınız.

1. Adım HTML kodlarını düzenleyin.

Hangi kodları düzenleyeceğinizi gördükten sonra yapacağımız işlemlere başlayabiliriz bizim amacımız header bölümünde iki farklı bölüm oluşturmak olduğu için <div id=’header-wrapper’> ile başlayan bölümden başlayarak resimde görülen son </div> kadar olan bölümü siliyorum ve aşağıda bulunan kodları ekliyorum.

<div id='header-wrapper'>

<div class='header-left'> <h1> Blog’uğunuzun linki buraya   </h1> </div>

<div class='header-right'> Buraya  arama kutusu,rss aboneliği veya reklam kodlarını ekleyebilirsiniz   </div>

    </div>

             

Yukarıda yeşille renklendirdiğim <h1> ile başlayıp </h1> ile kapanan kodlar blog başlığına ait kodlar buraya blog’uğunuzun linkini ve adını yazabileceğiniz gibi şsterseniz hazırladığınız bir görseli de kullanabilirsiniz.

Blog başlığınızın link şeklinde olmasını istiyorsanız, aşağıdakine benzer bir link oluşturup h1 tanımının içine yerleştirin.

<a href='http://blogadınız.blogspot.com' > Blogunuzun adı</a>

             

Kendi hazırladığınız bir görseli kullanmak isterseniz görselinizi Picasa web albümlerine yükledikten sonra linkini alıp aşağıda bulunan kodlarda gelmesi gereken yere yerleştirdikten sonra kullanabilirsiniz.

<a href='http://blogadınız.blogspot.com' > <img title="blogunuzun adı" src='http://resminizin-linki.com/></a>

             

Bu işlemlerin sonucunda blog’uğunuzda görüntülenecek blog başlığının HTML kodlarını  yerleştirmiş oluyoruz bundan sonraki adım bu kodları şekillendirecek olan CSS kodlarını düzenlemek.

2.Adım CSS Kodlarını değiştirin

CSS kodlarını düzenlemeye başlamadan önce aramada bulduğum blog başlığına(header’a) ait kodları silip aşağıda bulunan kodları ekliyorum.

#header-wrapper{ 
overflow:hidden; 
width:100%; 
height:100px;

  text-align: center;

} 
.header-left{

float:left; 
width:400px; 
height:100px; 
text-align: center; 
padding:20px;

border:1px solid #000; 

}

.header-right{ 
float:right; 
width:400px; 
height:100px; 
padding:20px;

text-align: center;

border:1px solid #000; 

}

CSS kodlarını da kaydettikten sonra ön izleme yapabilir veya kaydedip yaptığınız işlemleri görebilirsiniz.

CSS kodlarında yer alan .header-right  sağ bölümü .header-left sol bölüm oluyor.

bölümleri daha rahat ayırt edebilmeniz için border: 1px solid #000; diye bir kenarlık ekledim isterseniz daha sonra bu kodu silip kenarlıkları kaldırabilirsiniz.

bölümlerin boyutlarını da width değeriyle oynayarak değiştirebilirsiniz.