Главная » Wordpress » Как сделать на сайте бегущую строку
как вставить на сайт бегущую строку

Как сделать на сайте бегущую строку

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

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

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

Куда:

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

Как:

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

переключаемся в html редактор

  • Если Вы хотите вывести бегущую строку например в шапке, то необходимо вставить код в файл 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>

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

Комментировать через ВКонтакте:
Отзывов к посту "Как сделать на сайте бегущую строку" уже 37:
  • WPixel | 09.07.2012 в 10:50

    Такого давно не встречал уже,со времен создания сайта на хтмл

    • admin | 09.07.2012 в 11:07

      Можно найти хорошее применение и такой бегущей строки. Например сейчас такой прием повсеместно используют на форумах

  • Евгений | 09.07.2012 в 17:08

    Антон, отличный пост, надеюсь найду применение бегущей строки на своем блоге или на своих одностраничниках :)

    • admin | 09.07.2012 в 17:12

      На одностраничниках самое оно будет

    • admin | 09.07.2012 в 17:19

      И довольно просто реализовать!

    • Евгений | 09.07.2012 в 22:00

      Ларис, может тебе пора сменить шаблон, обратись к Антону, он тебе за недорого конфетку сделает, причем уникальную :shock:

  • Татьяна | 10.07.2012 в 16:56

    Я как ворона кидаюсь на все блестящее и бегущее!))) Хочу такую строчку!))) :lol: Правда что в ней написать не придумала, буду пробовать, не люблю я лазить в нутро сайта, любопытство меня погубит…. Спасибо Антон! А где твоя бегущая строка? :evil:

    • admin | 10.07.2012 в 17:19

      Не погубит если сохранять резервные копии файлов!
      А мои бегущие строки только в этой статье. Тоже пока не придумал где их можно использовать

  • Владимир Жданов | 13.07.2012 в 10:31

    Ого marquee еще поддерживается? Хотя с чего бы не поддерживаться… Последний раз, собственно и первый, писал ее только когда учил HTML )) Бегущую строку можно на jquery сделать. Но “маркуи” наверно самый простой способ :smile:

  • Алёна Семёнова | 17.07.2012 в 20:55

    Смотрится очень эффектно. А применение всегда можно найти если крепко озадачиться :smile:

  • Артур | 26.07.2012 в 10:34

    Спасибо! Нужная вещь эта “бегущая строка”, в некоторых веб-проектах без нее обойтись)

  • Александр | 03.09.2012 в 14:21

    Писаки, блин. Как неопытный юзер поймет, КУДА его вставлять??!! Почему никто не пишет, что Google Chrome его не поддерживает, а IE как бы уже не особо и используется?

    • admin | 03.09.2012 в 15:31

      Александр, не понимаю Вашей иронии. По пунктам:
      1. “Как неопытный юзер поймет, КУДА его вставлять??!!” Куда вставлять кого? Бегущую строку? Если да, то в статье это ЧЕТКО прописано.
      2. “Почему никто не пишет, что Google Chrome его не поддерживает”. Как это не поддерживает? Я через этот браузер и делал – все работает.
      Возможная причина негодования: переключения между визуальным редактором и HTML. Обратите внимание на эти строки в статье:
      “Внимание! При обратном переключении в визуальный редактор тег marquee обрезается, поэтому лучше сначала написать статью, а уже затем обозначить в ней бегущую строку”.
      3. “IE как бы уже не особо и используется?”. Не знаю на счет IE, но ориентироваться на этот браузер не стоит. Он даже с CSS 3 не особо дружен. Поэтому отказываться от закругленных углов в стилях не стоит из-за того, что для пользователей зашедших через IE все так и так будет квадратное. Вообще люди пользующиеся IE много чего повидали, ведь не все сайты кроссбраузерны.

      • Александр | 03.09.2012 в 16:07

        Вы указали: “Если Вы хотите вывести бегущую строку, например, в шапке, то необходимо вставить код в файл header.php, если в подвал сайта, то в footer.php и т.д.”. Но КУДА именно? До ? После? Или не имеет значения? Куча статей на эту тему и море противоречий в каждой. Особенно умилила фраза (не из вашей статьи): “вставьте тег в нужное место”. No comments. Сделали бы скрин реальной страницы и показали на примере.
        Мне понадобился вечер, чтобы перелопатить всю информацию. В итоге все работает (на Google Chrome, хотя опять таки везде написано, что в GH тег marquee не работает, писался он для IE и, вообще, это вчерашний день).
        Я Вас не критикую, статья неплохая, просто для Вас это элементарные вещи, а для кого-то китайская грамота.

        • admin | 03.09.2012 в 19:06

          )) поймите, у каждого блога разный шаблон. header.php – это шапка, footer.php – это подвал и так далее – эти элементы как правило присутствуют в любом шаблоне, но все строчки кода у них разные (иначе бы все блоги выглядели одинаково), поэтому объяснить в какое именно место вставлять коды невозможно – каждая тема это частный случай. А на счет фразы “вставьте тег в нужное место” – это в принципе верно. Если нужно вставить код под картинкой в шапке, то ищите код картинки и вставляете после него – это необъяснить, так как в одном шаблоне может быть картинка, а другом нет

          • alexzander | 11.01.2013 в 7:18

            Сделай width=”100% и строка будет на всю ширину куда хошь поставить (ширина футера, ширина страницы, ширина заголовка) у каждого по своему, ну в процентном соотношении тоже можешь поставить так как тебе нужно!

          • admin | 11.01.2013 в 8:25

            А зачем? :smile: Если не указывать ширину, то строка сама займет 100% ширины родительского элемента

        • admin | 03.09.2012 в 19:07

          Нужно знать просто устройство блога wordpress совсем немного. А объяснять в статье про бегущую строку, как устроены файлы вордпресс не нужно ОФК

  • Людмила Алешина | 14.09.2012 в 3:59

    :| Спасибо, а то у меня строка перестала бежать на первой страничке после переделки, так обидно, а тут на Вас вышла по ссылке, сразу же и исправила, поставила сайт в закладки, полезностей уйма для меня)))

    • admin | 14.09.2012 в 12:32

      Рад что пригодилось :|

  • Вадим | 24.11.2012 в 1:26

    Доброго времени суток!
    Спасибо вам, все получилось.
    Только никак не могу задать цвет шрифта в бегущей строке, цвет или не меняется или вообще бегущая строка останавливается. Подскажите пожалуйста как это сделать.

    • admin | 24.11.2012 в 1:50

      Попробовал просто прописать color=”#900″ (даже с !important) – не работает, видимо тег marquee его не поддерживает. Самый простой выход, по-крайней мере так бы сделал я, чтобы долго не раздумывать – это ввести дополнительный div и задать для него цвет текста, тот же, красный например: color:#900;

  • alexzander | 11.01.2013 в 7:19

    А как дополнительно и куда вводить новый div чтобы цвет и размер шрифта поменять не подскажите?

    • admin | 11.01.2013 в 12:47

      Прямо перед открывающимся тегом marquee прописываете div с необходимыми style – и все. Как тег marquee закрывается, сразу после закрываете див. Проверил – работает.

  • Vadar | 12.02.2013 в 19:28

    Хорошая статья! Твит и гугл от меня! Мне больше понравился первый пример! Яб с удовольствием поставил бы к себе на сайт, но вот беда, цвет у меня не совпадает(( Вся синяя получается текст, а фон шаблона у меня коричневая. Мож поможете понастроит, например как сделать, чтоб белая была? Я имею ввиду первый пример. Спасибо за ответ!

    • admin | 12.02.2013 в 19:43

      Спасибо :|
      Если я правильно понял: фоновый цвет строки написан во втором примере – например bgcolor=”#f2f2f2″ (вместо #f2f2f2 можно подставить код любого цвета). А на счет цвета текста я уже отвечал 3 комментами выше на вопрос Вадима

  • Vadar | 12.02.2013 в 20:15

    Извините за тупость меня :smile: А куда этот bgcolor=”#″ вставит в первом примере?

    • admin | 12.02.2013 в 20:17

      Смотрите второй пример – там все расписано. Сразу после marquee ставите пробел и пишите bgcolor=”#f2f2f2″, в результате получается:
      marquee bgcolor=”#f2f2f2″

      • Vadar | 12.02.2013 в 21:16

        Ай спасибо дорогой! За то, что был так любезен, с удовольствием подписываюсь на твой сайт! :idea:

  • Девочка_пай | 20.02.2013 в 3:03

    Не могу решить задачку по вставлению в бегущую строку 2-х или нескольких ссылок. Вставляться-то они вставляются, но нет между ними пробела. spacing увеличивает расстояние только между буквами или словами. Не подскажете, как увеличить расстояние между предложениями? Только, без помощи style.css или таблицы. &nbsр; тоже не работает.

    • admin | 20.02.2013 в 3:24

      Хммм.. а как я могу тут помочь :smile: пробелы попробовал поставить – да, не работает, вы говорите, что и пробел в html – &nbsр; тоже не работает.
      На ум приходит только одна мысль – сделайте две, три, четыре бегущие строки, в зависимости от количества ссылок и расположите их рядом. А почему не хочется дополнять файл style.css?

  • svargan | 22.08.2013 в 18:57

    Супер! То, что искал конкретно интересен первый вариант стал для одного моего партнерского сайта интернет магазина. Благодарность тебе! С ув. Дмитрий

  • владимир | 15.10.2014 в 5:57

    Просто отлично! Коротко,понятно, информативно. Для таких как я чайников,это просто подарок.Можно 3 дня ковырять интернет и натыкаться везде на бред, ошибки,вирусы и т.д. А это именно то что я искал! Обязательно воткну на свой юкозовский ГС.

  • Chupacabras | 23.07.2016 в 9:55

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: