Как установить счетчик статистики в блог

Доброго времени суток, уважаемые читатели. Вы считаете, что вы знаете, как установить счетчик статистики и другие кнопки в блог? Не стоит быть такими самоуверенными:). Предлагаю вашему вниманию элегантное решение для блогов, компактный блок со счетчиками и другими кнопками. Моя статья пригодится не только новичкам, которые вообще не знают, как устанавливаются счетчики в блог, но и бывалым блоггерам.

Как установить счетчик статистики
Лично я большой приверженец минимализма, и в дизайне сайтов внешнему виду придаю последнее значение. Больше ценю удобство и функциональность. По долгу могу не заниматься внешним видом своего блога, то время жалко на это тратить, лучше статью написать, то обычная лень одолевает. Казалось бы, зачем. Вроде и так все хорошо. И все же, иной раз находит настроение.
А ещё часто обращаю внимание, в каком хаотичном порядке у многих блоггеров вставлены различные счетчики. В принципе, ну подумаешь, как они стоят, не это же главное. Но уверена, есть и другие блоггеры. Те, которые относятся к этому более внимательно. И внешнему виду уделяют больше внимания. Вот я и решила немного помочь, рассказать, как можно красиво вписать счетчики на страницы своего блога. За одно и свои переделаю. А то давно хочу, но как написала выше, руки не доходят до таких мелочей.

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

Счетчик статистики для блога
Такой hand made делается с помощью HTML таблиц. Вообще, хочу предупредить вас о том, что таблицы это прошлый век, и я не рекомендую ими увлекаться. Как правило, в верстке они используются только тогда, когда действительно нужно представить табличный материал, например, тарифы. В остальном же при верстке применяются контейнеры <div>. Но, когда дело доходит до мелкой работы, выстроить ровненько в несколько рядов со столбцами кнопочки, таблицы приходят на выручку. Это просто и не требует дополнительных знаний в CSS, и что особенно, я уверена, будет понятно новичкам, которые вообще не представляют, как верстаются сайты. Кстати, в наших шаблонах двух-колоночное меню тоже сделано в виде таблиц.

Итак, приступим. Чтобы компактно сгруппировать наши счетчики, необходимо обратиться к учебникам по HTML, к такому разделу, как верстка таблиц. Я уже давала ссылки на сайты, где я получала свои первые знания в HTML верстке, в статье инструменты вебмастера (блоггера). После прочтения этой статьи, возможно, вам понадобиться узнать какие-то подробности по верстке таблиц, в той статье сможете найти ссылки на полезные ресурсы.

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

Представьте себе строительство кирпичного дома. Что мы видим? Строитель укладывает кирпичик за кирпичиком, начиная слева на право, первый ряд, второй, третий. А теперь представьте, что вы висите на турникете вниз головой, и основание дома получается вверху, и строитель укладывает кирпичи сверху вниз. Ряд за рядом. Именно так и строятся таблицы на языке HTML, сверху вниз, ряд за рядом укладывая кирпичики ячеек таблицы.

Кто уже немного понимает в верстке, знает, что, за некоторым исключением, все теги парные. У таблицы все теги имеют пару, открывающий тег – закрывающий тег.

Сама таблица определяется тегом <table>здесь будет таблица</table>
У таблицы есть тело, оно определяется тегом <tbody>вот тут уж точно будет сама таблица</tbody>

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

строка 1 ячейка 1 строка 1 ячейка 2 строка 1 ячейка 3
строка 2 ячейка 1 строка 2 ячейка 2 строка 2 ячейка 3
строка 3 ячейка 1 строка 3 ячейка 2 строка 3 ячейка 3

Строки в таблице указываются тегом <tr></tr>
А ячейки тегом <td></td>
Давайте сделаем эту табличку. Не забываем, что нужно указать начало таблицы, и начало тела таблицы, вот как это будет

