Как изменить фон боковых панелей блога Blogspot



Меняем цвет фона sidebar в блоге с использованием CSS стилей 

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

Вариантов оформления много-это внешний фон, индивидуально оформленная шапка блога, шрифт, дизайн и.т.д. Я хочу предложить для Ваших блогов оформление боковых колонок, а именно расскажу, как в родных шаблонах blogspot изменить фон боковой колонки. 

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

Итак, экспериментировала на своем тестовом блоге, шаблон "простой". Кстати, можете сходить в этот блог и посмотреть для примера на боковые колонки. И обратите внимание на заголовок гаджета (пример слайдера), так как информация об изменении заголовка так же будет в этом посте.

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

#sidebar-right{ 
background:#ffefdb;}

Этот код для изменения фона в правой боковой колонке. У кого колонка слева, вместо right впишите leftЧтобы задать границы, нужно в код дописать border: 7px (размер границ) и groove # 2db3e9; (форма и цвет границ) и код будет выглядеть так:


#sidebar-right{
background:#ffefdb; 
border:7px groove #2db3e9;}


Здесь так же, у кого колонка слева измените right на left. Теперь, если в блоге две боковые панели, то необходимо вставить стили CSS и правой и левой панели

#sidebar-right{ 
  background:#ffefdb;
border:3px groove #2db3e9;
}
#sidebar-left{ 
 background:#ffefdb;
border:3px groove #2db3e9;
}

Настраивайте, меняйте цвета и размеры. Кому не нужны границы, удалите строку, у меня выделено. Далее, на заголовок виджета в тестовом блоге обратили внимание. Чтобы изменить стиль заголовка, нам надо узнать ID виджета. Можно посмотреть по заголовку виджета в шаблоне, но есть способ проще. В дизайне нажимаете изменить гаджет, смотрите скриншот

Показано где можно посмотреть ID виджета

Когда откроется вкладка с кодом виджета, вставьте курсор мыши в адресную строку, прокрутите стрелкой вправо (на клавиатуре) и в самом конце адреса увидите ID виджета. Выше строки ]]></ b:skin> вставляем стиль CSS


#HTML15 h2 {
background: url(http://3.bp.blogspot.com/-NJQq9XZ0OGk/UW1FE-7uu7I/AAAAAAAAAWw/xjiTeeQexSk/s1600/photo++for+sidebar.jpg);
height:30px;
width: 230px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-goog-ms-border-radius: 15px;
margin-left: 0px;
padding-top:5px;
font-family: Sans-serif, Arial;
font-size: 13px;
text-align: center;

}

HTML15-это ID виджета; выделенное синим-URL адрес изображения; красным-настройте ширину и высоту; фиолетовым-размер шрифта; border-radius: 15px;-размер округления границ; padding-top:5px;-расположение текста заголовка (верх-низ).

Вот и все. Комментируйте, делитесь с друзьями. Всего Вам доброго. Почитайте по теме красивое оформление основного фона и всех страниц блога.


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


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

4 коммент. :

  1. А как поменять фон у названий этих колонок? Типа "подписчики" или "популярные сообщения"?
    Хочу чтоб была только черная полосочка фоном к названию гаджетов, а содержание было также без цвета, не подскажите?:)

    ОтветитьУдалить
    Ответы
    1. Виктория, я так понимаю, Вам надо изменить фон заголовка виджета:

      http://www.bdblogov.ru/2014/06/asissue-header-widget-background-color.html

      Вот еще изображения для заголовков виджетов

      http://www.bdblogov.ru/2015/04/image-for-headers-widget.html

      Если неправильно Вас поняла, пишите.

      Удалить
    2. Да, спасибо большое!!! Все получилось!

      Удалить
  2. Пожалуйста Виктория, заходите еще за информацией.

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


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

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

Имя

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

Сообщение *