Как изменить фон боковых панелей блога 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 виджета

Когда откроется вкладка с кодом виджета, вставьте курсор мыши в адресную строку, прокрутите стрелкой вправо (на клавиатуре) и в самом конце адреса увидите 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;-расположение текста заголовка (верх-низ).

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

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




Автор статьи ✎ Olga Protasova Выпуск ✹ 2/04/2020 Ярлыки ►


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

6 коммент. :

  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. Пожалуйста Виктория, заходите еще за информацией.

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

    ОтветитьУдалить
    Ответы
    1. VtravelS, здравствуйте. Протестировала во многих шаблонах, действительно, фон не меняется. Нужны небольшие изменения. Статью дописала, пробуйте первые CSS стили, должно получится. Напишите.

      Удалить


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


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

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

Имя

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

Сообщение *