17 Temmuz 2009

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.




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.



Kolay Gelsin.
Yorum
E-demir dedi ki...
Harika . :)
Cüneyt Özdemir dedi ki...
b:section class='footer' id='footer
kodu yok bu neden kaynaklı olabilir?
Sade dedi ki...
Şuan kullandığınız şablonunuzda footer yoksa o kodu bulamazsınız; onun yerine alttaki kodu aratın;
</div> <!-- end content-wrapper -->

bir sorunla karşılarsanız lütfen belirtin, yardımcı olurum. Kolay gelsin.
Sade dedi ki...
not: yukarıdaki vermiş olduğum kodun yerine değil altına yapıştırın.
Adsız dedi ki...
yukarda verdiğiniz 2 kodda yok bende ne yapmam gerek
Sade dedi ki...
Temanızda </body> kodunu aratabilirsiniz. </body> kodunun hemen üstüne yukarıdaki kodu yapıştırabilirsiniz. Farklı temalarda farklı kodlar olabiliyor. Kolay gelsin...
Adsız dedi ki...
oldu teşekkürler :)
Cüneyt Özdemir dedi ki...
uyguladım teşekkürler ama yerleşimde sağa yatık ! bunu nasıl düzeltebilirim
Sade dedi ki...
Eğer adımları eksiksiz yaptığınızdan eminseniz, bir ekran görünütüsü gönderebilir misiniz? Böylelikle sorunu daha kolay anlayıp çözüm önerisi sunabilirim...
mertkan dedi ki...
ikinci bir sidebar nasıl yapabiliriz.onun kodunuda verebilirseniz benim için çok yararlı olur.
mertkan dedi ki...
merhabalar.main alanına gadget ekleyebilirmiyiz acaba.ya da gadgetleri istediğimiz heryere ekleyebilir miyiz aynı şablon üzerinde?
Sade dedi ki...
İkinci Sidebar yapılabilir. Ancak onun için ayrı bir yazı yazmak daha uygun. Main alanına da gadget eklenebilir zaten İstenen çoğu yere gadget sorunsuz şekilde eklenebilir.
Unknown dedi ki...
Afedersiniz ben acemiyim bu konuda dediklerinizi adım adım yapmama rağmen karşıma böyle bir yazı çıkıyor
Düzgün bir şekilde oluşturulmadığından şablonunuz çözümlenemedi. Lütfen tüm XML öğelerinin düzgün biçimde kapatıldığından emin olun.
XML hata iletisi: XML document structures must start and end within the same entity.

Bu konuda ne yapabilirim?
Adsız dedi ki...
sade hocam merhaba umarım iyisindir.blogunu gezerken gözüm takıldı '' NEŞE'' isimli kullanıcının sorunu .elimden geldiğince nacizhane yardım etmeye çalıştım iznin olursa.
büyük ihtimalle arkadaşımız Adım 2 de verilen
b:section class='footer' id='footer'/

kodu bulmuş ama silmiş sonradan .o yüzden şu kodu

div id='footer-wrapper'

aratıp bu kodun altına 2.adım da verilen

div id='footer-column-container

ile başlayan kodu
yapıştırır daha sonra diğer kodu ilgili yere yapıştırır ise olay hallolur büyük ihtimalle.ayrıca html etiketlerini de tam yazamadım.kabul etmedi yorum formu.hocam umarım işinize burnumu sokarak kabalık etmedim.
Sade dedi ki...
Ne demek Arma, yardımın için teşekkürler. Umarım faydası olur...
Teknojest dedi ki...
Sorunsuz çalıştı.Teşekkürler
Adsız dedi ki...
çok teşekkürler gayet hoş. bir de kısaca bahsetseniz footerın arka planını nasıl değiştirebiliriz?
Adsız dedi ki...
arka planına resim koyabilir miyiz?
Sade dedi ki...
Footer alanının arka plan rengini 3 adımdaki koda background: #000000; kodu ekleyerek değiştirebilirsiniz. Farklı renkler için Renk Kodlarını (background: #......; noktaların yerine) yazmanız yeterli.

