Ваш промокод mojWPAds на плагин рекламы для WordPress >>

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

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

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

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

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

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

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

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

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

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

<div style="float:left; padding: 0 0 5px 5px;">текст с названием сайта и почтой</div>
<div style="float:right; padding: 0 0 5px 0;">счетчик от LiveInternet</div>
<div style="float:right; padding: 0 0 5px 0;">Счетчик от Mail.ru</div>

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

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

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

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

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

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

<table>
  <tr>
    <td>текст с названием сайта и почтой</td>
    <td>счетчик от LiveInternet</td>
    <td>Счетчик от Mail.ru</td>
  </tr>
</table>

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

<table width="100%">
  <tr>
    <td>текст с названием сайта и почтой</td>
    <td width="88px">счетчик от LiveInternet</td>
    <td width="88px">Счетчик от Mail.ru</td>
  </tr>
</table>

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

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

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

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

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

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

Привет. Меня зовут Виталик.

Я автор этого блога, а так же Магазина WordPress https://wp-r.ru/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 26 комментариев
  1. Александр says:
    http://dorfer.ru

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

    • mojWP says:

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

  2. Denis says:
    http://webwmz.ru/

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

    • Виталий says:

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

  3. Ольга Марченко says:
    http://astromargo.ru

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

  4. Сергей says:
    http://grande-life.ru

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

  5. Алексей says:
    http://www.jiwoy.ru/

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

  6. Felicita says:

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

  7. Диманише says:
    http://cheat-portal.com/

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

  8. OleG says:

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

  9. OleG says:

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

  10. Богдан says:

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

  11. Дмитрий says:
    http://zarabotnik.ru
    Одна неточность - подзаголовки. Точнее: "Способ №2: при помощи HTML". 
    Рекомендую заменить на "Способ №2: при помощи Table".
  12. Ларуня says:
    http://vekovoi.ru

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

  13. Lucky says:
    http://lucky.zp.ua

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

  14. Сергей says:

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

  15. anton says:
    http://stupid-monkey.ru/

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

  16. Геннадий Ольховский says:
    http://genri.biz/

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

  17. Александр says:

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

    • Виталий says:

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

  18. Dusk says:
    http://insofted.net

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

  19. Алексей says:
    http://delaiphoto.ru

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

  20. Алексей says:

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

  21. Андрей says:

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

    • Виталий says:
      http://mojWP.ru/

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

Не держи в себе. Выскажись.

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

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.78MB | MySQL:136 | 0,299sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookie
Друг, не уходи!