Bloggerda Üç Sütunlu Altbilgi (Footer) 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

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

Ş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

1. 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.
2. Tüm eklenti Arkaplan rengini Background değiştirmek için #333434; bölümünü isteğinize göre değistirebilirsiniz.
3. 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.
4. Eğer başlık renklerini değiştirmek istiyorsanız background:#fff; değerini zevkinize göre değiştirebilirsiniz.
5. width: 32%; tek bir sütunun genişliğidir. Şablonunuza uyacak şekilde artırabilir veya azaltabilirsiniz.
6. Sütun başlığı için bir renk var istiyorsanız değiştirebilirsiniz; color:#0084ce;
7. Yazı boyutunu, rengini ve fontunu değiştirmek istiyorsanız, Bunu değiştirin; font:bold 14px Arial, Tahoma, Verdana;
8. 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.
9. 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.
10. Bu kadar.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Benzer Yayınlar