Установка затемнённого счётчика на wordpress

Декабрь 11th, 2012 |

Установка затемнённого счётчика на wordpress

Доброго времени суток уважаемые читатели блога Сам себе Seoшник!

В данном посте разговор пойдёт о правильной установке счётчика Li на wordpress блог. Когда то, создав свой первый сайт и увидев на других сайтах счётчики посещаемости, мне естественно тоже захотелось прилепить себе такой же. Но возникла проблемка, Как установить счетчик на сайт? я не знала, нет, сначала конечно мне показалось всё настолько простым, даже слишком, что я ни капельки не усомнилась в том что появиться проблема с установкой, а она появилась и счётчик посещаемости я установить не смогла. Так я и плюнула на это "грязное дело" и оставила попытки поставить счётчик аж на несколько месяцев. И вот с тех самых пор минуло почти четыре года, теперь я научилась установке счётчика 8) и ещё кое чему, поэтому для таких же новичков какой когда то была и я, опишу подробно весь процесс с картинками и примерами.

Как установить счетчик на сайт?

Давайте приступим непосредственно к установке и настройке счётчика. Я выбрала счётчик LiveInternet или коротко Li, потому что в нём есть буквально всё для точного отслеживания числа посетителей, посмотрите сами...

Теперь приступим к регистрации на сайте LiveInternet. Заходим на сайт и вверху ищем надпись "Получить счётчик", кликаем по ней.

Далее откроется окно регистрации, здесь всё проще простого, но я всё таки вписала дополнительные подсказки на скрине, вот теперь то уж точно просто, просто заполняете и все.

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

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

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

Установка кода счётчика

Счётчик следует устанавливать в два этапа. Первым делом установим верхнюю часть счётчика, она обведена синей рамкой. Данный код нужно установить как можно ближе к началу страницы в файле header.php (Заголовок), но после тега <body>. Нужно зайти в административную панель сайта wordpress и следовать подсказкам на картинках.

Идем дальше и ставим вторую часть кода. Её нужно установить в то место, где будет находиться счётчик, лично у меня на данный момент он установлен в подвале блога, а раньше был в сайдбаре, то есть в боковой панели, в общем то его и нужно ставить либо туда, либо в низ страницы. На примере будем устанавливать в подвал сайта. Теперь из списка файлов выберите footer.php, то биш подвал.

Если вы желаете что бы счётчик находился в серединке подвала нужно добавить в начале кода счётчика такие строчки <div align="center"> а в конце такую </div>, у вас должно получиться так:

Сделать счётчик затемнённым

Ну теперь самое интересное, будем делать затемнённым счётчик, в принципе это конечно не такое уж и нужное дело, но для красоты пойдет, да и просто прикольно и не так как у всех, что тоже аргумент. Делается это просто. К уже вставленному счётчику, тому который в подвале находиться нужно добавить маленький кусочек кода. В начало <span class="counter"> и в конец </span>, вот так он будет выглядеть:

И последний рывок, нужно прописать такие строчки кода в файл style.css или таблица стилей. Вставить данный код нужно в самый низ файла, это нужно для того что бы счётчик при наведении на него курсора менял цвет затемнения.

.counter a img { opacity:0.3; /* CSS3 – Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ -moz-opacity:0.3; /* Mozilla 1.6 */ filter:alpha(opacity=40); /* IE 5.5+*/ }
.counter a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); }

Не забудьте сохранить изменения. Если хотите предварительно посмотреть как будет выглядеть счётчик, посмотрите на моём блоге, в самом низу страницы.

Вот в общем то и всё, если что то непонятно, милости прошу в панель комментирования, отвечу на все ваши вопросы.

Подписка на новости ниже ↓