Как сделать счетчик в html

Как сделать счетчик в html

Счетчики посещений можно найти почти на любом сайте, а если их не видно визуально, то это ещё совсем не означает, что их нету. Настоящий веб-мастер и оптимизатор обязательно должен знать сколько человек посещают его ресурс, по каким запросам они переходят и т.п. Некоторые даже ставят счетчики на видное место, чтобы похвастаться перед другими пользователями (веб-мастерами). Из этой статьи Вы узнаете о том, как добавить счетчик посещений к себе на сайт, а также как выбрать счетчик.

1. Кому и для чего нужен счетчик на сайте

Обычный пользователь далекий от создания сайтов не имеет представления, что считается большой посещаемостью, а что маленькой. Значит хвастаться перед такими пользователями посещаемостью нету никакого смысла. Поэтому надо чётко понимать, что счетчик необходим прежде всего веб-мастеру. А нужен он для того, чтобы отслеживать общую посещаемость, а так же следить за детальной статистикой: какой материал на сайте наиболее интересен, какое среднее время пребывания на сайте, какие поисковые запросы привлекли пользователей и т.д.

2. Какой счетчик выбрать

Для начала надо определиться какой счетчик установить на свой сайт. Сразу скажу, что выбор из действительно стоящих бесплатных счетчиков не велик. Я бы порекомендовал обязательно поставить на сайт счетчик от liveinternet.ru. Этот счетчик обладает большими статистическими способностями. Например, он позволяет отслеживать поисковые запросы (точнее сказать позволял, т.к. теперь переходы с ПС стали хешироваться), точки входа/выхода, количество просмотров страниц, переходы с сайтов, с поисковых систем и т.д.

Так же хорошими счетчиками являются top100.rambler.ru и metrika.yandex.ru. В итоге, я предлагаю ставить на сайт четыре счетчика:

Также можно поставить к себе и Google Analitics (но я обычно его не ставлю).

Теперь расскажу о главном: как установить счетчик на сайт.

3. Установка счетчика на сайт

3.1. Счетчик от liveinternet.ru

Форма для добавления сайта в систему: http://www.liveinternet.ru/add.

Я думаю, что объяснять как заполнять форму при добавление сайта не стоит, поскольку здесь все очевидно. Единственное, что хочу сказать: в последнем пункте "участие в рейтингах" не забудьте выбрать категорию (если, конечно, Вы планируете участвовать в общем рейтинге). Далее Вы попадете на страницу, где Вас попросят проверить правильность введенных данных. Если Все правильно, то нажимаете на кнопку зарегистрировать.

Попав на следующую страницу нажимайте на "получить html-код счетчика". Вы попадете на страницу выбора счетчика:

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

После этого внизу страницы нужно выбрать тип счетчика.

Я всегда выбираю самый первый пункт: "в виде одной картинки" (он стоит по умолчанию). Далее в самом низу страницы будет кнопка "получить html-код счетчика", нажимайте на неё и перед Вам откроется новая страница с кодом.

Код счетчика LiveInternet выглядеть примерно так:

Полученный код нужно вставить в том месте Вашей html-страницы, где Вы хотите, чтобы был счетчик. Советую ставить его в самом низу страницы, чтобы не тормозить загрузку страницы.

Также советую закрыть счетчики в тег , а к тегу a прибавить атрибут rel="nofollow" , чтобы не передавать ссылочный вес.

3.2. Счетчик от top100.rambler.ru

Для начала нужно зарегистрироваться в рамблере: https://id.rambler.ru/account/external-registration. После этого авторизуйтесь и переходите на странице "добавить сайт".

Далее следуйте инструкциям. В общем смысл примерно тот же самый, что и в первом случае. Здесь придется заполнить немного больше полей, чем у лайвинтернета. В самом конце Вам будет предложено выбрать тип счетчика:

Читайте также:  Как почистить компьютерную клавиатуру

После этого получаете код счетчика и так же как в первом случае вставляете его в том месте на сайте, где хотите, чтобы он выводился.

Код будет выглядеть примерно так:

Рамблер стал очень капризным к модерации ресурсов. Сюда принимают только белые сайты. Если сайт серый, то его отклонят.

3.3. Счетчик от metrika.yandex.ru

Для добавления сайта в Яндекс Метрику Вы должны быть авторизированы на яндексе. После этого переходите на страницу http://metrika.yandex.ru/list/ и нажимайте вверху "добавить счетчик".

После этого необходимо будет заполнить соответствующие поля и аналогичным образом разместить код на сайте. Обычно счетчик от метрики я делаю невидимым на сайте.

После того как Вы добавите счетчики на сайт через пару деньков уже можете начинать анализировать статистику сайта.

3.4. Счетчик от top.mail.ru

Для добавления сайта в TOP Mail нужно зарегистрироваться в Mail.ru. После этого переходите на страницу https://top.mail.ru/add и вводите данные для добавления сайта.

У этого счетчика схожие параметры для просмотра счетчика с LI. Т.е. практически те же пункты. В этом плане, конечно, Яндекс Метрика куда интереснее.

