Прозрачные счетчики сайта (статистика)

статистика сайта прозрачная

Доброго времени суток! Все владельцы сайтов хотят знать, сколько человек посетило их творение. Поэтому, статистика сайта — очень важный аспект. 

Вы определились с сервисом статистики, перелопатили все настройки, подобрали цветовую гамму и установили счетчик себе на сайт, но все же что-то не нравится. Либо цвет не подходит полностью, либо вовсе не хочется, чтобы этот счетчик мелькал на страницах сайта. Решение есть, оно довольно простое  и подойдет для любого сайта, с любой системой управления.

  • Для начала найдите свои счетчики, а точнее их код. У меня, они расположены в подвале сайта (footer.php) и выглядят примерно так:

статистика сайта счетчики

  • Далее, вам нужно заключить этот код в параметр div со своим id, это будет выглядеть вот так:
<div id="counters">
Код вашей статистики (счетчика), баннера, картинки, чего угодно,
чему нужно придать прозрачности. Кракозябры и разные бяки =)
</div>
  • Почти готово! Осталось задать параметры прозрачности в файле стилей, он имеет расширение .css (например, в style.css или main.css). Для этого открываем файл стилей и добавляем следующие строки:
#counters {
  opacity: 0.1;
}
#counters:hover {
  opacity: 1;
}
  • Вот и все! Теперь, ваша статистика сайта прозрачна. Меняйте значение opacity и настройте его под свои нужды.
  • Пример на DayAfterNight.ru (внизу справа):

dayafternight_counters

Разбираем код:

  • #counters — стили для блока div
  • opacity: 0.1; — значение задается от 0 до 1. При 0 — счетчик не видно вовсе, при 1 — счетчик виден на 100%
  • #counters:hover — стили для блока div при наведении курсора мыши

Конечно, этот код не идеален, он довольно прост и может быть доработан вами как угодно. В данном примере, который предоставлен выше, все элементы блока div, подчиняются правилу прозрачности и будут срабатывать одновременно (при наведении все счетчики будут подсвечиваться).

Мы можем его усовершенствовать и сделать правила прозрачности только для изображений счетчиков, тогда при наведении мыши будет подсвечиваться каждый по отдельности, а не все сразу:

#counters a img {
  opacity: 0.1;
}
#counters a:hover img {
  opacity: 1;
}

Для примера, выйдет вот так:

countersЭкспериментируйте, возможно, у вас выйдет лучше, чем у меня. Делитесь своими идеями в комментариях, подписывайтесь на обновления блога, чтобы не пропустить новые статьи.

 

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
3 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Userx
Userx
4 лет назад

Благодарю за информацию.

3
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x
Send this to a friend