Main Yapımı

Blog yayınları içerik bölümünde görülecek. Tema yapısı iki sütunlu olacağı için sol tarafı blog yazıları için sağ tarafı ise sidebar bölgesi için ayıracağız. Öncelikle, content-area sınıf ismine sahip div etiketi yazıyoruz. Bu etiket içerisine ise Bootstrapta yer alan grid mantığını kullanacağımız için row sınıf ismine sahip div etiketi ekliyoruz. Main kısmı için sütunun 2/3'lük kısmını ayırıyoruz, kalan kısım ise sidebar bölgesine ait olacak. Kodları aşağıdaki resimde olduğu gibi yazıyorum.

Yazılan kodlar aşağıdaki gibidir.

<div class="content-area">
 <div class="row">
  <div class="col-sm-8 main-area"></div>
  <div class="col-sm-4 sidebar-area"></div>
 </div>
</div>

Blog yazılarının tema üzerinde görüntülenebilmesi için yazmamız gereken özel bir kod var. Aşağıdaki kodu, <div class="col-sm-8 main-area"> etiketi içerisine yazıyoruz.

<b:section class='content' id='content' name='Main' showaddelement='yes'>
 <b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'/>
</b:section>

Bu işlemden sonra "Temayı kaydet" diyoruz. Blogu görüntülerseniz aşağıdaki görüntü ile karşılaşacaksınız.

Artık blogumuzda yazdığımız yayınlar tema üzerinde gözükecektir. Şimdilik istenen durumu gerçekleştirdik. content-area seçicisine arkaplan rengi verelim.

.content-area{
 background: rgba(255, 255, 255, 0.5);
}

Bir sonraki yazıda blog yazısı görünümünü değiştireceğiz. Bu dersin sonuna kadar yazılan tema kodu için tıklayınız.