Resim eklemek içinse şu yöntem kullanılabilir;
#footer {
background:url(http://resmindirekadresi.jpg);
Adsız dedi ki...
Teşekkürler, çok yararli oldu.
Gez, Ye, İç,... dedi ki...
Merhaba, çok teşekkürler, güzel çalışma, çok faydalı oldu.
Ancak, bu üç sutuna böldükten sonra, bu gadget'ler bir üst alana yapıştı. Üstten nasıl margin verebilirim acaba. HTML de acamiyim de.
Şimdiden teşekkürler
Sade dedi ki...
Yorumunuz için teşekkürler. 3. adımdaki CSS koduna margin ekleyebilirsiniz. Kolay gelsin...
Gez, Ye, İç,... dedi ki...
Herşeyden önce sitenizin doğru, düzgün ve seviyeli olduğunu belirtmek isterim. Blog da yeni olduğum için çok site araştırdım, doyurucu cevap bulamamıştım.
Cevabınız için teşekkürler. Fakat, html code da yeni olduğum için 3. madde deki kodun ne olması gerektiğini bilmiyorum.
margin-top:10px gibi birşey mi, ve hangi satırın arasına eklemeliyim.
Desteğiniz için tekrar teşekkür ederim.
Sade dedi ki...
Değerli sözleriniz için teşekkürler. Hobi olarak blogger kullanıcılarına yardım etmeye gayret ediyorum. "Gez, ye, iç" siteniz için sanırım bu eklemeyi yapmaya çalışıyorsunuz. (Değilse belirtirseniz sevinirim) O blog olduğunu varsayarak devam edeyim blogunuzu inceldim ve sanırım daha öncede footer eklemek için bazı kodlar yerleştirmişsiniz blogunuza, sonradan belkide silmişsiniz. Bu kanıya sitenizin footer ile ilgili 3 farklı CSS kodu içerdiğini gördüğüm için söylüyorum. Öncelikle daha önce hangi siteden yardım aldıysanız o yöntemin tersini yaparak öncelikle sitenizden sonradan eklenmiş olan CSS kodlarını temizlemenizi öneririm. Ardından herşey çok daha güzel olacaktır. Margin'2 bile gerek kalmayabilir.

Kolay gelsin...
Sade dedi ki...
ek yorum; clear:both; dan önce margin:100px 0px 0px; şeklinde ekleme yapabilirsiniz. 100 abartı tabi uygun hale getirebilirsiniz... ayrıca ; http://www.w3schools.com/Css/css_margin.asp sitesinden bilgi edinebilir http://www.w3schools.com/Css/tryit.asp?filename=trycss_margin_sides sitesi ile denemeler yapabilirsiniz.
Adsız dedi ki...
Merhabalar,
Çok güzel bir anlatım olmuş fakat ben mesela header'ın sağın bir yerde gadget alanı oluşturmak istersem, bu yöntemin hangi kısımlarını değiştirmem gerekir.
hazar dedi ki...
Bu güzel paylaşımınız için teşekürler. Güzel faydalı bir blog. Takip etmeye devam edeceğim
Adsız dedi ki...
ben bu footerleri main bölümünün hemen altina ekleme imkanım yokmu
Kargın Yenice dedi ki...
header kısmında iki sütun var ve bunu tek sütun haline nasıl çevirebilirim.
NarKo dedi ki...
çok tsk ederim çok isime yaradı
Özgür Öztürk dedi ki...
Öncelikle teşekkürler de benim sorum daha farklı. HAzır şablon kullanıyorum ve bende sayfa altlarındaki "önceki kayıt" beya "sonraki kayıt" kısıları yok. Bunları nasıl oluşturabilirim?
Unknown dedi ki...
güzel eklenti bunu arıyordum.işime yaradı
Admin dedi ki...

/div !-- end content wrapper
boyle bi kod yok. Yardim et kardesim
Adsız dedi ki...
Footer Widget 1 yazmaktadır blogumda sımdı Ben sızın blogunuzun altındakı gibi 3 ayrı ıcerık eklemek ıstıyorum Blog Sahıbı hakkında blog onerılerı populer yazılar benzerı bana yardımcı olabilirmısınız benım hazırladıgım blog adresi şudur.
http://ozdecan.blogspot.com/
Adsız dedi ki...
Tekrar Merhaba;

Blogumda HOME yazan kısmı bir turlu ANA SAYFA olarak değiştiremedim diğer satırları yaptım ama bu olmadı yardımcı olursanız sevinirim
Unknown dedi ki...
Merhaba Zeynel ASLAN,bloğum çok küçük acaba reklamımı yaparmısınız.
Ayrıca yaşım da küçük 15 yani ilk 3yıl ödeme yapabileceğimi sanmıyorum....
Adsız dedi ki...
Teşekkürler oldukça yararlı oldu benim açımdan.
Edd dedi ki...
Müthişsin desem az :) Bendeki kodlarla bunlar çok farklıydı baya uğraştırdı ama yaptım. Birde bir sorum var ben bunu 2 taneye indirmek istersem orda width leri arttırıp mesela ikisinede %45 versem ortadada boşluk olsun diye ve birini float left birini float right yapsam diğerini silsem kodda bir sorun yaşarmıyım acaba