Как сделать на сайте бегущую строку
Здравствуйте уважаемые посетители блога 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>
Как мы видим я вставил в бегущую строку ссылку. Вы же можете вставить как обычный текст, так и текст с ссылкой.
Вот что получилось:
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>
Примечание: можно вставить анимированную картинку – тогда бегущая строка на сайте будет смотреться очень эффектно!
Похожие статьи:
- Статья которая РАЗОРВЕТ ваш блог на кусочки (а потом соберет его, возможно)
- Как выделить комментарии автора блога WordPress без плагина
- Якорь на сайте: что это такое, зачем нужно и как сделать?
- Как сделать на сайте WordPress кнопку добавить в избранное
- Анонс статьи (цитата) в WordPress – 100% уникальный контент возможен!
