Оформление гаджета Google Популярные сообщения с использованием CSS



Здравствуйте гости, друзья и дорогие мои читатели. Все вебмастера знают, что в макете блога мы можем добавить гаджет "Популярные сообщения". Гаджет конечно выглядит на троечку, поэтому ищем в интернете что-то поинтереснее для своих блогов.

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

Оформление родного гаджета Google Популярные сообщения с помощью CSS
Оформление гаджета с помощью CSS

Желающие посмотреть вживую приглашаю в демо блог, справа в сайдбаре. Итак, идем в шаблон, делаем резервную копию. Далее жмем изменить шаблон, находим строку <b:skin>.. ]]></b:skin>, раскрываем секцию стрелкой слева. Прокрутите чуть вниз и вставьте выше строки ]]></b:skin> код CSS. Смотрите на рисунке.

.popular-posts {background: #03b4cc;border:2px solid#0a9e08;border-radius:10px;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/
ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover { 
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
color:#f00;
}

Настройки: выделено жирным шрифтом: внешний фон, размер, цвет и радиус закругления углов виджета; коричневым: фон вкладок и адрес картинки (в гаджете символ слева, можете вставить свою картинку); no-repeat scroll 5px 10pxположение символа верх-низ; 

Оранжевым: закругление углов, размер и цвет границы вкладок; зеленым: цвет границ вкладок при наведении; сиреневым: изменить цвет при наведении на ссылки; сам цвет ссылок будет соответствовать оформлению в дизайнере шаблонов;

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

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

Рекомендую почитать:





Автор статьи ✎ Olga Protasova Выпуск ✹ 11/17/2015 Ярлыки ►


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

0 коммент. :

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

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

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

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

Имя

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

Сообщение *