2012-09-06

Textual description of firstImageUrl

Делим footer blogger на 3 колонки с виджетами

footer_blogger
В некоторых шаблонах blogger вы уже встречали оформление footer (футер, подвал, нижняя часть блога) в виде колонок. В footer вы можете добавить необходимую для вас или ваших читателей информацию, используя виджеты. Например, это может быть виджет популярные сообщения, топ комментаторов, реклама google adsense, ваша статистика и другое.  В результате ваш footer примет следующий вид:

Как разбить footer на 3 колонки:
  1. Админка –> Шаблон –> изменить html
  2. Находим код ]]></b:skin>
  3. Вставляем перед кодом ]]></b:skin> следующий код:
    /* -----   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;
  4. Теперь находим код </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>
.. Вам осталось лишь перейти во вкладку Дизайн, и вы увидите в нижней части блога 3 колонки элементов страницы, в которые вы можете добавить гаджеты:
гаджеты_blogger
Настройка оформления footer blogger:
Вы можете легко изменить внешний вид и цвет виджетов. Разными цветами в первом коде я выделила отрезки, которые вы можете изменять.
  • background:#333434; основной фон виджетов
  • width: 960px;   Ширина отдельного виджета в пикселях.
  • background:#fff;   и  width: 32%; это цвет фона и ширине из трех столбцов, где виджеты добавляются.
  • color:#0084ce; Цвет названия рубрики
  • font: bold 14px Arial, Tahoma, Verdana; Изменить для изменения размера шрифта и семьи.
  • border-bottom:3px solid #0084ce; Изменение толщины, стиля и цвета линии, отделяющей заглавие от основного текста виджетов.
  • border-bottom: 1px dotted #ccc; изменение размера, стиля и цвета границы, которая находится в самой нижней части виджетов под ссылками.

5 комментариев :

Ирина Кудрявцева комментирует...

У меня все выстроилось в три линии, но не колонки...

DareDevil47 комментирует...

Гмм, надо будет попробовать. В блогах на платформе WordPress неоднократно приходилось наблюдать 3 колонки, а вот в Блоггере пока не доводилось... Попробуем, Попробуем...

Mycrib комментирует...

Ирина, если все сделаноправильно, то все должно получиться. Вы можете сохранить резервную копию блога, упаковать в архив, залить на Яндекс диск или народ и прислать мне ссылку на скачивание через обратную связь. Помогу

Tanka комментирует...

Спасибо большое!!!! Отлично все работает, получилось с первого раза :)

Сергей Усов комментирует...

Будем пробовать, если все получится, то сами увидите на сайте http://ctatya.ru/

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности