Blogger Footer Alanına Sütün Ekleme

blogger-footer-sütun-ekleme

Blogger mevcut temanızda yapılacak düzenlemelerin en başında footer alanı gelmektedir. Kimi zaman çok beğendiğiniz bir tema maalesef sade bir görünüm seçmesi dolayısıyla bu alana yer veremeyebiliyor. Ve siz de her şeyiyle beğendiğiniz temanızdan vazgeçmemek için blogger footer ekleme işleminiz yapmak istiyorsunuz. Peki bunu nasıl yapabilirsiniz?

Temaların son alanı genellikle 3 e bölünerek bir tasarım yapılmak istenir. Ben de böyle bir ihtiyacınız olacağınız tahmin ettiğim için 3 sütuna bölerek nasıl eklenir konusunda kodlar paylaşacağım.

Kodları eklemeyi 2 adımda gerçekleştireceğiz :

1- CSS kodları

/* ----- LOWER SECTION ----- */ 

#lower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background:#333434; }

#lower-wrapper { margin:auto; padding: 20px 0px 20px 0px; width: 960px; } 

#lowerbar-wrapper { border:1px solid #DEDEDE; background:#fff; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 32%; text-align: justify; 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 0px 20px;} 

.lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; color:#0084ce; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; border-bottom:3px solid #0084ce; }

.lowerbar ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } 

.lowerbar li { margin: 0px 0px 2px 0px; padding: 0px 0px 1px 0px; border-bottom: 1px dotted #ccc; }

 

Yukarıdaki kodları blogger şablonunuz içerisinde aşağıdaki kodun üzerine eklemeniz gerekiyor

]]></b:skin>

2-Html Kodları

<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>     <div style='clear: both;'/>     </div> </div></>

Yukarıdaki kodları blogger şablonunuz içerisinde aşağıdaki kodun üzerine eklemeniz gerekiyor

</body>

Bu kodları ilgili yere eklediyseniz şimdi blogunuzun yerleşim bölümüne gelerek 3 ayrı kısmın oluştuğunu göreceksiniz. Şimdi ilgili yerlere eklentilerinizi ekleyebilirsiniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

