Blogger Üç Sütunlu Altbilgi (Footer) Gadget alanı Oluşturma

Çoğu temada mevcut olsa bile sitemizde her türlü blogcuyu düşünmek durumundayız. Sitenizin alt tarafında bulunan bu fazladan gadget alanları gerçekten çok işe yarıyor benim de kullandığım bu 3 sütunlu altbilgi alanını sitenize eklemek gerçekten çok kolay tek yapmanız gereken beni dinlemek :)

İlk olarak yapmanız gereken her zamanki gibi yönetim panelinden Şablon > HTML'yi Düzenle demek ve kodlarımıza ulaşmak. Buradan CTRL+F tuşlarını kullanarak ]]></b:skin> kodunu bulun. Bu kodun bir sıra üstüne aşağıda verdiğim kodları yapıştırın.

#lower {
       margin:auto;
       padding:0 0 10px;
       width:100%;
       background:#333434;
}
#lower-wrapper {
       margin:auto;
       padding:20px 0;
       width:960px;
}
#lowerbar-wrapper {
       border:1px solid #DEDEDE;
       background:#fff;
       float:left;
       margin:0 5px auto;
       padding-bottom:20px;
       width:32%;
      text-align:left;
      font-size:100%;
      line-height:1.6em;
      word-wrap:break-word;
      overflow: hidden;
}
.lowerbar {margin:0;padding:0;}
.lowerbar .widget {margin:0;padding:10px 20px 0;}
.lowerbar h2 {
       margin:0 0 10px;
       padding:3px 0;
       text-align:left;
       color:#0084ce;
       text-transform:uppercase;
       font:bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.lowerbar ul {
       margin:0;
       padding:0;
       list-style-type:none;
}
.lowerbar li {
      margin:0 0 2px;
      padding:0 0 1px;
      border-bottom:1px dotted #ccc;
}

Bu işlemi gerçekleştirdikten sonra </body> kodunu bulun ve bunun bir sıra üstüne aşağıdaki kodları kopyalayıp yapıştırın.

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
/*-----3 sütun değil 4 sütun istiyorum diyenlere-----*/
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
/* -----Bitiş-----*/
<div style='clear: both;'/>
</div>
</div>

Son olarak unutmadan Şablonu Kaydet diyoruz. Gadget alanlarınız hazır artık istediğiniz gadgeti sitenizin alt kısmında kullanabilirsiniz.

ÖZELLEŞTİRME

Kendi şablonunuza göre Footer kısmını özelleştirebilirsiniz.

• Bütün eklentilerin arka plan rengini değiştirmek için background:#333434; bölümünü istediğiniz renk koduyla değiştirebilirsiniz.
• Boyut kısmında sorun yaşıyorsanız taşma veya küçük gelme gibi bir sıkıntınız var ise width:960px; bölümünü azaltabilir veya arttırabilirsiniz.
• Başlık renkleri hoşunuza gitmediyse hoşunuza giden rengin renk kodunu background:#fff; bölümüne yazarak değiştirebilirsiniz.
• Tek bir sütunun genişliğiyle oynamak isterseniz width:32%; ayarlarını arttırıp azaltabilirsiniz.
• Eğer sütun başlığının renkleri ile oynamak isterseniz color:#0084ce; renk kodunu değiştirmeniz gerekecek.
• Yazı boyut, renk ve şekil ayarını yapmak için font:bold 14px Arial, Tahoma, Verdana; ayarlamalarını yapmanız gerekir.
• H2 Title başlıklarının altında çizgi var bunu değiştirmek veya kaldırmak için border-bottom:3px solid #0084ce; bölümünü değiştirmeniz gerekiyor.
• Sütunların altındaki çizgileri kaldırmak, kalınlığı veya diğer özelliklerini değiştirmek için border-bottom:1px dotted #ccc; bölümünü ayarlamanız gerekiyor.

Özelleştirme kısmınında sonuna geldik özelleştirmeleri yapmak için sitemizde bulunan Renk Kodlarına Bakabilirsiniz.