Плывущий текст для Blogger. Scrolling Or marquee text for blogger

вторник, 6 января 2009 г.

"Плывущий" или "прокручивающийся" текст позволит Вам привлечь внимание к новостям своего блога или обратить внимание читателей на определенное место страницы.


Добавление подобного эффекта широко распространено в сети для привлечения внимания к новостям сайта или наиболее важной информации.
Также важно то, что Вы можете изменить параметры "Плывущего" или "прокручивающегося" текста на свое усмотрение и учитывая оформление и дизайн вышего блога ;-)
Демонстрация "Плывущего" или "Прокручивающегося" текста


Демонстрация "Плывущего" или "Прокручивающегося" текста


Демонстрация "Плывущего" или "Прокручивающегося" текста


Демонстрация "Плывущего" или "Прокручивающегося" текста


Демонстрация "Плывущего" или "Прокручивающегося" текста


Смотриться интересно и необычно, неправда ли?


Так давайте шаг за шагом узнаем как разнообразить посты подобным текстом!


Начнем с теории для того чтобы понять как вообще это все работает и что из себя представляет:


"Плывущий" или "прокручивающийся" текст - это по сути обычный текст, только заключенный в определенные html теги. Выглядит это примерно так:


<открывающий тег> Ваш "Плывущий" или "прокручивающийся" текст </закрывающий тег>
конечно же вместо "открывающий тег" и "закрывающий тег" мы будем истользовать настоящие html теги и различные параметры. Выглядить это будет примерно так:
<marquee>Демонстрация "Плывущего" или "Прокручивающегося" текста</marquee>
если Вы попробуете добавить это в сообщение, то опубликовав его увидите "Плывущий текст"! Можете попробовать ;-)


Но как я уже говорил существует возможность изменять такие параметры "Плывущего" или "прокручивающегося" текста, как размер шрифта, сам шрифт, фон текста, скорость прокрутки, направление прокрутки и т.п. на свой вкус!


Для этого к открывающемуся тегу необходимо добавить дополнительные параметры вашего текста.
Такие как:
ПараметрРезультат
direction="left"Заставляет двигаться текст влево
direction="right"Заставляет двигаться текст вправо
direction="up"Заставляет двигаться текст вверх
direction="down"Заставляет двигаться текст вниз
behavior="alternate"Заставляет двигаться текст вправо и когда он достигнет конца вернуться влево
behavior="slide"Заставляет текст остановиться, когда он достигнет конца строки
loop="4"Если Вы хотите заставить текст появляться определенное количество раз, то добавьте этот параметр, указав вместо "4" необходимое число появлений текста
scrollamount="2"Этот параметр устанавливает скорость движения текста. Чем меньше значение, тем медленней будет двигаться текст (1-медленно, 5-быстро)
width="400"Этот параметр указывает ширину поля, в котором будет двигаться текст
height="66"Этот параметр указывает высоту поля, в котором будет двигаться текст
onmouseover="this.stop()" onmouseout="this.start()"Если Вы зададите первый параметр, то текст остановится, когда вы подведёте к нему курсор. Второй заставит текст двигаться, когда подведете к нему курсор.
bgcolor="#9999CC"Этот параметр устанавливает цвет фона поля с текстом
style="color: #FF0000"Этот параметр устанавливает цвет текста
style="font-size: 1em"Размер шрифта
style="font-family: Tahoma"Шрифт
style="font-size: 12pt; color:
#800000; font-family: Tahoma"
Если Вы хотите одновременно указать размер шрифта, его цвет, и сам шриф, то используйте данный параметр со своими данными




Тут привожу примерный код, который можете поизменять на свой вкус с целью попробовать все выше перечисленные параметры:
<marquee direction="Up" scrollamount="8" width="220" style="font-size: 12pt;
color: #800000; font-family: Tahoma" height="66" bgcolor="#FFCC99">Плывущий текст для Blogger</marquee>
и результат
Плывущий текст для Blogger


Дерзайте!

Ярлыки: ,

6 коммент.:

Boholik комментирует...

Спасибо большое. Понадобится в будущем. :-)

Sir Max комментирует...

Ужасно, очень ужасно, когда люди реально размещают на своих страничках что-то подобное...

А не разместить ли мне? :)

Елена комментирует...

Спасибо! После долгих мучений с цветом и размером все получилось!

Unknown комментирует...

КЛАС!!! ОГРОМНОЕ СПАСИБО!

Анонимный комментирует...

Пригодилась статья, спасибо за подробный материал

Николай комментирует...

Спасибо. И это пригодилось

Отправить комментарий