Как красиво оформить стиль нижнего колонтитула в блоге Blogspot



Оформление Footer (подвала) блога с использованием CSS стилей

Здравствуйте гости и читатели моего блога. Итак, мы уже научились красиво оформлять и фон блога, и боковые панели с виджетами, и сообщения в наших блогах. Но остался у нас еще Footer (подвал) блога.

Сегодня мы как раз и займемся оформлением нижней части колонтитула. В шаблонах blogger, таких как Венецианское окно и Корпорация "Чудеса" у нас есть возможность в дизайнере настроить фон в подвале блога, отличный от основного фона.  А вот шаблон Простой такой возможностью нас не радует. Давайте сегодня об этом и поговорим.

Я начну с шаблона Корпорация "Чудеса". В дизайнере шаблона на вкладке шаблон выбираем сколько у Вас будет колонок в подвале: одна, две, три. По вкладке дополнительно, выбираем нужный цвет нижнего колонтитула. Теперь давайте приукрасим цветовые границы фона. 

Идем в шаблон-делаем резервную копию шаблона. Далее переходим изменить шаблон. Нажимаем на первую стрелку, рядом строка <b:skin>...</b:skin>. Теперь прокручиваем тихонько вниз и ищем CSS Footer, а именно вот эту строку

/* Footer
----------------------------------------------- */
.footer-outer {
  margin: -$(shadow.spread) 0 -1px;
  padding: $(shadow.spread) 0 0;
  color: $(footer.text.color);
  overflow: hidden;
}

.footer-fauxborder-left {
border: 3px dotted #ffffff; $(widget.border.color);
border-radius:30px;
background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;


Добавляем границу рамки, цвет и форму (выделено синим). Все остальное оставляем без изменений. Вы можете настроить только верхнюю границу (border-top), или нижнюю (border-bottom), или как у меня со всех сторон. Получим вот такое оформление

Как оформить Footer в шаблоне Корпорация "Чудеса"

В живую смотрите в этом блоге. Здесь у меня оформлено точечной рамкой белого цвета, толщиной 3 рх. Так же задан радиус закругления углов border-radius:30рх (можете удалить, если не надо).

Отдельно оформляла установленные виджеты в подвале блога. Почитайте мой пост как оформить виджеты разным фоновым цветом. Чтобы узнать ID виджета, читайте статью как изменить фон боковых панелей блога Blogspot. В принципе в этом шаблоне все легко настраивается, так же и Венецианское окно. Там тоже можно задать нужный цвет нижнего колонтитула, и оформляйте как я написала на примере шаблона Корпорация "Чудеса".

С шаблоном Простой придется поработать больше по времени. В этом шаблоне ни в дизайнере нет настроек, нет и в теле шаблона. Цвет фона устанавливается такой же, как и основной цвет блога. Поэтому идем в шаблон-изменить шаблон, нажимаем на первую стрелку и, прокручивая вниз, ищем строку ]]></b:skin>. Выше этой строки вставляем код CSS

/* Footer
----------------------------------------------- */

.footer-fauxborder-left {
background:#444444;
border: 5px double #f00;
border-radius:0px;
width:auto;
}

Настройки те же самые: фон нижнего колонтитула, размер, форма и цвет границы рамки. Ширина установится автоматически по заданной в настройках ширине блога. Вот пример на скриншоте, шаблон Простой:

Как оформить подвал (Footer) в шаблоне простой с использованием CSS стилей

Здесь я так же оформила два виджета разным фоновым цветом. Сбегайте по ссылке и посмотрите в тестовом блоге. Вы можете добавить CSS стиль заголовка виджета, чтобы настроить цвет и размер шрифта. Для этого, когда будете настраивать отдельный виджет, ниже добавьте этот код CSS.

#Stats1 h2{
text-align:center;
font-size:12px;
color:#ffffff;
font-family:arial;
font-weight:bold;
}

Выделенное зеленым-ID виджета; красным-размер шрифта; лиловым-цвет шрифта;

Хочу еще остановится на маленькой, но важной детали-это цветовые разделительные линии. 

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

Где в шаблоне Простой найти стиль разделительных линий

/* Columns
----------------------------------------------- */
.main-outer {
  border-top: $(main.border.width) solid $(body.rule.color);
}

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 0px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 0px solid $(body.rule.color);
}

Убираем разделительные линии: ставим 0рх, у Вас может быть число 1рх или 2 рх. Нажимаем просмотреть шаблон, если все нормально сохраняем. Еще раз напоминаю, перед всеми изменениями, не забывайте делать резервную копию шаблона

Копируйте внимательно коды, особенно обращайте внимание на символы: кавычки, двоеточие, точка, скобка. Не скопировав точку, Вы не сможете настроить оформление всего, не только подвала блога.  

На этом я закончу сегодня. Задавайте вопросы в комментариях или воспользуйтесь контактной формой, пишите отзывы. Делитесь с друзьями и знакомыми в социальных сетях. Всем пока, До новых встреч.

Почитайте статьи красивое оформление основного фона и всех страниц блога; как быстро и красиво оформить текст блогаОформление гаджета поиска Google и других с использованием CSS;




Автор статьи ✎ Olga Protasova Выпуск ✹ 7/14/2014 Ярлыки ►


Открыть комментарии →

4 коммент. :

  1. Ольга, привет. Очень красиво получилось. Ещё раз повторюсь, что насколько пластичен блогеровский шаблон. Можно столько всего сотворить. А ты говоришь хандра. Когда всё успеваешь. Да ещё с температурой.

    ОтветитьУдалить
    Ответы
    1. Вика, эта информация давно у меня была в разработке. Надо было протестировать в шаблоне корпорация "Чудеса". Создала новый тестовый блог на этом шаблоне, экспериментировала всю ночь. Да, температура не у меня, на улице жарко, только ночью немного свободно можно дышать. Я тебе в комментарии некорректно написала, но писала днем, жара.

      Удалить
  2. Здравствуйте, Ольга!
    Подскажите, а как поставить в самый низ картинку, что похожа была бы на установленную наверху гирлянду? То есть, футер менять не хочу. Хочу лишь добавить в низ картинку на всю ширину блога.

    ОтветитьУдалить
  3. Здравствуйте Здуард. В шаблоне вставьте код картинки выше закрывающего тэга body, где у Вас вставлены коды счетчиков.
    Если шаблон не примет, преобразуйте в генераторе, вкладка в меню Генератор кода. Пример посмотрите у меня в демо блоге по ссылке

    http://application-2.blogspot.com

    Или добавить гаджет вниз футера.

    ОтветитьУдалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *