Как изменить стиль одного или нескольких гаджетов в BLOGGER

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

Я буду показывать на одном гаджете. Для примера я взяла гаджет менюшки на тестовом блоге. Чтобы изменить стиль определенного гаджета, для оформления нужно использовать его уникальный идентификатор или класс. Здесь всё делается двумя кликами. В разделе дизайн откройте нужный виджет и подведите курсор к самой верхней строке. Появиться строка примерно такого вида, где в самом конце и есть класс нужного виджета. 

У меня этот виджет был HTML6.  Из стандартных это могут быть

Followers1(.Followers1) - Постоянные читатели;
BlogArchive1(.BlogArchive1) - Архив ;
PageList1(.PageList1) - Страницы;
PopularPosts1(.PopularPosts1) - Популярные сообщения;
CustomSearch1(.CustomSearch1) - Поиска;
LinkList1(.LinkList1) - Список ссылок;
Profile1(.Profile1) - Профиль автора;
FollowByEmail1(.FollowByEmail1) - Подписка по email; и другие

Давайте уже смотреть, как можно изменить стили отдельно взятого гаджета.

Рамка для виджета

#HTML6{

padding: 5px;

border: 1px solid #ff0000; 

}

Виджет с заливкой фона и рамкой

#HTML6 {

padding: 5px;

border: 1px solid #ff0000;

background:#bea7c9; 

} 

Тень 

#HTML6 {padding: 5px; border: 2px solid #ff0000;  box-shadow: 3px 3px 3px #ff0000;}

Закругляем углы у рамки 

#HTML6 {padding: 5px; border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; } 

То же самое но с залитым фоном

#HTML6 {padding: 5px; border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;  background:#bea7c9; } 

А это пример, как собрать всё воедино и ещё добавить картинку фоновую

#HTML6 {padding: 5px; border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:url(здесь адрес картинки);box-shadow: 3px 3px 3px #ff0000;  }

Вот такое поле для творчества. И, как я говорила, можно сделать разные стили ко всем гаджетам или к одному определённому. Меняйте цвета, ширину и цвета рамок, фон, закругление углов.

Можно задать стили и к заголовку гаджета. В стандартных шаблонах обычно за них отвечает тег h2, если вы ничего не меняли. Вот специально поярче сделала для наглядности

Тогда поступаем так же, а код будет такой 

 

#HTML6 > h2 {/*стили для заголовка этого гаджета*/}

В моём варианте такой 

#HTML6 > h2 {padding: 5px; border: 5px solid #ff0000; -moz-border-radius:10px; -webkit-border-radius:10px; background:#ff99b8;box-shadow: 3px 3px 3px #ff0000; }

Как говорится - творите что хотите. Все коды устанавливаем в шаблоне блога над строкой ]]></b:skin>.

Ещё статьи по оформлению гаджетов в Блоггере

Как сделать по центру заголовок гаджетов

Как оформить первые буквы в названии поста и виджета 

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email