Hazır Temalar için Kişiselleştirme Uygulamaları

Blogger'ın kullanıclarına sunmuş olduğu hazır temaların çoğunluğu Resim 1 deki gibi belli başlı 4 parçadan oluşur.Kimi şablonlarda BAŞLIK alanında menü bulunurken kimilerinde yoktur;kimilerinde SÜTUNLAR solda kimilerinde ise hem sağda hemde solda bulunabilir.Temanızı beğenip seçtikten sonra bu 4 parça üzerinde oynamalar yapmanız mümkün.Bu değişikler BAŞLIK alanının arka plan resmini değiştirmekten tutun ,ALT TABAN ı parçalara ayırmaya kadar çeşitli olabilir.

Resim 1

Footer Alanını Parçalara Ayırmak
Şimdi Footer alanımızı 3 parçaya ayıralım
!!! Herhangi bir işleme başlamadan önce mutlaka temanızın yedeğini almanızı öneririm.

Resim 2

Eğer yanlış birşeyler yaparda eski temanıza dönmek isterseniz Resim 2 de Browse butonuyla temanızı kaydettiğiniz yerden seçip Yükle butonuna tıklayarak hiçbir değişiklik yapmamış gibi eski temanıza dönebilirsiniz.

Gelelim tekrar Footer'ı 3 'e bölmeye :

1.Adım :
Yerleşim > HTML'yi Düzenle'ye tıklayıp, "Ctrl+F" yardımı ile alttaki kodu bulalım




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

Bulduğumuz kodu silip yerine aşağıdaki kodu yapıştıralım

[ NOT:Temanızda Footer alanı yoksa bu kodu bulamazsınız; öncelikle footer oluşturmak gerekecektir.Kodu bulamayanlar </div> <!-- end content-wrapper -->
kodunu aratıp ,bulduğu kodu silmeden altına aşağıdaki kodu yapıştırıp işleme devam edebilirler .
Bu kodda bende yok diyorsanız </body> kodunu aratıp hemen üstüne aşağıdaki kodu yapıştırabilirsiniz.]

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


Kodu ekledikten sonra önizleme yapıp temamızda sorun olup olmadığına bakabiliriz,eğer sorun yoksa ;

2.Adım :

"Ctrl+F" yardımı ile ]]></b:skin>kodunu bulalım ve hemen üstüne aşağıdaki ve son kodu yapıştıralım




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

.footer-column {
padding: 10px;
}

Önizleme yapalım ve sorun yoksa şablonu kaydet ile işlemi bitirelim

Resim 3

Yerleşim>Sayfa Öğeleri'nde Resim 3 teki gibi Footer'ı 3 e böldük.Bütün yazı boyunca sadece 2 kod eklenmesi için verilmiştir,diğerleri bulunacak kodlar unutmayalım.Eğer ilk eklenecek kodu incelerseniz %30,%30 ve %40 olmak üzere üç parçayı boyutlandırmış olduk.Bunlardan bir tanesini ilişkili kodlarıyla silip diğer oranları % 50 ve % 50 yaparsak 2 ye bölebileceğimizi de bilmekte fayda var.

Herkese Bol Şans :)