Sayfa öğeleri (Gadgetler) blogger kullanıcıları için en önemli uygulamalardır fakat kullandığınız temada Gadget ekleyebildiğiniz alanlar sınırlı olabilir . Bu yazımızda sınırları aşacağız da denebilir :)
Ben işin mantığını anlatmaya çalışacağım siz bu yolu kullanarak çok harika şeyler yapabilirsiniz .
İşin mantığı <b:section kodunu kullanmak . Bu kod blogger altyapısında gadget alanı anlamına geliyor . Bu kodu kullanabilmemiz için öncelikle css kodlarında bir tanımlama yapmamız gerekiyor . Ben basitinden bir tanımlama örneği vereyim ;
Öncelikle işlemlere başlamadan önce Widget Şablonlarını Genişlet kutucuğunun işaretli olduğundan emin olun .
Öncelikle işlemlere başlamadan önce Widget Şablonlarını Genişlet kutucuğunun işaretli olduğundan emin olun .
#denememenu {float:center;width:468px;background: #fff;}Bu kısımda biraz sonra ekleyeceğimizin gadget alanının genişlik ve arka plan ayarlarını belirttik . En önemlisi kullanacağımız <b:section koduna vereceğimiz id isminin ne olacağını (denememenu) belirttik .
Css kısmına eklediğimiz bu kod sayesinde artık sayfamızda istediğimiz yere alanımızı oluşturabiliyoruz . Şöyle ki ; alanımızı oluşturmak istediğimiz yere (Kodlar arasında) aşağıdaki kodları yerleştiriyoruz .
<b:section class='denememenu' id='denememenu'></b:section>Sayfamızı kaydetmeden önce Önizleme yapmayı unutmuyoruz .
İlk kısımda verdiğim css kodlarını ekledikten sonra ikinci kısımdaki b:section kodunu deneme yanılma yoluyla istediğiniz alana ekleyebilirsiniz . Direk olarak kodu şuraya ekleyin ya da buraya ekleyin diyemiyorum çünkü her temaya göre kodlar farklı oluyor .
Şimdi dilerseniz herkesin işine yarayabilecek bir örnek yapalım .
Temanın en alt kısmına iki bölmeli Gadget alanı oluşturalım .
Öncelikle alt kısımı (Footer) ikiye böleceğimiz için iki tane b:section kodu kullanacağız .Bu demek oluyor ki iki tane de css kodu kullanacağız .İşlemlere geçelim .
Aşağıdaki kodu buluyoruz
]]></b:skin>Öncesine ekliyoruz .
#altfooter {float:left;width:475px;height: 200px;background: #fff;}#altfooter2 {float:right;width:475px;height: 200px;background: #fff;}Alt bölümü ikiye ayıracağımız için iki tane css kodu kullandım , iki tane de b:section kodu kullanacam . Benim temanın genişliği tam olarak 950 pixel olduğu için css kodlarının birinde 475 , diğerinde de 475 var . İkiye böldüm anlayacağınız :) Ayrıca float yani yer bilgisinde de birinde right (sağ) , diğerinde left(sol) yazıyor . Biri sağa dayalı , diğeri sola .
Şimdi ise sıra diğer kodumuzu eklemeye geldi .
Aşağıdaki kodu buluyoruz .
<div id='footer'>Ekleyeceğiniz kod footer yani en dipte olacak hata almayana kadar deneyin en temizi .
Genelde değişmez bu kod fakat siz yine de bulamazsanız sadece footer olarak aratabilirsiniz .
Bu kodun üstüne ya da altına (Koda göre değişir)
<table border='0' width='100%'>
<tr>
<td><b:section class='altfooter' id='altfooter'/></td>
<td><b:section class='altfooter2' id='altfooter2'/></td>
</tr>
</table>
Kodlarını ekliyoruz .Temayı kaydetmeden önce Önizleme yapmayı unutmuyoruz . Eğer bir problem çıkmadıysa Önizleme yapınca temayı kaydedin ve olmuş mu bir bakın :)
Css bilginiz varsa çok daha farklı şeyler üretebilirsiniz mutlaka . Sorun çıkarsa büyük ihitmal b:section kodlarında çıkacaktır , css de sorun çıkmaz diye düşünüyorum . Sorunlarınızı çözmek için b:section kodlarının yerlerini değiştirerek çözüm bulmaya çalışın .
Şimdilik bu kadar .Sağlıcakla kalın .
