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

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

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

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

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