mojwp.ru
Назад

Кнопки счетчиков посетителей в одну строку

Опубликовано: 14.02.2012
27
1306

кнопки рейтинга сайтов в одну строкуВ данной статье я покажу Вам, как можно выставить кнопки рейтинга (статистики) сайта в одну строку при помощи нескольких тегов HTML. Данная штука применима к любым сайтам и любому контенту: тексту, картинкам, видео и прочему. При необходимости, Вы можете использовать данный код в статьях и записях. На примере моего сайта Вы увидите, как можно выставить в "подвале" сайта в одну строку текст, счетчик Mail.ru и счетчик посещений от LiveInternet.

К написанию данной статьи меня подтолкнул один из читателей блога, который задал свой вопрос, когда я тестировал Онлайн консультанта для сайта.
[infob]Прежде всего, перед тем, как приступить к практической части, не забывайте делать резервную копию файлов с которыми будете работать.[/infob]

Для тех, кто еще не понял о чем пойдет речь, я сделал скриншот (клик для увеличения):

счетчики на сайте в одну строку

Данная конструкция находится в самом низу сайта mojwp.ru. Здесь мы видим слева текст, а справа 2 счетчика (Mail.ru и LiveInternet). Все находится на одном уровне и не занимает много места. К тому же это более красиво, чем несколько кнопок друг под другом с большими промежутками между ними.

Чтобы быстро сделать сайт, либо реализовать подобное, потребуются некоторые знания html, а также мои подсказки. Для наглядности покажу 2 способа, как реализовать подобное (в результате будет как на данном сайте).

Способ №1: используем div.

Именно таким способом реализовано у меня. Если у Вас есть хоть начальные знания по применению контейнеров div, то больших сложностей данная процедура не вызовет. Вот мой код:

текст с названием сайта и почтой
счетчик от LiveInternet
Счетчик от Mail.ru

Все это записано в одну строку в файле footer.php (так называемый "подвал" сайта).

  • float:left - выравнивание по левому краю.
  • padding: 0 0 5px 5px - внутренний отступ: сверху справа снизу слева
  • float:right - выравнивание по правому краю

Если у Вас количество кнопок больше, то достаточно добавить необходимое количество контейнеров div. Так же можете поэкспериментировать с отступами, т.е. значениями. Вместо нулей достаточно записать количество пикселей и добавить их обозначение px.

Способ №2: при помощи HTML

Если Вы собираетесь развиваться в области "блоггинга", то просто необходимо знать азы HTML. Для этого погуглите и почитайте соответствующую литературу. Могу Вас уверить, что все успешные блоггеры начинали именно так. Я так же периодически заглядываю в справочник http://htmlbook.ru/html/, когда необходимо освежить память.

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

текст с названием сайта и почтой счетчик от LiveInternet Счетчик от Mail.ru

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

текст с названием сайта и почтой счетчик от LiveInternet Счетчик от Mail.ru

В данном коде был добавлен параметр ширины (width) как для всей таблицы, так и для двух ячеек, куда помещены мои счетчики.

  • tablе width=100% обозначает, что таблица займет всю ширину области (в данном случае "подвала"). Если Вам нужно разместить лишь на какой-то части области, то выставляем необходимый процент.
  • td width=88px обозначает, что данная ячейка будет шириной 88px. Почему именно эта цифра? Если посмотреть ширину картинки, то она будет именно такой. Т.е. указывая цифру 88 мы ограничиваем ячейку, что в купе с шириной таблицы 100% и оставшимися ячейками, прижмет необходимую мне к правому краю.

Как Вы заметили, ширину (width), можно указывать в % и в пикселях (px). Вы сами выбираете, как будет лучше смотреться.

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

К примеру: Ваш сайт принимают в Rotaban - биржа баннерной рекламы. Чтобы разместить 2 банера 468*60 пикселей в один ряд в шапке сайта (или над ней), Вам просто необходимы будут подобные знания, изложенные в статье. А размещая два блока рекламы - Вы увеличиваете свою прибыль и не сильно "напрягаете" посетителя сайта слишком длинным рекламным блоком.