Счетчик от мэйла хорош в первую очередь тем, что его рейтинг посещают множество пользователей. С этого рейтинга будут переходы на ваш сайт, если он будет иметь довольно большую посещаемость.

4. Как сделать счетчик посещений красивым

В качестве бонуса я расскажу о том, как сделать счетчик более красивым. Для этого Вам понадобится написать в своей таблице стилей CSS следующий код:

А в месте, где нужно вставить коды счетчиков прописать следующие:

После этого у Вас будут счетчики как на этом сайте, т.е. они затемнены, а при наведение становятся яркими.

Спецификация CSS2.1 содержит технику, которая позволяет разработчику комбинировать три свойства CSS и псевдо-элемент для создания счетчика с автоинкрементом, подобного тому, который используется в упорядоченном списке.

В отличие от счетчика списка, который имеет применение только для элементов

    или

      и только с простым инкрементом, новый метод организации счетчика, введенный в CSS2.1, может быть использован с любым набором элементов и имеет более широкие возможности организации счета.

Данный метод может сбить столку, так как он использует несколько свойств и отличается от обычного кода CSS. В уроке мы постараемся прояснить использование такого счетчика и указать его преимущества и недостатки.

Синтаксис

Код CSS счетчика выглядит следующим образом:

Как уже упоминалось, используется три свойства CSS: counter-reset , counter-increment , и content . Если какое-либо из указанных свойств будет пропущено, то метод не будет работать.

Разбор синтаксиса

Итак, разберемся с синтаксисом и тем, для чего предназначены пары свойство/значение:

Индикатор контекста

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

Но для контекста нужно определить имя счетчика, который будет использоваться для элементов, объявленных в следующем блоке.

Сброс счетчика

Свойство counter-reset должно использоваться в сочетании с селектором, который определяет контекст, как уже описывалось выше. Первая часть значения является пользовательским именем, которое вы задаете для счетчика. Это обязательная часть. Имя может быть любым, кроме зарезервированных слов для CSS (например, вы не можете задавать счетчику имя “none”, “inherit”, или “initial”).

Вторая часть значения для свойства counter-reset является необязательной. По умолчанию устанавливается величина “0″. Данное число указывает точку отсчета для счетчика. Важно помнить, что счет начинается со следующего целого значения после величины сброса. Таким образом если вы установили значение "0", счетчик начнет с “1″. А если было установлено "-5", счетчик начнет с "-4", и так далее.

Читайте также:  Как замазать глаза в фотошопе

Нумерованные элементы