Вот так будет выглядеть таблица с пустыми ячейками. Как видите, после открывающего тега тела таблицы, мы сразу указываем, что начинается строка <tr>, внутри строки находятся 3 ячейки, они обозначены тегами <td></td>. Именно внутри этих тегов необходимо делать записи, которые находятся внутри ячеек, т.е. в нашем случае это будет выглядеть так:

Как видите, нет ничего сложного. Это, так сказать, классический вариант таблицы, но мне, например, необходимо было свои счетчики сделать вот в такой табличке

Таблица для счетчиков
Для таких случаев есть специальные параметры. Например, в табличке выше, необходимо было объединить ячейки по вертикали, для этого я использовала параметр rowspan="4". Число в кавычках означает, сколько нужно ячеек объединить. Если же необходимо объединить ячейки по горизонтали, то используется параметр colspan="". Давайте сделаем такой пример, и на практике посмотрим, как это делается.

Как установить кнопки в блог
Внимательно посмотрим на таблицу, которую нам нужно будет сделать. Я специально пронумеровала ячейки именно в том порядке, как они будут верстаться. Мы сразу видим, что первая ячейка должна объединиться по горизонтали из 2-х. А четвертая ячейка объединяется по вертикали.

И вот, что получилось

1 2
3 4 5
6 7
8 9 10

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

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

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

Итак, вы собираете в кучу все ваши счетчики, продумываете, каким образом их можно сгруппировать, чтобы получилась законченная форма, каждый счетчик – это одна ячейка таблицы, продумываете структуру таблицы. Открываете блокнот. Если есть более продвинутый вариант блокнота, специально для записи кода, то замечательно, используйте его, т.к. в подобных блокнотах есть подсветка кода, а это очень удобно. Я почему-то уже давно пользуюсь PSPad, но его нужно качать с интернета. Поэтому смотрите сами. Начинаете делать свою таблицу. Строчку за строчкой, ячейку за ячейкой. Не забудьте в каждую ячейку вставить правильный код счетчика, тот, который вы определили именно для этой ячейки. Дальше, прежде, чем вы перенесете код в свой блог, обязательно сохраните файл как index.html через команду Файл – Сохранить как

Красивые счетчики статистики

Затем откройте этот файл в браузере, вы увидите, правильно ли вы все сделали. Если все правильно, переносите весь код в гаджет HTML/JavaScript. Обращу ваше внимание, чтобы вы не пугались, при открытии файла, сохраненного на компьютере, содержимое счетчика liveinternet не видно, только контур – это нормально. Если вместе с видимыми счетчиками вы используете скрытые, можете поместить их код сразу после окончания таблицы.

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


Запись опубликована автором в рубрике Как создавать сайты с метками , .

Как установить счетчик статистики в блог: 13 комментариев

  1. Sergey

    Дополню чуть-чуть для тех, кто с html толком не дружит.
    По умолчанию виджет от гугл прижимает все к левому краю и иногда бывает не красиво. Для того, чтобы выровнять по центру, достаточно заменить:table на table align=»center» Если прижать к правому краю, то соответственно вводим:table align=»right»

  2. BloggerMen

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

  3. SEO-Дилетант'ка

    Да, это странно. А какой именно счетчик? Я ставила счетчик feedburner и Twittercounter — с ними проблем не было. Обычные, в виде кнопок — тоже проблем не должно быть. Вы не уточнили, какой именно счетчик пытались поставить, но может счетчики, типа li ру не позволяют это делать? С точки зрения того, что он должен стоять сквозняком на всех страницах… Это как предположение.
    А так, даже не знаю, что ещё может быть.

  4. BloggerMen

    Счетчик li. Но поставить его можно. Я встречал неоднократно, когда их ставится 2. Хотя, может просто глюк.

  5. Si.A.A.

    Спасибо. Очень помогла статья. Все упорядочил в два клика на своём блоге.

  6. Evgeniaemelyanchik

    Мне очень стыдно, что я такой чайник, но тем не менее спрошу, каков функционал всех этих счетчиков, для чего они блогу вообще нужны? *краснею*

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

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