Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

2019-07-11

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

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


    Но този елемент от оформлението може да побере много информация и да помогне за разтоварване на страничните колони. Можете да добавите банерите за статистика или формата за контакти. Всичко, което искате.
    Така че днес ще създадем долен колонтитул с три колони, за да поставим допълнителни притурки в тях и ще зададем стиловете им, подходящи за нашия дизайн.
    Така изглежда един обикновен долен колонтитул в темите на 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;




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


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

    BGtop

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


    Няма коментари:

    Публикуване на коментар