Здравствуйте уважаемые посетители блога history-of-blog.ru. Сегодня мы научимся делать на сайте бегущую строку при помощи html тега marquee. Так как мы не прибегнем к каким-либо скриптам или плагинам, бегущая строка совершенно не будет грузить сайт. С помощью данного приема можно не только разнообразить блог, но и эффективно провести рекламу чего-либо, ведь в бегущую строку можно вставлять не только текст, но и картинки с ссылками. В общем применение найдется.

Куда и как вставлять бегущую строку

Прежде чем приводить примеры и давать коды, нужно уяснить как и куда потребуется вставлять код.

Куда:

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

Как:

• При написании статьи необходимо переключиться в HTML-редактор и именно в нем вставлять необходимый код (примеры кодов Вы можете посмотреть ниже). Внимание! При обратном переключении в визуальный редактор тег marquee обрезается, поэтому лучше сначала написать статью, а уже затем обозначить в ней бегущую строку.

• Если Вы хотите вывести бегущую строку например в шапке, то необходимо вставить код в файл header.php, если в подвал сайта, то в footer.php и т.д. Для этого нужно переключиться в режим редактирования файлов темы (Дизайн -> Редактор) и вносить изменения в нужном файле.

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

Код бегущей строки для сайта

1 пример.

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

<marquee>
<a title="Финстрип за Июнь’12" href="http://history-of-blog.ru/finstripy/finstrip-za-iyun12/" target="_blank">В Июне я заработал более 7'000 в интернете</a>
</marquee>

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

Вот что получилось:

В Июне я заработал более 7’000 в интернете

2 пример.

Пример:

Бегущая строка с шириной, высотой, фоном, направлением и скоростью

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

<marquee width="550" height="55" bgcolor="#f2f2f2" direction="up" scrollAmount="2">
Бегущая строка с шириной, высотой, фоном, направлением и скоростью
</marquee>

• width – это ширина. Сейчас она фиксированная и составляет 550 пикселей. Если не прописывать этот параметр, то бегущая строка будет занимать всю возможную ширину, например если вставлять ее в статью, то она будет занимать ровно столько же, сколько и отведено для основного контента.
• height – высота в пикселях. В данном случае 55.
• bgcolor – фоновый цвет.
• direction – направление движения. Возможные варианты: up – снизу вверх, down – сверху вниз, right – слева направо, left – справа налево (по-умолчанию).
• scrollAmount – скорость бегущей строки. Чем больше цифра, тем больше скорость.

Так же стоить отметить еще один параметр, который может быть полезен:

• behavior – задает тип движения. Возможные варианты: alternate – перемещение между левой и правой границами, slide – строчка перемещается так, как это задано атрибутом direction, однако дойдя до края останавливается.

3 пример.

Можно сделать бегущую строку с картинкой или с картинкой и текстом:

Надеюсь статья была Вам полезна!

Для этого нужно вставить html код картинки внутрь тега marquee:

<marquee>
<img title="Все о создании, продвижении и заработке на блоге. На практике" src="http://history-of-blog.ru/wp-content/themes/styler/images/logo-raskrutka-bloga.png"/>Надеюсь статья была Вам полезна!
</marquee>

Примечание: можно вставить анимированную картинку – тогда бегущая строка на сайте будет смотреться очень эффектно!