Blogger Gadget (Sayfa Öğesi) Alanı Oluşturma

Bu yazımda belki de herkesin daha doğrusu blogger kullanıcısı olan herkesin en çok yapmak istediği fakat bir türlü beceremediği bir özellikten bahsedeceğim . Bence blogger kullanıcıları için en önemli özellik .

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 .

#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 .