Header Yapımı

Header bölgesi genellikle logo, duyuru veya reklam alanı gibi bölmelerden oluşur. Ben bu bölümde sadece bloga ait olan logonun yer almasını istiyorum. Öncelikle bir tane logo oluşturacağım. Logo tasarımını GIMP 2 programı ile gerçekleştiriyorum. Logoyu 640x100 resim boyutlarında oluşturdum. Sonrasında logoyu ekleyeceğim sayfa üst bilgisi widget'ını eklemek için header section oluşturacağım.

Aşağıdaki kodları yukarıdaki resimde olduğu gibi yazıyorum.

<div class='container'>
   <div class='header-area'>
 <div class="row">
  <div class="col-sm-12">
          <b:section class='header' id='header'/>
  </div>
    </div>
   </div>
</div>

Section etiketine id olarak header ismini verdik. Sadece logo yer alacağı için widget kapasitesini 1 olarak sınırladık. Şimdi sıra logoyu eklemeye geldi. Öncelikle Yerleşim sekmesine girelim ve header katmanına gadget ekle linkine tıklayalım. Gadget yani widget olarak Sayfa Üstbilgisini seçelim. Resmi yükleyelim ve "başlık ve tanım yerine" gelmesini sağlayalım. Düzenlemeyi kaydet diyelim. Aşağıdaki resimde nasıl olduğunu görebilirsiniz.

Logomuz başarılı bir şekilde yüklendi. Ancak görünümünü düzeltmeliyiz o yüzden aşağıdaki gibi CSS kodu yazıyorum.

.header-area{
 background: rgba(255, 255, 255, 0.1);
  padding:10px; 
}
#header{
  display: table;
   margin: 0 auto;
}

Geriye son bir işlem kaldı. Eğer temayı mobil olarak görüntülerseniz logo resminin ekrana sığmadığını göreceksiniz. Bu durumu düzeltmek için tema kodu içerisinde <img expr:alt='data:title' expr:height='data:height' kodunu aratın. Bulduğunuz img etiketi içerisine class="img-fluid" sınıfını ekleyin, aşağıdaki resimde olduğu gibi.

Bu işlemlerden sonra header yapımını tamamlamış olduk. Aşağıdaki videodan son halini görüntüleyebilirsiniz. Sorularınızı ise aşağıdaki yorum bölümünden belirtebilirsiniz.

Bu yazıya ait koda ulaşmak için tıklayınız.