Bazen isteğinize göre bir web sitesi şablonu bulmak gerçekten çok zor. İstediğiniz gibi bi şablonu bulamıyorsanız ihtiyacınıza göre özelleştirebilirsiniz. Blogunuzun daha profasyonel görünmesini sağlayan bu eklenti çok işinize yarayacak. Sitenize 3 sütun altbilgi eklemek istiyorsunuz ama hazır şablonlardan anlamıyorum diyosanız. Bu yazıyı okuyarak kolayca 3 sütun altbilgi oluşturabilirsiniz.
Bloggerda Üç Sütunlu Altbilgi (Footer) oluşturma
Aşağıdaki adımları izleyin
1. Adım:
- Blogger Kumanda Panelinize gidin >> Şablon sekmesine tıklayın
- Blogunuza herhangi bir değişiklik yapmadan önce Şablonunuzu mutlaka yedekleyin!
- HTML'yi Düzenle'ye tıklayın.
- Şimdi ]]></b:skin> kodunu bulun
- Bu koddan hemen önce aşağıdaki kodları kopyalayıp yapıştırın.
#lower {
margin:auto;
padding:0 0 10px;
width:100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding:20px 0;
width:960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float:left;
margin:0 5px auto;
padding-bottom:20px;
width:32%;
text-align:left;
font-size:100%;
line-height:1.6em;
word-wrap:break-word;
overflow: hidden;
}
.lowerbar {margin:0;padding:0;}
.lowerbar .widget {margin:0;padding:10px 20px 0;}
.lowerbar h2 {
margin:0 0 10px;
padding:3px 0;
text-align:left;
color:#0084ce;
text-transform:uppercase;
font:bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin:0;
padding:0;
list-style-type:none;
}
.lowerbar li {
margin:0 0 2px;
padding:0 0 1px;
border-bottom:1px dotted #ccc;
}
margin:auto;
padding:0 0 10px;
width:100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding:20px 0;
width:960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float:left;
margin:0 5px auto;
padding-bottom:20px;
width:32%;
text-align:left;
font-size:100%;
line-height:1.6em;
word-wrap:break-word;
overflow: hidden;
}
.lowerbar {margin:0;padding:0;}
.lowerbar .widget {margin:0;padding:10px 20px 0;}
.lowerbar h2 {
margin:0 0 10px;
padding:3px 0;
text-align:left;
color:#0084ce;
text-transform:uppercase;
font:bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin:0;
padding:0;
list-style-type:none;
}
.lowerbar li {
margin:0 0 2px;
padding:0 0 1px;
border-bottom:1px dotted #ccc;
}
2. Adım:
- Şimdi </body> kodunu bulun ve bu kodun üstüne aşağıdaki kodları kopyalayıp yapıştırın.
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
/*-----3 sütun değil 4 sütun istiyorum diyenlere-----*/
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
/* -----Bitiş-----*/
<div style='clear: both;'/>
</div>
</div>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
/*-----3 sütun değil 4 sütun istiyorum diyenlere-----*/
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
/* -----Bitiş-----*/
<div style='clear: both;'/>
</div>
</div>
Son olarak : Şablonunuzu kaydedin.
Özelleştirme
Yukarıda koyu renk değerleri ve kodlarla oynayarak bu eklentiyi özelleştirebilirsiniz. Yani blogunuzun tasarımına göre olası özelleştirmeleri yapalım.
- Tüm eklenti Arkaplan rengini Background değiştirmek için #333434; bölümünü isteğinize göre değistirebilirsiniz.
- Eklentinin genişliği aşan veya blog genişliğinden daha büyük ise, sadece azaltmak veya artırmak için width: 960px; değerini blogunuza göre ayarlayın.
- Eğer başlık renklerini değiştirmek istiyorsanız background:#fff; değerini zevkinize göre değiştirebilirsiniz.
- width: 32%; tek bir sütunun genişliğidir. Şablonunuza uyacak şekilde artırabilir veya azaltabilirsiniz.
- Sütun başlığı için bir renk var istiyorsanız değiştirebilirsiniz; color:#0084ce;
- Yazı boyutunu, rengini ve fontunu değiştirmek istiyorsanız, Bunu değiştirin; font:bold 14px Arial, Tahoma, Verdana;
- border-bottom:3px solid #0084ce; H2 Title Başlıkları altında çizgi ayarlanmış, kalınlığını, rengini değiştirmek yada kaldırmak için bunu düzenleyebilirsiniz.
- border-bottom: 1px dotted #ccc; Sütunların altında çizgi ayarlanmış kalınlığını,rengini değiştirmek yada kaldırmak için bunu düzenleyebilirsiniz.
- Bu kadar.
Örnek 2
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...
çok sağol
YanıtlaSilMükemmel oluyor valla. Eyvallah.
YanıtlaSilMerhaba bu eklenti bende eklemek istiyorum ama hata alıyorum sebebı ne olablir..
YanıtlaSilBu yorum yazar tarafından silindi.
YanıtlaSilMasa üstü cihazda çok güzel çalıştı yanlız tablet cihazda her sütun bir yerde nasıl çözülür basit şablon da böyle özel sablonlardami çalışıyor
YanıtlaSilYorum Gönder
Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!