Бегущая строка для Blogger

20.04.2014

Такую бегущую строку Вы можете легко (без скрипта) сделать для своего блога или сайта! Подробности читайте в статье.
Текст может двигаться и вниз, и влево, и вправо :)

Хорошим элементом для привлечения внимания посетителей блога будет бегущая строка. В тексте "бегучки" можно просто написать приветствие для всех или какую-то новость. 
Настроить можно цвет, шрифт текста, фон и размер блока с бегущей строкой, а также направление движения текста.

Если Вам не хочется разбираться в настройках бегущей строки, то можно воспользоваться всего лишь одной строкой html-кода:

<marquee>Текст бегущей строки</marquee>

Выглядеть она будет так:Текст бегущей строки

Далее расскажу о том, как настроить внешний вид бегущей строки.

1. Направление движения
    Стандартно "бегучка" движется влево. 

    1) Не знаю, пригодится ли это кому-то, но чтобы текст двигался вправо, нужно добавить в код параметр direction="right" И полный код строки будет таким:

<marquee direction="right">Ваш текст бегущей строки</marquee>

Ваш текст бегущей строки

  2) HTML код для движения вверх:

      <marquee direction="up">Текст бегущей строки</marquee>
Текст бегущей строки
Блок, где движется текст, довольно большой. Ниже смотрите, как изменить высоту блока фона.

  3) Код, который нужно использовать для "отправки" строки вниз:

      <marquee direction="down">Текст бегущей строки</marquee>
Текст бегущей строки
  4) Фиксируем бегущую строку - дойдя до левой границы сообщения (или гаджета) строка должна остановиться. Нам будет нужен код: 
    <marquee behavior="slide">Текст бегущей строки останавливается</marquee>

Текст бегущей строки останавливается

2. Отрегулируем скорость движения текста. Для этого добавим параметр scrollamount="2" Чем больше будет цифра, тем быстрее будет бежать текст )).

Пример: <marquee scrollamount="2">Текст бегущей строки</marquee>

Текст бегущей строки

3. Хотите цвет текста или тип шрифта изменить? Не проблема! 

   1) Изменить цвет текста бегущей строки:  style="color: #FF0000"
        
       Например: <marquee style="color: #FF3300">Цветная бегущая строка</marquee>
Цветная бегущая строка

   2) Шрифт "бегучки":  style="font-family: verdana"
    3) Изменить можно как сам тип шрифта, так и его размер (цифрой): 
                                  style="font-size: 2em"

4. Добрались до фона. При желании настраиваем фон блока с бегущей строкой. 

   1) Высота блока (фона). За это отвечает параметр height="35", например. Указывайте нужную Вам цифру.

   2) Ширину блока (фона) бегущей строки регулируем при помощи width="300".
  
   3) И, конечно же, цвет фона. Пример кода:
 <marquee bgcolor="#FF9999">Текст на цветном фоне</marquee>
   
Текст на цветном фоне

! Для выбора цвета самого текста и фона Вы можете воспользоваться статьями Таблица кодов цвета и Подбираем цвета для блога.

           Общий принцип добавления параметров бегущей строки: 

берем основной код <marquee>Текст бегущей строки</marquee> и после первого тега marquee через пробел добавляем нужные настройки. 

Приведу пример кода бегущей строки на голубом фоне с движением вверх (сама строка в начале статьи):

<marquee тип шрифта + размер шрифта  + цвет текста + цвет фона + высота фона + ширина фона + движение вверх + скорость движения>Текст моей бегущей строки</marquee>

<marquee style="font-family: verdana" style="font-size: 3em" style="color: #FFFFFF" bgcolor="#0099FF" height="200" width="200" direction="up" scrollamount="3">Такую бегущую строку Вы можете легко (без скрипта) сделать для своего блога или сайта! Подробности читайте в статье. Текст может двигаться и вниз, и влево, и вправо :)</marquee>

! И еще. Все коды, которые будете брать из статьи, сначала вставьте в блокнот или другой редактор кода, добавьте нужные параметры, и только потом вставляйте в свою статью в режиме HTML или в гаджет HTML/JavaScript.

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

