Blogger Alt Tarafa 3 Kolonlu Menü

Evet Arkadaşlar Bu yazımızda ise Blogger arkadaşlar için Web Sitelerinin alt tarafına 3 kolonlu menü yapmayı anlatacağım.Bende aynı menüyü kullanmaktayım Çok kullanışlı internet sitesine + değer katan bir widget diyelim.Şimdi bu menüyü nasıl kuracağız bloğumuza her şablona uygunmu.Evet arkadaşlar her blogger şablonuna uygun renkler uymayabilir onlarıda siz ayarlmalısınız kendi şablonunuza göre.Eğer isterseniz geçelim 3 kolonlu Menünün yapımına

Bu 3 Kolonlu Menüyü Yapmak İçin Öncelikle Blogger adresimize giriyor

Yerleşim > Şablon HTML'sini Düzenle > Widget Şablonlarını genişlet Dedikten sonra

]]></b:skin>

    Kodundan önce Aşağıdaki kodları Ekliyoruz

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

Ardından 

</body>

Tagından Önce Şablonumuzda aşağıdaki kodları ekleyin ama eklerken şuna dikkat edin en altta bulunacaktır en altta bulunmasını istemiyorsanız şablonunuzda  uygun olan bir yere örneğin şablon sahibinin imzasının bulunduğu yerin üst tarafına yani kod bşlangıcından öncekine aşağıdaki kodları ekleyin

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

Şimdi Yerleşimden  Eklentilerinizi ekleyebilirsiniz.

Kendinize Göre Uyarlamak için İse İster CSS den İstersenizde Yerleşim > Yazı Tipleri Ve Rekler Menüsünden Yapabilirsiniz


İyi Günler