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 != ""'>
<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 != ""'>
<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 != ""'>
<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.
0 yorum:
Yorum Gönder