23 Mayıs 2015 Cumartesi

Blogger Footer Alanına Sütun Ekleme

Blogger'ın kullanıclarına sunmuş olduğu hazır temaların bazılarında Alt Kısım (Footer) sadece tek sütundan oluşmaktadır. Bu sütunları isteğe bağlı olarak çoğalma imkanımız var.


blogsayfası öge.png



Header, Main, Sidebar, Footer Nedir?
Bir blog sayfasını ana hatları ile belli başlı dört parçadan oluşur. Bu dört alan yukarıdaki resimde görülebileceği gibi; Header, Main, Sidebar, Footer şeklinde sıralanabilir.

Üst alan (Header) başlık alanı olarak kullanılır ve genelde blog hakkında bilgi içeriklidir. İçeriğin yayınlandığı alana yazı alanı (Main), genelde yazı alanının sağ ya da sol kısımda bazen ise her iki alanda yer alan sütunlara sidebar, ve alt kısma ise footer denir.

Blogunuza 3 sütunlu Footer Nasıl Eklenir?

Adım 1: Blogger'a kullanıcı adınız ve şifrenizle giriş yapın ve temanızın bir yedeğini alın.
Adım 2: Yerleşim > HTML'yi Düzenle'ye tıklayın. Ve "Ctrl+F" yardımı ile alttaki kodu aratın.


<b:section class='footer' id='footer'/>

Bulmuş olduğunuz bu kodun yerine alttaki kodu yapıştırın;


<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

</div>

Yukarıdaki kodu ekledikten sonra sayfanızı şablonu görüntüleyerek sorun olup olmadığını kontrol edin. Eğer herhangi bir sorun yoksa sonraki adıma geçin.

Adım 3: Temanızda ]]></b:skin> kodunu bulun ve hemen üstüne alltaki kodu yapıştırın ve şablonunuzu kaydedin.


#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Sayfa Ögelerinizi görüntüleyin alttaki resimdeki gibi şablonunuzun en altında Footer kısmını göreceksiniz. İstediğiniz eklentiyi ekleyebilirsiniz.

3 kolonlu footer.png

Hiç yorum yok:

Yorum Gönder