Красивый счетчик 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
). Основные стили выглядят следующим образом:
.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.
Комментарии (57)
Счетчик действительно краше. Спасибо за код, сейчас и себе поставить попробую
Спасибо Dimox за это замечательное решение по видоизменению счётчика. Сделал у себя всё отлично. Правда про функцию сразу недопонял. Прочитал предыдущий пост и всё стало ясно.
Вопрос не в тему поста: есть ли на Вашем блоге описание того как реализовать выпадающие правила комментирования, как у Вас? я так понимаю это через JQuery сделано?
Есть, только там способ без jQuery – https://dimox.name/adding-comments-rules/
Спасибо ещё раз. Прочёл пост, реализовал у себя на блоге. Отличный у Вас сайт, много чего можно узнать.
Спасибо за отзыв!
Оп, прямо сейчас сделаю себе на сайт. Красиво.
Может быть прикручу себе такой на блог…
странно, но почему то у меня на сайте отображается Ваше количество подписчиков, хотя в функции
<div class="counter"><?php feedburner_counter('название_вашего_фида'); ?></div>
прописан мой фид ((
Поставил себе на блог -клевый дизайн =)
Очередная фича;))) прикольно, надо будет внедрить и себе
P.S.: надеюсь когда-нибудь количество моих подписчиков через FB поднимется выше “4”;)))
С недавнего времени почему то перестал работать счётчик. Цифра остановилась на 157, хотя уже намного больше на самом деле. В коде давно уже ни чего не менял. Что может быть?
Счетчик от FeedBurner больше обновляться не будет, т.к. Гугл в октябре закрыл API.
Т.е. теперь нет нужды в счётчике?
Ну это вам виднее. Актуальный показатель теперь можно вывести только с помощью официального информера.
А понял. А как у вас работает или нет?
Странный вопрос. Естественно нет.
Да))) точно странный:)) Просто подумал, если не работает то почему не поменян ещё.