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

---

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

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

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

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

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

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

Только фон боковой колонки

.sidebar{ 

  background:#03b4cc;

}

С границей рамки

.sidebar{

  background:#03b4cc;

border:3px groove #2db3e9;

}

Если шаблон с одной боковой панелью, изменится цвет фона правой или левой колонки. С двумя, изменится фон обоих. Можно стили CSS вставить дизайн добавить гаджет:

<style>
.sidebar{
  background:#03b4cc;
border:3px groove #2db3e9;
}</style>

Ниже стили 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 виджета. Выше строки ]]></ b:skin> вставляем стиль CSS

#HTML15 h2 {

background: url(адрес изображения);

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;-расположение текста заголовка (верх-низ).

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

Рекомендуемый контент: