Примеры оформления виджета Избранное сообщение на CSS



Здравствуйте друзья и читатели блога. Не так давно Google добавил в список гаджет Избранное сообщение. Особой популярностью он пока не пользуется, но все же на некоторых блогах владельцы добавили новый гаджет.

Только вот вид такого избранного виджета оставляет желать лучшего. Применим стили CSS и оформим наш гаджет на свой вкус и цвет.

Как добавить гаджет: дизайн-добавить гаджет-выбрать "избранное сообщение"

Как добавить и выбрать  гаджет Избранное сообщение

Пишем название гаджета или оставляем как есть. Обязательно установите отметку "показывать заголовок сообщения" и "показывать изображение" Текстовый фрагмент по желанию.

Можно использовать последнее опубликованное сообщение или выбрать по ярлыкам. Откройте список и выберите нужное сообщение из любого ярлыка. Посмотрите предварительный просмотр и нажмите "сохранить".

Самое простенькое оформление в рамку и изменить фон гаджета

HTML код для вставки в шаблон блога.

 HTML код

<style>
#FeaturedPost1{
background:  #f8f8ff; *// фон гаджета;
border:7px groove #03b4cc; *// размер, форма и цвет рамки;
font-size:20px;color:#f00; *// размер и цвет шрифта;
}
</style>

Такая стильная рамочка оформления

Код для вставки в шаблон

HTML код

<style>
#FeaturedPost1{
margin:1px; 
padding: 20px;
background: #f8f8ff; *// цвет фона;
text-align:italic; *// шрифт наклонный;
color: #444444; *// цвет шрифта;
border: 3px solid #029d74; *// размер. форма и цвет рамки;
border-radius: 8px; *// размер скругления углов рамки;
-moz-border-radius: 8px; *// размер скругления углов рамки;
-webkit-border-radius: 8px; *// размер скругления углов рамки;
box-shadow: inset 0 0 20px #029d74; *// цвет тени;
-moz-box-shadow: inset 0 0 20px #029d74; *// цвет тени;
-webkit-box-shadow: inset 0 0 20px #029d74; *// цвет тени;
 }
</style>


Еще вариант рамки с цветовой тенью

Код для вставки в шаблон

HTML код

<style>
#FeaturedPost1 {
font-style:italic;
box-shadow:-1px -2px 37px rgba(63, 175, 133, 1);
-webkit-box-shadow:-1px -2px 37px rgba(63, 175, 133, 1);
font-size:;
padding:20px;
margin:px;
}
</style>


Вот несколько вариантов оформления виджета избранного сообщения. Вы оформляйте на своё усмотрение. В помощь информация по ссылкам:

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

Text.ru - 100.00%





Автор статьи ✎ Olga Protasova Выпуск ✹ 12/05/2018 Ярлыки ►


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

0 коммент. :

Отправить комментарий


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


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

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

Имя

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

Сообщение *