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.
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 kodun hemen üstüne 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;
}
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>
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.
Hiç yorum yok:
Yorum Gönder