Красивый счетчик FeedBurner-подписчиков и Twitter-фолловеров на CSS3

Ранее я предлагал вашему вниманию статьи о том, как с помощью небольших функций, не прибегая к плагинам, вывести на WordPress-сайте текстом количество RSS-подписчиков по данным сервиса FeedBurner и количество Twitter-фолловеров.

В сегодняшнем посте я дополню данные статьи информацией о том, как красиво оформить эти счетчики с помощью технологии CSS.

Примеры

• Живой пример счетчиков вы можете наблюдать прямо на моем блоге в сайдбаре.
• Я подготовил примеры на отдельной странице с разными вариантами оформления счетчика.

HTML + PHP код

Код, который необходимо вставить в WordPress-шаблон в место вывода счетчика:

• для RSS-счетчика:

  <div class="counter"><?php feedburner_counter('название_вашего_фида'); ?></div>

• для Twitter-счетчика:

  <div class="counter"><?php twitter_followers('имя_вашего_аккаунта'); ?></div>

CSS-код

Теперь займемся непосредственно оформлением с помощью CSS. Его я делал по подобию стандартного счетчика FeedBurner, который отображается в виде картинки.

Рассмотрим код на примере коричневого счетчика (.brown). Основные стили выглядят следующим образом:

Пустой строкой я отделил стили, который отвечают за цветового оформление счетчика. У нас получается вот такой счетчик:

Для придания счетчику красивости и объемности добавим легкую тень и закругления углов с помощью соответствующих CSS3-свойств:

И конечный результат будет выглядеть следующим образом:

Как видите, мы написали совсем немного CSS-стилей и получили приятный глазу счетчик.

Что на счет браузеров?

Конечно же, всю гламурность, т.е. закругления и тень, можно будет увидеть только в современных браузерах, в список которых не попадают версии Internet Explorer ниже 9-й. В них вы увидите лишь плоский прямоугольник.

* * *

Вам нужно провести полный анализ сайта, проанализировать его внутренние и внешние ссылки, посмотреть на сайта глазами поискового робота? Эти и множество других полезных инструментов доступны бесплатно на сайте для веб-мастеров WebMasta.org.