Bloggerda Üç Sütunlu Altbilgi oluşturma
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
Bloggerda Üç Sütunlu Altbilgi görünüm

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

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.
Örnek 1
Bloggerda Üç Sütunlu Altbilgi örnek-1
Örnek 2
Bloggerda Üç Sütunlu Altbilgi örnek-2
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

6 Yorumlar

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!

  1. işime yaradı kardeşim teşekkür ederim iyi çalışmalar

    YanıtlaSil
  2. Mükemmel oluyor valla. Eyvallah.

    YanıtlaSil
  3. Merhaba bu eklenti bende eklemek istiyorum ama hata alıyorum sebebı ne olablir..

    YanıtlaSil
  4. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  5. Masa ü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ıtlaSil

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

Önceki Makale Sonraki Makale