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.
blogger tema main yapımı
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.
blogger main
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.

2 yorum:

  1. Hocam iyi günler hem sitenizden, hem youtube kanalızdan blogger kodlama derslerini takip ediyorum. Footer videosunu hala bekliyorum. "https://i.hizliresim.com/vaonMD.jpg" yüklemiş olduğum bu resimde anasayfadaki bu resimleri nasıl küçülttünüz ve postlar arasındaki boşluğu nereden bırakabilirim, bir türlü bulamadım? "https://i.hizliresim.com/nbGL1a.jpg" buradaki postları nasıl yatay hizaladınız ve renkli logoları nereden edinebilirim? Yardım ederseniz çok mutlu olurum. Şimdiden teşekkür ederim.

    YanıtlayınSil
    Yanıtlar
    1. Merhabalar, son videonun yorumlar kısmında bu konu ile alakalı videolara devam etmeyeceğimi söylemiştim. Ana sayfadaki resimler ve yazı kısaltma, boşluk bırakma ile ilgili ayrıntılı bilgileri Google'da arama kısmına "Blogger Devamını oku" yazarak bulabilirsiniz. Yatay hizalama konusunda ise, ben o temayı yapalı çok oldu ve yaparken bayağı uğraşmıştım, çok fazla şey değiştirmiştim, nasıl yaptığımı tam olarak bende hatırlamıyorum. Iconları ben çizmiştim ancak önceden kullandığım "findicons" sitesine bakabilirsiniz.

      Sil