Долен колонтитул с три колони за Blogger

Здравейте, приятели. Не всички теми, предоставени ни от Blogger, позволяват да персонализираме долния колонтитул. А има теми на трети страни, в които долен колонтитул изобщо не е предвиден. Такава беше в предишната версия на темата ми.

1. Инсталиране
2. Настройки

Но този елемент от оформлението може да побере много информация и да помогне за разтоварване на страничните колони. Можете да добавите банерите за статистика или формата за контакти. Всичко, което искате.
Така че днес ще създадем долен колонтитул с три колони, за да поставим допълнителни притурки в тях и ще зададем стиловете им, подходящи за нашия дизайн.
Така изглежда един обикновен долен колонтитул в темите на Blogger. Скучно, самотно и не е красиво.

Ще коригираме ситуацията и ще я направим по-изразителна и интересна.
Как да направите долния колонтитул в 3 колони?

Инсталиране

Стъпка 1. Отидете на административния панел на блога ➔ раздел Тема ➔ променете HTML. Намерете затварящия маркер </ body> и поставете следния код пред него:

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

Стъпка 2. Търсим и реда ]]></b:skin>. Пред него добавяме този код, за да зададем стиловете.

#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#00868B;
}
#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:#53868B; 
        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;
}

Настройки

Какво можем да променим тук, за да е в унисон с дизайна ни?

➤background:#00868B; е общият фон на долния колонтитул;

➤в син цвят са маркирани границите, фон и ширина на полетата;

➤color:#53868B; е цветът на заглавията на притурките и размер на шрифта;

➤Ако освободите въображението си и добавите още стилове може да се получи и вариант, в който вместо background:#00868B; е добавено фоново изображение - background:url(адрес на изображението);

➤Можете да добавете и рамка със заоблени ъгли;

border:5px solid #DEDEDE;

border-radius: 50px 50px 0px 0px;

Като краен резултат ще имате долен колонтитул с три допълнителни колони за притурки.
Как искате да изглежда долния колонтитул решавате само вие. Кодовете са готови, а останалото е въпрос на вкус.


За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!