Задаем оформление виджетов на Blogger

Как оформить виджеты на блоге Blogger. На многих блогах виджеты занимают значительную область блога. Виджеты (гаджеты) – это элементы блога, которые несут определенную функциональную ценность или являются просто украшением вашей странички.
Задать собственное оформление виджетам вы можете, используя стили css. Виджеты на Blogspot добавляют во вкладке “Дизайн”.
Виды стандартных виджетов и через какие идентификаторы и классы к ним можно добавить стили:
/*

Список виджетов	Изменения всего виджета. Вы можете изменить фон, стиль шрифта, положение, цвет, границы виджета.	Изменение отдельных элементов виджетов (изменение заголовка виджета, тела, кнопки и др.)
Все виджеты	.widget	.widget-content – тело виджета .widget h2 или .widget h3 – заголовок виджета .sidebar .widget h2 – заголовок виджета сайдбара .sidebar .widget-content – тело виджета сайдбара .sidebar a – ссылки в сайдбаре .sidebar .widget-content a – ссылки в виджетах сайдбара
Подписчики гугл+	#PlusFollowers1	меняем оформление в настройках виджета
значок гугл+	#PlusBadge1	настраиваем виджет при помощи специальнх настроек.
переводчик	#Translate1	.goog-te-gadget .goog-te-combo
рассылка по электронной почте	#FollowByEmail1	input.follow-by-email-submit – кнопка “отправить”, input.follow-by-email-address – строка
популярные сообщения	#PopularPosts1	.widget-content.popular-posts .item-thumbnail – оформление миниатюр, .item-title – текст популярных сообщений.
статистика блога	#Stats1	#Stats1_content
страницы	#PageList98	#PageList98 – настраиваем размер меню (из страниц), #PageList98 a:link #PageList98 a:visited #PageList98 a:hover
адсенс	#AdSense1,	оформление блоков через настройку в панели google adsense
окно поиска	#CustomSearch1	input.gsc-search-button – кнопка поиска, input.gsc-input – поисковая строка
HTML / JavaScript	#HTML1, #HTML2, #HTML3
Текст	#Text1	#Text1 h2- стили заголовка #Text1 .widget-content – стили тела виджета
Изображение	#Image1	#Image1 h2- стили заголовка #Image1 .widget-content – стили тела виджета
Показ слайдов	#Slideshow1	#Slideshow1 h2 - заголовок .slideshow-container – тело виджета .slideshow-container – контейнер слайд-шоу
Панель видео	#VideoBar1
Опрос	#Poll1	.answerText пункт вопроса, div#widget-content – поле с вопросами,
Blog List	#BlogList1	#BlogList1 h2 #BlogList1 a:link #BlogList1 a:visited #BlogList1 a:hover
Список ссылок	#LinkList1	#LinkList1 h2 #LinkList1 a:link #LinkList1 a:visited #LinkList1 a:hover
Список	#TextList1	- // -
Канал (RSS)	#Feed1	- // -
Новости	#NewsBar1	- // -
Ярлыки (метки)	#Label1	#Label1 a
Ссылки для подписки	#Subscribe1	div.subscribe #Subscribe1 h2 или #Subscribe1 h3 – заголовок виджета подписки #PageList98 a:link #PageList98 a:visited #PageList98 a:hover
Архив блога	#BlogArchive1	#ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited, #ArchiveList a.toggle:hover – маркеры списка архива, .BlogArchive #ArchiveList ul li – списки архива блога. li.archivedate.expanded – число постов в раскрытом списке месяца., li.archivedate.collapsed – число постов в нераскрытом списке #ArchiveList a – изменяем ссылки в архиве
Форма для связи (обратная связь)	#ContactForm1 .contact-form-widget	.contact-form-name – поле имени .contact-form-email – поле e-mail .contact-form-email-message – поле сообщение

Поэкспериментировать с добавлением и изменением стилей виджетов вы можете прямо в брауере. Как это сделать я уже писала в статье Как изменить шаблон сайта.
Пример оформления виджета при помощи стилей (для виджета Опрос):

Заданы ширина и высота виджета, отступы css, граница border и закругления углов границы.
Код стилей css добавляем перед ]]></b:skin> в шаблоне блога. Определяемся с областью виджета, на которую будут направлено действие стилей. Выбираем соответствующий id или класс из таблицы выше, ставим фигурные скобки, внутри которых прописываем свойства и значения. Схема: id {ваши стили}
Пример кода стилей:

#Poll1 {
width: 270px;
margin: 5 5px;
padding: 15px 15px;
border: 2px solid #5BC4BE;
border-radius: 15px;
}