Красивый счетчик FeedBurner-подписчиков и Twitter-фолловеров на CSS3
Опубликовано: 23.08.2018
Ранее я предлагал вашему вниманию статьи о том, как с помощью небольших функций, не прибегая к плагинам, вывести на WordPress-сайте текстом количество RSS-подписчиков по данным сервиса FeedBurner и количество Twitter-фолловеров .
В сегодняшнем посте я дополню данные статьи информацией о том, как красиво оформить эти счетчики с помощью технологии CSS.
Примеры
Живой пример счетчиков вы можете наблюдать прямо на моем блоге в сайдбаре. Я подготовил примеры на отдельной странице с разными вариантами оформления счетчика.HTML + PHP код
Код, который необходимо вставить в WordPress-шаблон в место вывода счетчика:
CSS-код
Теперь займемся непосредственно оформлением с помощью CSS. Его я делал по подобию стандартного счетчика FeedBurner, который отображается в виде картинки.
Рассмотрим код на примере коричневого счетчика (.brown). Основные стили выглядят следующим образом:
.counter { display: inline-block; overflow: hidden; padding: 0 5px 0 0; margin: 0 15px 15px 0; font: bold 11px/22px Arial, Tahoma, sans-serif; *display: inline; /* IE6, IE7 */ *zoom: 1; /* IE6, IE7 */ color: #FFF; background: #CA0000; border: 1px solid #B90000; } .counter .count { float: left; padding: 0 3px; margin: 1px 6px 0 1px; font-size: 13px; height: 17px; line-height: 18px; background: #E37979; border: 1px solid #B90000; border-right-color: #ECC0BD; border-bottom-color: #ECC0BD; }Пустой строкой я отделил стили, который отвечают за цветового оформление счетчика. У нас получается вот такой счетчик:
Для придания счетчику красивости и объемности добавим легкую тень и закругления углов с помощью соответствующих CSS3-свойств:
.counter { border-radius: 3px; box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15); }И конечный результат будет выглядеть следующим образом:
Как видите, мы написали совсем немного CSS-стилей и получили приятный глазу счетчик.
Что на счет браузеров?
Конечно же, всю гламурность, т.е. закругления и тень, можно будет увидеть только в современных браузерах, в список которых не попадают версии Internet Explorer ниже 9-й. В них вы увидите лишь плоский прямоугольник.
* * *
Вам нужно провести полный анализ сайта , проанализировать его внутренние и внешние ссылки, посмотреть на сайта глазами поискового робота? Эти и множество других полезных инструментов доступны бесплатно на сайте для веб-мастеров WebMasta.org.