36 комментариев:

  1. благодаря вам, мой блог стал веселым))

    ОтветитьУдалить
  2. Вот спасибо. Надо подумать как это можно использовать. думаю может пригодиться в рекламе курсов или еще чего-нибудь.

    ОтветитьУдалить
  3. сделал движущийся баннер, как сделать чтобы он перегружался?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Сергей. Возможно, Вам поможет статья про вставку картинки или ссылки в бегущую строку http://samasajt.blogspot.ru/2014/04/vstavit-v-begushuyu-stroku-kartinku-ili-ssylku.html

      Удалить
  4. Ошибка при синтаксическом анализе XML (строка 5, столбец 61): Attribute "style" was already specified for element "marquee". - можете сказать в чем проблема?

    ОтветитьУдалить
    Ответы
    1. Уже где-то был указан элемент "style" для бегущей строки.

      Удалить
  5. Вставлял вот этот код:

    Да, там два "Стайла", но один для цвета, другой размера, какой то удалить нужно? какой именно?

    ОтветитьУдалить
    Ответы
    1. код не опубликовался что то: style="font-size: 3em" style="color: #000000" bgcolor="#FF9900" height="15" width="760"<img title="s3h" , вот часть

      Удалить
    2. Анонимный15.02.2017, 17:49

      Надо style указывать один раз, а затем если надо другие стайлы использовать, то писать их через точку с запятой. Пример: style="font-size: 2em; color: #ffffff; font-family: Arial"

      Удалить
  6. Анонимный28.10.2015, 3:55

    Подскажите, пожалуйста, как именно и куда вставить этот код бегущей строки, чтобы строка отображалась в нужном месте страницы?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Поставить курсор в нужном месте сообщения -> перейти в режим редактирования сообщения HTML -> вставить готовый код бегущей строки.

      Удалить
  7. Благодарю за интересную информацию

    ОтветитьУдалить
  8. а как вообще настроить эту строку?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. В статье есть информация о настройках бегущей строки...

      Удалить
  9. Попробуйте как у меня=)
    Текст на цветном фоне

    ОтветитьУдалить
  10. Спасибо за подробные обьяснения, все получилось!

    ОтветитьУдалить
  11. где находиться на блоге бегущая строка , чтобы её настроить???

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Вам сначала нужен код бегущей строки (см. статью). Его сначала вставьте в блокнот или другой редактор кода, добавьте нужные параметры, и только потом вставляйте в свою статью в режиме HTML или в гаджет HTML/JavaScript.

      Удалить
  12. Здавствуйте, помогите пожалуйста разобраться с цветом текста. Все сделала, как у вас в статье, но текст остается белым(

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Добавила в статью пример кода бегущей строки с цветным текстом. Вместо #FF3300 вставьте свое значение цвета.

      Удалить
  13. Здравствуйте.
    Мария, подскажите пожалуйста, а можно ли сделать, чтобы бегущая строка отображалась в самом верху блога, чтобы была видна на всех страницах?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Можно: 1)код бегущей строки вставьте в новый гаджет HTML/JavaScript, 2)гаджет "перетащите" под гаджет "Страницы" (или, при желании, над гаджетом "Страницы"), 3) сохраните расположение.

      Удалить
  14. Спасибо за бегущую строку. Поставил впереди строки гифку все было здорово. Утром смотрю вместо гифки прямоуголник с текстом внутри: Bitte nicht verlinken! Juanna.de Перевод "Пожалуйста, не ссылайся! Juanna.de" гифку взял здесь http://www.juanna.ch/winkies/winkies.htm

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Вы, наверное, ссылку на "гифку" в бегущую строку с сайта автора ставили? Надо сначала сохранить к себе на компьютер, затем загрузить в Блоггер и только потом использовать URL картинки в бегущей строке. Статья о том, как вставить в бегущую строку картинку или ссылку http://samasajt.blogspot.ru/2014/04/vstavit-v-begushuyu-stroku-kartinku-ili-ssylku.html

      Удалить
  15. Здравствуйте,Мария!Спасибо за отличный и познавательный блог.С вашего позволения воспользуюсь вашими кодами)

    ОтветитьУдалить
    Ответы
    1. И Вам спасибо за тёплые слова :) Конечно)

      Удалить
  16. Мария, добрый день! Почему-то отображается черный текст, хотя код цвета прописан другой. В чем может быть подвох? Спасибо.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Попробуйте в другом браузере посмотреть. И поменять код цвета. Потом, если все хорошо, вернуть тот код, который нужен.

      Удалить
    2. Мария, спасибо, но к сожалению проблема остается.

      Удалить
    3. P.S. Цвет меняется, если я в настройках дизайна меняю цвет текста страницы ))) Почему, интересно? И что делать?

      Удалить
    4. Вы бегущую строку в гаджет или в сообщение вставляете? Напишите адрес Вашего блога.

      Удалить
    5. Мария, что интересно, бегущая строка в гаджете. Адрес блога: paruszelen.blogspot.com

      Удалить

Загляните и на другие страницы ^