пятница, 15 мая 2015 г.

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

13:08 By No comments



5
кнопки рейтинга сайтов в одну строкуВ данной статье я покажу Вам, как можно выставить кнопки рейтинга (статистики) сайта в одну строку при помощи нескольких тегов 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 пикселей в один ряд в шапке сайта (или над ней), Вам просто необходимы будут подобные знания, изложенные в статье. А размещая два блока рекламы - Вы увеличиваете свою прибыль и не сильно "напрягаете" посетителя сайта слишком длинным рекламным блоком.
Вот и все. Будут вопросы - пишите в комментариях, либо в тикеты. Но, прежде чем писать, попробуйте найти ответ на свой вопрос в справочнике, ссылка на который дана чуть выше.

0 коммент.:

Отправить комментарий