
Как сделать на сайте бегущую строку
Здравствуйте уважаемые посетители блога 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% уникальный контент возможен!
-
Евгений | 09.07.2012 в 17:08
Антон, отличный пост, надеюсь найду применение бегущей строки на своем блоге или на своих одностраничниках
-
Евгений | 09.07.2012 в 22:00
Ларис, может тебе пора сменить шаблон, обратись к Антону, он тебе за недорого конфетку сделает, причем уникальную
-
Татьяна | 10.07.2012 в 16:56
Я как ворона кидаюсь на все блестящее и бегущее!))) Хочу такую строчку!)))
Правда что в ней написать не придумала, буду пробовать, не люблю я лазить в нутро сайта, любопытство меня погубит…. Спасибо Антон! А где твоя бегущая строка?
-
Владимир Жданов | 13.07.2012 в 10:31
Ого marquee еще поддерживается? Хотя с чего бы не поддерживаться… Последний раз, собственно и первый, писал ее только когда учил HTML )) Бегущую строку можно на jquery сделать. Но “маркуи” наверно самый простой способ
-
Алёна Семёнова | 17.07.2012 в 20:55
Смотрится очень эффектно. А применение всегда можно найти если крепко озадачиться
-
Артур | 26.07.2012 в 10:34
Спасибо! Нужная вещь эта “бегущая строка”, в некоторых веб-проектах без нее обойтись)
-
Александр | 03.09.2012 в 14:21
Писаки, блин. Как неопытный юзер поймет, КУДА его вставлять??!! Почему никто не пишет, что Google Chrome его не поддерживает, а IE как бы уже не особо и используется?
-
Александр | 03.09.2012 в 16:07
Вы указали: “Если Вы хотите вывести бегущую строку, например, в шапке, то необходимо вставить код в файл header.php, если в подвал сайта, то в footer.php и т.д.”. Но КУДА именно? До ? После? Или не имеет значения? Куча статей на эту тему и море противоречий в каждой. Особенно умилила фраза (не из вашей статьи): “вставьте тег в нужное место”. No comments. Сделали бы скрин реальной страницы и показали на примере.
Мне понадобился вечер, чтобы перелопатить всю информацию. В итоге все работает (на Google Chrome, хотя опять таки везде написано, что в GH тег marquee не работает, писался он для IE и, вообще, это вчерашний день).
Я Вас не критикую, статья неплохая, просто для Вас это элементарные вещи, а для кого-то китайская грамота. -
alexzander | 11.01.2013 в 7:18
Сделай width=”100% и строка будет на всю ширину куда хошь поставить (ширина футера, ширина страницы, ширина заголовка) у каждого по своему, ну в процентном соотношении тоже можешь поставить так как тебе нужно!
-
Людмила Алешина | 14.09.2012 в 3:59
Спасибо, а то у меня строка перестала бежать на первой страничке после переделки, так обидно, а тут на Вас вышла по ссылке, сразу же и исправила, поставила сайт в закладки, полезностей уйма для меня)))
-
Вадим | 24.11.2012 в 1:26
Доброго времени суток!
Спасибо вам, все получилось.
Только никак не могу задать цвет шрифта в бегущей строке, цвет или не меняется или вообще бегущая строка останавливается. Подскажите пожалуйста как это сделать.
-
alexzander | 11.01.2013 в 7:19
А как дополнительно и куда вводить новый div чтобы цвет и размер шрифта поменять не подскажите?
-
Vadar | 12.02.2013 в 19:28
Хорошая статья! Твит и гугл от меня! Мне больше понравился первый пример! Яб с удовольствием поставил бы к себе на сайт, но вот беда, цвет у меня не совпадает(( Вся синяя получается текст, а фон шаблона у меня коричневая. Мож поможете понастроит, например как сделать, чтоб белая была? Я имею ввиду первый пример. Спасибо за ответ!
-
Vadar | 12.02.2013 в 20:15
Извините за тупость меня
А куда этот bgcolor=”#″ вставит в первом примере?
-
Vadar | 12.02.2013 в 21:16
Ай спасибо дорогой! За то, что был так любезен, с удовольствием подписываюсь на твой сайт!
-
Девочка_пай | 20.02.2013 в 3:03
Не могу решить задачку по вставлению в бегущую строку 2-х или нескольких ссылок. Вставляться-то они вставляются, но нет между ними пробела. spacing увеличивает расстояние только между буквами или словами. Не подскажете, как увеличить расстояние между предложениями? Только, без помощи style.css или таблицы. &nbsр; тоже не работает.
-
svargan | 22.08.2013 в 18:57
Супер! То, что искал конкретно интересен первый вариант стал для одного моего партнерского сайта интернет магазина. Благодарность тебе! С ув. Дмитрий
-
владимир | 15.10.2014 в 5:57
Просто отлично! Коротко,понятно, информативно. Для таких как я чайников,это просто подарок.Можно 3 дня ковырять интернет и натыкаться везде на бред, ошибки,вирусы и т.д. А это именно то что я искал! Обязательно воткну на свой юкозовский ГС.
-
Татьяна | 04.01.2016 в 15:06
Антон, спасибо огромное за помощь. Я случайно попала к вам на сайт. Решила “пофеячить”. Вот что получилось: http://nepovtorimir.blogspot.ru/
-
Chupacabras | 23.07.2016 в 9:55
Как сделать, чтоб бегущая строка двигалась плавно, а не рывками? и чтоб он не заканчиваясь повторялся сначала
Такого давно не встречал уже,со времен создания сайта на хтмл