29 yorum:

  1. Bu gerçekten işime yarayacak.Teşekkürler

    YanıtlaSil
  2. merhaba
    hepsini çok iyi anladım...
    fakat; html de

    kodunu nasıl aratıyorum???
    nerey yazıyorum bu kodu bulması için??
    acil cevap verebilir misiniz lütfen???
    kafayı yemek üzreyim, acemilik de var...:)
    teşekkürler şimdiden, saygılar...

    YanıtlaSil
  3. @Şükran Özçelik
    Sanırım bir kod yazmışsınız görünmüyor ama Yerleşim///Html yi Düzenle ye geldiğiniz zaman "Ctrl+F" tuş kombinasyonuna bastığınızda tarayıcınızda bir yer belirecek ve buraya yazdığınız kelimeyi tarayıcınız o sayfada arayacaktır.Sanırım sorununuz kodu bulamamaktı.Umarım doğru anladım.Sonucu yazarsanız sevinirim..

    YanıtlaSil
  4. 3 sütun fazla oluşturabiliyor muyuz acaba? Misal herbirine %20'lik alan verip 5 sütun yapabilir miyiz?

    YanıtlaSil
  5. elbette mümkün.Kodları o şekilde düzenleyebilirsiniz.%20 olarak ayarlayabilirsiniz ve footer 5,6 col4,5 diye değişiklik yapmayı da unutmayın.Değişikliği yaptığıınzda sonucu belirtirseniz sevinirim...

    YanıtlaSil
  6. Benm blogmda sutun ztn var isimlerini değiştirip nasıl link verecğmi bilmiorm.Yardmcı olur msnz?

    YanıtlaSil
  7. Blogger hesabınızda yerleşim kısmına geleceksiniz.Footer alanındaki ADD a gadget kısmına tıklayark artık ne ekleyecekseniz onu listeden seçip ismini değiştirebilirsiniz.Doğru anladıysam bu şekilde.

    YanıtlaSil
  8. header kısmında iki sütun var ve ben bu sütunları nasıl tek sütun haline dönüştürebilirim?

    YanıtlaSil
  9. onun için kodlara bakmak gerekir.En basitinden yukarıdaki mantığı kullanıp arayabilirsiniz.Header kısmına gelerek % deli ifadeler varsa onları düzeltebilirsiniz.

    YanıtlaSil
  10. ilgin teşekkürler... araştırırken #header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:47%;overflow:hidden;} kodundaki 47%'yi 100% yapınca sol sütun uzadı sağ sütun alta geçti.sorunum çözüldü.sağ sütunu^(#header2..) kaldırmayı buldum fakat ilerde lazım olur deyi ellemedim.:)

    YanıtlaSil
  11. Selam
    Ben header kısmınına yan yana iki tane ekleme kistiyorum chucky temasını kulanıyorum nasıl yapabilirim?

    YanıtlaSil
  12. Sorunuzun cevabını yakın zamanda ayrıntılı olarak yayınlayacağım.İyi çalışmalar

    YanıtlaSil
  13. Paylaşım için teşekkürler.
    Fakat temam da alt kısım bulunmuyor. Tarif ettiğiniz gibi; bu kodda mevcut değil nasıl alt kısımı aktif edebiliriz? Ayrıca sadece alt kısım için değil sol taraf için de yeni bir sidebar oluşturabiliyor muyuz? Ne kadar gadget varsa sadece sağ tarafta kullanılabiliyor tema gereği. Çözüm önerilerinizi bekliyorum...

    YanıtlaSil
    Yanıtlar
    1. temanızda footer adında herhangi bir seçenek yoksa body tag ından önce yukarıdaki ilk kod blogunu yapıştırıp deneyin.Yapamazsanız şablonunuzu bana gönderin ben tamamlayıp size göndereyim.
      Sidebar için ise buradaki yazımı kontrol edebilirsiniz :

      http://www.ehliblog.com/2012/05/blogger-sidebar-saga-yada-sola-nasl.html

      Sil
  14. Cevap için teşekkürler.
    O kadar çok body var ki şablonda hangisinin üzerine ekleyeceğimi bilemedim. Peki sidebar için yazınızı okumuştum zaten ama sorum o değil. Sağdakini sola almak ya da soldakini sağa almak değil solda sidebar yok oraya da ekleyemiyor muyuz? İki tarafta da olsa?

    YanıtlaSil
  15. en son </body tagından önce ekleyeceksiniz.Size tavsiyem iki sidebar olan şablon kullanmanız ama illaki yeni şablonumda yapmak istiyorum diyorsanız böyle bir yazı yayınlayacağım.Takipte kalın

    YanıtlaSil
  16. Tamamdır hallettim çok sağolun diğer yazı içinde takipteyim...

    YanıtlaSil
  17. Merhaba,
    Poyraz bey yazıdan haber var mı?

    YanıtlaSil
    Yanıtlar
    1. Hocam işlerim dolayısıyla henüz hazırlayamadım.Kısa süre içerisinde yayınlamaya çalışacağım

      Sil
    2. hocam yazınızı yayınlayamadım çünkü yazdıklarım tüm şablonlarda geçerli olmadı.Bu yüzden istediğiniz tema hangisiyse onda bakalım

      Sil

  18. Ekini bulamıyorum onun yerine neye bakmalıyım?

    YanıtlaSil
  19. Güzel yazı olmuş emeğinize sağlık.araba oyunları

    YanıtlaSil
  20. Bilmeyenler için faydalarını vs yazsaydın daha iyi olabilirdi sanki hocam :)

    YanıtlaSil
    Yanıtlar
    1. Yani tasarıma göre değiştiği için %100 faydası vardır diyemeyeceğimden o konuya girmek istemedim. Yİne de uyarınız için teşekkürler

      Sil
    2. Emeğine sağlık. Lakin ben hallemedim kardeşim. Html kodlarımı yollasam yapabilirmisin. Yukarıda öyle demişsin

      Sil
    3. @Furkan Gucluturk

      Nasıl bir sorun yaşadınız uygulamada?

      Sil
    4. Denilenleri harfiyen yaptim ama olmadi

      Sil
  21. Bilgi için teşekkürler elinize sağlık.

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.