Blogger 3 Sütunlu Footer Alanı Oluşturmak

Blogger sahipleri için bloglarında widget yerleşimi için kullanabilecekleri bir alan olarak footer alanı değerlendirebilir. Bu footer alanına facebook hayran kutusu, iletişim formu gibi bir çok gatget eklemek mümkün hale gelecektir. Tüm bunları blogun kenar çubuğuna da ekleyebiliriz fakat kenar çubuğuna eklediğimiz diğer gadgetler ile bir karışıklığa neden olabileceğinden bazı gadgetleri footer alanına eklemek daha çok popüler hale gelmiş durumda. Günümüzde bir çok şablon geliştiricisi şablonlarında footer alanına bu gibi gadgetler eklemenin mümkün olduğu tasarımlar geliştirmektedir. Bazı blog şablonlarında ise footer alanına gadget ekleyebilmek mümkün değildir. Bu gibi şablonlara 3 sütunlu footer alanı nasıl eklenir bunu göstermeye çalışacağız.

Bazı bloglar için kenar çubuğunda kaldırılmak istenmeyecek eklentiler  ve gadgetler bulunabilir. Blogunuz için bunları kaldırmadan yeni gadgetler eklemek kenar çubuğunu oldukça karmaşık hale getirebileceğinden etkili bir footer alanı kullanmak için bu gibi 3 sütunlu footer alanı ekleyerek yeni gadgetlerinizi bu alanlara ekleyebilirsiniz.

Blogger Footer Alanına 3 Widget Alanı Oluşturmak

blogger footer alanına 3 widget alanı oluşturmak için yapılması gereken ilk şey Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle diyerek açılan kod sayfası üzerinde CTRL+F kombinasyonu yardımıyla </body> kodunu aratıp buluyoruz ve hemen üzerine aşağıdaki kodları yapıştırıyoruz.

<div id='footer-widgets-container'>
<div id='footer-widgets-containerback'>
<div class='clearfix' id='footer-widgets'>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec1' showaddelement='yes'>
  <b:widget id='HTML15' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec2' showaddelement='yes'>
  <b:widget id='HTML14' locked='false' title='Gallery' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box footer-widget-box-last'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'>
  <b:widget id='HTML13' locked='false' title='About' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</li>
</ul>
</div>
</div>
</div></div>
<div style='clear:both;'/>

Yukarıdaki kodları blogunuza ekledikten sonra  aşağıdaki kodları yine aynı kod sayfası içinde ]]></b:skin> kodunu bulup hemen üzerine yapıştırıyoruz.

NOT: Aşağıdaki css kodları üzerinden blogunuza uygun olacak değişiklikleri yapabilirsiniz.

#footer-widgets {
    padding: 20px 0 0 0;
}
.footer-widget-box {
    width: 300px;
    float: left;
    margin-left: 15px;
}
.footer-widget-box-last {
}
#footer-widgets .widget-container {
    color: #374142;
}
#footer-widgets h2 {
    font-family: inherit;
    text-shadow: none;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 4px solid #444444;
    padding-bottom: 10px;
}
#footer-widgets .widget ul {
    list-style-type: none;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#footer-widgets .widget ul li {
    padding: 0 0 9px 0;
    margin: 0 0 8px 0;
}
#footer-widgets-containerback {
    width: 980px;
    margin: auto;
}
#footer-widgets-container {
    background: #484848;
    border-top: 10px solid #66b381;
}
.footersec {
    color: #A1A6AF;
    font-size: 13px;
    line-height: 18px;
}
.footersec .widget {
    margin-bottom: 20px;
}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {
}
.footersec ul li {
}

Tüm bu işlemleri gerçekleştirdikten sonra şablonu kaydet diyerek şablonumuzu kaydediyoruz. Daha sonra Blogger Kontrol Paneli > Yerleşim kısmına geldiğimizde blogumuzun footer alanında widget ekleyebileceğimiz 3 adet alan oluşturulmuş olacaktır.