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

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

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

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

Примеры

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

HTML + PHP код

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

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

    <div class="counter"><?php feedburner_counter('название_вашего_фида'); ?></div>
  • для Twitter-счетчика:

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

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;
}

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

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

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

.counter {
	border-radius: 3px;
	box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15);
}

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

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

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

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

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

* * *

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

Комментарии (57)
  1. 1
    romka

    Счетчик действительно краше. Спасибо за код, сейчас и себе поставить попробую

  2. 2
    @

    Спасибо Dimox за это замечательное решение по видоизменению счётчика. Сделал у себя всё отлично. Правда про функцию сразу недопонял. Прочитал предыдущий пост и всё стало ясно.
    Вопрос не в тему поста: есть ли на Вашем блоге описание того как реализовать выпадающие правила комментирования, как у Вас? я так понимаю это через JQuery сделано?

  3. 6

    Оп, прямо сейчас сделаю себе на сайт. Красиво.

  4. 7
    @

    Может быть прикручу себе такой на блог…

  5. 8
    @

    странно, но почему то у меня на сайте отображается Ваше количество подписчиков, хотя в функции

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

    прописан мой фид ((

  6. 9

    Поставил себе на блог -клевый дизайн =)

  7. 10
    Alex Vi Key
    @

    Очередная фича;))) прикольно, надо будет внедрить и себе

    P.S.: надеюсь когда-нибудь количество моих подписчиков через FB поднимется выше «4»;)))

  8. 11
    @

    С недавнего времени почему то перестал работать счётчик. Цифра остановилась на 157, хотя уже намного больше на самом деле. В коде давно уже ни чего не менял. Что может быть?

Ваш комментарий