Вот и все. Будут вопросы - пишите в комментариях, либо в тикеты. Но, прежде чем писать, попробуйте найти ответ на свой вопрос в справочнике, ссылка на который дана чуть выше.

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Александр
    Опубликовано: 15.02.2012 Ответить на сообщение

    Здравствуйте) не могли бы подсказать : я хочу вставить код не в футер, а в левом углу страницы, которая находится вне футера. Если просто вставить код счетчика в index.php, то он встает в самый угол, без отступа, если же делаю отступ как в первом случае, то счетчик влезает в футер. Как это можно исправить? 🙂

    • mojWP
      Опубликовано: 15.02.2012 Ответить на сообщение

      вместо padding использовать margin

  • Denis
    Опубликовано: 27.06.2012 Ответить на сообщение

    По моему лучше использовать способ с div, не так. Виталий, я смотрю, Вы разбираетесь в верстке и т.п?!

    • Виталий
      Опубликовано: 29.06.2012 Ответить на сообщение

      На самом деле div можно использовать абсолютно по разному. Есть несколько вариантов. Я предложил самы1й простой, который был бы понятен большинству посетителей сайта.
      Если у Вас есть желание, то мы можем совместно опубликовать на этой странице все варианты размещения элементов на странице. Отпишите на почту.

  • Ольга Марченко
    Опубликовано: 10.09.2012 Ответить на сообщение

    Спасибо Вам, за то, что Вы есть!

  • Сергей
    Опубликовано: 17.09.2012 Ответить на сообщение

    Спасибо! А то у меня голова уже пухла от плохой информации. Успехов!!!

  • Алексей
    Опубликовано: 06.11.2012 Ответить на сообщение

    Благодарю за помощь! Наконец-то именно то что надо.

  • Felicita
    Опубликовано: 25.11.2012 Ответить на сообщение

    А можно стырить строку о защите прав? ))) Уж очень приглянулась! ;)))
    Спб за статью!

  • Диманише
    Опубликовано: 05.12.2012 Ответить на сообщение

    Автор, Вы перепутали в стиле "Padding" лево с право. Вот такой порядок параметров: сверху справа снизу слева. Т.е по часовой стрелке, начиная сверху. Только что это проверял.

    • Виталий
      Опубликовано: 05.12.2012 Ответить на сообщение

      спасибо. подправил

  • OleG
    Опубликовано: 26.01.2013 Ответить на сообщение

    чёт у меня майл либо выше либо ниже других счетчиков в одну строчку с другими не встаёт

  • OleG
    Опубликовано: 26.01.2013 Ответить на сообщение

    короче решил не заморачиваться и удалил майловский нах..

  • Богдан
    Опубликовано: 28.01.2013 Ответить на сообщение

    а у меня получается выставить только один счётчик... сегодня попробую ваш метод. надеюсь что получиться

  • Дмитрий
    Опубликовано: 16.02.2013 Ответить на сообщение
    Одна неточность - подзаголовки. Точнее: "Способ №2: при помощи HTML". 
    Рекомендую заменить на "Способ №2: при помощи Table".
  • Ларуня
    Опубликовано: 18.02.2013 Ответить на сообщение

    Отличная статья. Автору +, давно искала информацию по этой теме)

  • Lucky
    Опубликовано: 22.02.2013 Ответить на сообщение

    лин, у Вас чертовски полезный сайт, залез почитать как добавить VK на свой сайт, как нашел полезную инфу, как поставить еще и google + и не только, после чего наткнулся на эту статью, сейчас пойду читать про Ваши плагины и "Обратную связь".
    Спасибо за качество написанных материалов!

  • Сергей
    Опубликовано: 24.02.2013 Ответить на сообщение

    Отличная статья. Спасибо!

  • anton
    Опубликовано: 14.03.2013 Ответить на сообщение

    Спасибо помогло! Правда немного не разобрался вот в чем. А если мне надо сначало одну строку из блоков, а под ней другую строку из блоков. Как их разделять?

  • Геннадий Ольховский
    Опубликовано: 24.03.2013 Ответить на сообщение

    Спасибо, статья очень помогла. А то никак не мог выставить счетчики в один ряд. Теперь все в порядке.

  • Александр
    Опубликовано: 05.04.2013 Ответить на сообщение

    а как сделать две таблицы в одну строчку?

    • Виталий
      Опубликовано: 05.04.2013 Ответить на сообщение

      разметите эти таблицы внутри ячеек (td).
      Т.е. получатся вложения

  • Dusk
    Опубликовано: 06.04.2014 Ответить на сообщение

    Спасибо. Очень понятно даже такому аматору, как я =) респект за 1 способ. все получилось за 4 секунды.

  • Алексей
    Опубликовано: 11.04.2014 Ответить на сообщение

    Наконец то все получилось и встало как надо при помощи HTML способ 2. Виталик большое спасибо.

  • Алексей
    Опубликовано: 01.05.2015 Ответить на сообщение

    Спасибо автору, разжевал все по полочкам)) респект)

  • Андрей
    Опубликовано: 11.02.2016 Ответить на сообщение

    привет поставил ваш код но у меня отступа сверху нету и не как не реагирует на изменения пиксилей что делать?

    • Виталий
      Опубликовано: 12.02.2016 Ответить на сообщение

      Разбираться в css.
      Дистанционно не вангую

  • Дмитрий
    Опубликовано: 01.10.2018 Ответить на сообщение

    Спасибо за код. Наконец-то все заработало как положено. Отлично

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.