Второй блок объявлений (селектор h2 ) использует псевдо-элемент :before для указания места размещения специфического контента (используется свойство content ) перед всеми целевыми элементами (в нашем случае — это элементы

Увеличение счетчика

Свойство counter-increment указывает, с каким контекстом в действительности ассоциирован счетчик. Таким образом, первое значение (обязательное) является соответствующим пользовательским именем счетчика из свойства counter-reset в идентификаторе контекста из первого блока объявлений.

Второе значение свойства counter-increment задавать не обязательно. Оно представляет величину на которую надо увеличивать счетчик (или уменьшать — если вы задали отрицательное значение). По умолчанию устанавливается “1″.

Содержание вставки

С помощью свойства content мы точно указываем, что должно вставляться перед каждым элементом в заданном наборе (элементы

Единственным обязательным значением для свойства content является функция counter() , но, обычно, добавляется что-нибудь еще (например, пробелы) до или после (смотрите выше приведенный пример), чтобы придать счетчику отличный вид.

Функция counter()

Функция counter() может принимать два аргумента, разделенных запятой. Первый аргумент указывает на текущее значение именованного счетчика. Второй аргумент является не обязательным и указывает формат вывода значения счетчика. По умолчанию используется “decimal”, но можно указать “upper-roman”, “upper-alpha”, и так далее (также как и для свойства list-style-type упорядоченного списка).

Вы также можете использовать функцию counters() и организовывать вложенные счетчики, но в рамках данного урока мы их рассматривать не будет.

Графическое обобщение

Если все выше сказанное кажется сложным, то на приведенной ниже инфограмме описываются основные элементы счетчика CSS:

Поддержка браузерами и недостатки

Несколько счетчиков, которые используются для одного контекста (для построения каскада нумерации) должны объявляться вместе. Следующий пример работать не будет:

Только второй счетчик будет действовать, потому что он переопределяет предыдущий. Таким образом, оба счетчика нужно объявлять в одной строке:

Потенциальный недостаток использования счетчиков — смешивание контента и его представления. Особенно, данное утверждение касается свойства content . Линия раздела между контентом и представлением размывается.

Три указанных свойства и псевдо-элемент, которые описывают функционал счетчика CSS, не поддерживаются в IE версий 7 и старше, и могут иметь проблемы в IE8, Opera, и Safari. Firefox и Chrome поддерживают все описанные свойства без проблем.

Преимущества и практическое использование

Счетчики CSS имеют очевидное преимущество, которое заключается в отсутствии необходимости беспокоиться о нумерации различных пунктов в контенте. Подобно упорядоченным спискам, контент не имеет реальных цифр. Можно вставлять элементы, удалять элементы, менять их местами, а цифровые указатели будут автоматически исправляться сами.

Некоторые примеры практического использования:

  • Именование и нумерация глав (как в нашем примере)
  • Нумерация строк таблицы или ее ячеек
  • Нумерация заголовков HTML
  • Улучшение/изменение внешнего вида или увеличивающегося значения для обычных упорядоченных списков

Можно ли использовать счетчики CSS?

Так как они не поддерживаются в IE6 и IE7, то для клиентских сайтов не стоит использовать счетчики CSS, или нужно искать им подходящую замену. Но для веб сайтов и приложений, нацеленных на более техничную аудиторию (например, сайт для использования на мобильных устройствах, браузеры которых поддерживают CSS3) такие счетчики могут стать эффективным способом создания системы нумерации пунктов контента без использования программирования.

На демонстрационной странице можно посмотреть пример использования счетчиков CSS для заголовков.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.impressivewebs.com/css-counter-increment/
Перевел: Сергей Фастунов
Урок создан: 14 Сентября 2010
Просмотров: 25990
Правила перепечатки

Читайте также:  Компьютер персональный настольный моноблок

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Мы разработали МеgaTimer, новый бесплатный таймер обратного отсчета онлайн с функциями зацикливания и отложенного запуска. Благодаря данным настройкам, счетчик может автоматически обнуляться каждый день.

Мегатаймер – это простой онлайн-сервис, не требующий знания программирования и сложной настройки. Мы максимально упростили интерфейс, используя бегунки и переключатели, чтобы вы смогли настраивать таймер для своего сайта очень гибко. Изменение размеров, шрифтов, типов и форматов – позволяет сделать полностью кастомизированный счетчик обратного отсчета для своего сайта бесплатно.

Счетчик обратного отсчета на сайт

Счетчик обратного отсчета позволяет повысить конверсию вашего сайта или landing page. Используя таймер обратного отсчета, можно гибко выстроить коммуникацию с вашими пользователями. Рассмотрим основные типы таймера обратного отсчета:

Счетчик до определенной даты:

Данный тип позволяет выставить время окончания таймера, причем учитывая локальное время пользователя. То есть, если счетчик автоматически будет пересчитывать время для пользователей, находящихся в разных часовых поясах. Теперь, вам не нужно ломать голову как закончить акцию по всей России в один момент времени.

Либо вы можете выбрать конкретный часовой пояс в таймере обратного отсчета. Данный вариант обычно используют локальные сайты или интернет-магазины из конкретного города или региона.

Счетчик на промежуток времени:

Данный формат счетчика эффективно используется для таймеров, которые отсчитывают несколько часов или минут, заставляя посетителя сайта быстрее сделать нужное целевое действие. Например «У вас есть 10 минут, чтобы оформить заявку получить скидку 30% на все товары».

Начало отсчета может быть прямо сейчас, либо отсчет таймера начнется с момента первого посещения клиентом сайта. Таймер будет автоматически отсчитывать время для каждого нового пользователя, который зашел на страницу.

Зацикленный таймер:

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

Данный вид таймеров используется для перезапуска акций на самые популярные товары. Например «Успейте сегодня купить сайт по акции со скидкой 40%».

Вставка скрипта обратного отсчета

Вы сможете легко установить скрипт обратного отсчета Megatimer. Теперь нет необходимости искать Javascript и jquery таймер обратного отсчета, так как счетчик легко устанавливается через html вставку таймера. Html код счетчика генерируется на сервисе и его нужно просто вставить на сам сайт.

Обратная связь

Если у вас есть предложения по улучшению качества сервиса или по функционалу таймера – пишите на почту support@lpmotor.ru Если вы уже используете наш таймер обратного отсчета на своем сайте – напишите нам о вашем сайте и расскажите, как вы используете функционал счетчика. Лучшие истории будут попадать в раздел «Примеры использования», где вы сможете прорекламировать свою деятельность и свой сайт полностью бесплатно.

Web-благотворительность

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

Ссылка на основную публикацию
Как сделать ксерокопию на принтере epson
Вы можете использовать сканер с принтером, подсоединенные к компьютеру, в качестве копировальной машины. Вы можете увеличивать или уменьшать изображение, восстанавливать...
Как самостоятельно оцифровать видеокассету
На сегодняшний день эра видеокассет безоговорочно подошла к концу, а на ее место пришли цифровые носители. Что делать в том...
Как сбросить биос джампером
Настройки базового оборудования и времени вашего компьютера хранятся в БИОС и, если по какой-то причине у вас возникли проблемы после...
Как сделать левый ноль в частном доме
Популярные материалы Today's: Как сделать левое электричество в частном доме. Подключение левой розетки внутри дома Здесь применяется тот же самый...
Adblock detector