Оформление родного гаджета Google комментарии с иконками



Здравствуйте дорогие читатели, друзья и гости блога. Последнее время Google хорошо поработал, у многих в blogger "полетели" скрипты сторонних разработчиков.

Такое и раньше периодически происходило, но в последнее время прямо какой-то бум. Спасибо, что хоть предупреждают.

У себя в блоге я давно удалила все сторонние скрипты, стараюсь пользоваться родными гаджетами Google, это популярные сообщения на главной, гаджет "страницы" в сайдбаре, последние посты и комментарии.

Правда оформление этих виджетов оставляет желать лучшего, поэтому сегодня и поговорим, как нам приукрасить виджет комментарии, используя стили CSS.

В статьях ниже я писала о разных вариантах оформления родных виджетов Google, рекомендую посмотреть:

Родной гаджет Google-Канал для комментариев и новых постов;
Оформление гаджета поиск Google и других с использованием CSS;
Оформление гаджета Google Популярные сообщения с использованием CSS;

И давайте перейдем к комментариям. Хочу предложить Вам три варианта оформления, два с иконками, один с символами.

Для начала идем в дизайн, нажимаем добавить гаджет Канал

Добавить гаджет Канал

В поле вставьте адрес  http://www.bdblogov.ru/feeds/comments/default, настройте и нажмите сохранить. Адрес моего блога измените на свой.

С иконкой  RSS ленты

Комментарии с иконкой RSS ленты

Стиль CSS

#Feed1 ul{padding-left:0}#Feed1 ul li{background:#FFF url(https://feedburner.google.com/fb/images/pub/feed-icon16x16.png) no-repeat scroll 5px 10px;list-style-type:none;margin:0 0 3px;padding:5px 5px 5px 25px !important;border:1px solid #ddd;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}#Feed1 ul li:hover{border:1px solid #6BB5FF}#Feed1 ul li a:hover{text-decoration:none}

С иконкой Feed Icons

Комментарии с иконкой Feed

Стиль CSS

#Feed1 ul{padding-left:0}#Feed1 ul li{background:#FFF url(https://feedburner.google.com/fb/lib/images/icons/what.gif) no-repeat scroll 5px 10px;list-style-type:none;margin:0 0 3px;padding:5px 5px 5px 20px !important;border:1px solid #ddd;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}#Feed1 ul li:hover{border:1px solid #6BB5FF}#Feed1 ul li a:hover{text-decoration:none} 

Оформление: Feed1, это ID виджета. Нажмите изменить гаджет и в адресной строке посмотрите ID; выделено зеленым, адрес изображения; в первом варианте 16х16 размер иконки; сиреневым, расположение иконки; красным, измените цвета под дизайн своих блогов; коричневым, форма окантовки рамки при наведении мыши. 

Последний вариант оформления с символом смотрите в этом блоге справа, гаджет Комментируем. Адрес картинки:

http://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/
ZSXbVW9Qpa8/s400/261.gif

Выбранный стиль CSS вставьте в шаблон изменить шаблон выше строки ]]></b:skin>. Кто еще не знает, где в шаблоне искать строку, почитайте пост Как быстро и красиво оформить текст блога

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

Предыдущий пост:  Клавиатурные комбинации Вставить в текст стрелки и другие символы;

TEXT.RU - 100.00%




Автор статьи ✎ Olga Protasova Выпуск ✹ 9/14/2016 Ярлыки ►


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

0 коммент. :

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

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

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

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

Имя

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

Сообщение *