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

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

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

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

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

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

  • Далее, вам нужно заключить этот код в параметр div со своим id, это будет выглядеть вот так:
  • Почти готово! Осталось задать параметры прозрачности в файле стилей, он имеет расширение .css (например, в style.css или main.css). Для этого открываем файл стилей и добавляем следующие строки:
  • Вот и все! Теперь, ваша статистика сайта прозрачна. Меняйте значение opacity и настройте его под свои нужды.
  • Пример на DayAfterNight.ru (внизу справа):

dayafternight_counters

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

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

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

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

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

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

 

Также посмотрите

короткая ссылка

Короткая ссылка и где она применяется

Короткие ссылки иначе называют шифрованными или кодированными ссылками. В наши дни без них не обходится …

3 комментария

  1. Рад, что статья была вам полезной :oops:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Send this to a friend