Бегущая строка с помощью тега marquee

Бегущая строка в блоге
Тег marquee разработан для создания бегущий строки текста на странице без применения javascrypt средств, что в общем-то удобно, но это нестандартный тег.
Иногда этот тег встречается в редакторах на форумах, но широкого распространения не получил.
Тег поддерживает значительное количество атрибутов и почитать о них можно на htmlbook.ru.

Касаемо Blogger, тег marquee нормально работает в Blogger'е и даже его можно вставлять в заголовок статьи.

Привожу готовые "бегущие строки", вставлять в любое место (статья, шаблон, гаджет) в html режиме:

1) Слева направо:
Трололо школоло
<marquee behavior="scroll" direction="left">Трололо школоло</marquee>

2) Слева направо и обратно:
Съешь ещё этих мягких булок
<marquee behavior="alternate">Съешь ещё этих мягких булок</marquee>

3) Снизу вверх:
Осбака бывает кусачей только от жизни собачей
<marquee  behavior="scroll" direction="up">Осбака бывает кусачей только от жизни собачей</marquee>

4) Разные скорости движения текста:
Первая передачаЧетвёртая передача передачаПятая передача
<marquee behavior="scroll" direction="left" scrollamount="1">Первая передача</marquee><marquee behavior="scroll" direction="left" scrollamount="10">Четвёртая передача передача</marquee><marquee behavior="scroll" direction="left" scrollamount="20">Пятая передача</marquee>

5) Картинка в бегущей строке:
smile
<marquee behavior="scroll" direction="left"><img src="http://3.bp.blogspot.com/-Sk8ykYwtpiQ/TlNNcF8Pu-I/AAAAAAAAF0A/MFsh9oSf5C8/s1600/blogger.png" width="100" height="100" alt="smile" /></marquee>

6) Картинка с текстом в бегущей строке:
smile

Blogger, блин, не для чайников.


<marquee behavior="scroll" direction="left"><img src="http://3.bp.blogspot.com/-ctoLSSw14Js/ToKyyeEoHUI/AAAAAAAAF9Y/hoxdL8FZNWM/s1600/man.jpg" width="100" height="100" alt="smile" /><br /> <p>Blogger, блин, не для <a href="http://blogger.omg-linux.ru/2012/01/blogger.html" target="blank" alt="Яндекс Поиск в каждый сайт!">чайников</a>.</p></marquee>

7) Мигающий текст:
Налетай, халява!!!
<marquee direction="left"><blink>   Налетай, халява!!!   </blink></marquee>

Marquee позволяет задавать тексту любые свйоства в соответствии с html правилами.

1) Размер текста:
Лягушки в обмороке
<marquee style="font-size:   20px   ">   Лягушки в обмороке   </marquee>
Размер шрифта задаются в пикселях (например, 20px)

2) Цвет текста + ссылки (при наведении текст останавливается):
Картинки в Blogger и ЯндексКартинки в Blogger. Яндекс на связи
<marquee behavior="scroll" align="middle" direction="left" scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()" style="color:#0f66bd;"><a href="http://blogger.omg-linux.ru/2012/01/indeksatsia-kartinok-v-blogger-yandex.html">Картинки в Blogger и Яндекс</a>  →  <a href="http://blogger.omg-linux.ru/2012/01/indeksatsia-kartinok-v-blogger-otvet.html">Картинки в Blogger. Яндекс на связи</a></marquee>
Где:
style="color:#0f66bd - цвет текста (в демо цвет не изменился из-за жёстких настроек css в моём шаблоне)

3) Фон текста:
Любите Родину - Мать вашу!
<marquee bgcolor="#цвет_полосы" style="color: #цвет_шрифта">   Любите Родину - Мать вашу!   </marquee>

По мотивам этой статьи.

Другие статьи по теме бегущая строка:
Новостная бегущая строка для блога.
Бегущая строка последних сообщений блога.

22 комментария:

  1. Да, ява скоро совсем отомрет, наверно как повится css4. Единственный момент в кроссбраузерности, разный браузер по своему понимает сss, от этого приходится корпеть над кодом.

    ОтветитьУдалить
  2. Гугл первый, кто не похоронит ajax, так как на нём и на json строит будущее своих сайтов.
    А css - это лишь обёртка, которая всё грозится превратиться в Шрека =).

    ОтветитьУдалить
  3. Там примеры и поинтересней есть, когда отскакивает от стенок)) Меня так и подмывает у себя также черкнуть. Люблю всё с образцами.

    ОтветитьУдалить
  4. За образцы гугл наказывает(( Правда, не всегда.
    Не любит он дубли и не знает про тег noindex и шпарит все подряд.

    ОтветитьУдалить
  5. У себя не замечала. Код с примерами часто к себе переписываю. Измени рамку, добавь тень и проблем не будет.

    ОтветитьУдалить
  6. @NMitra
    Когда время проходит, гугл уже не обращает внимание. А для зелёного блога посты, напичканные внутри "служебной информацией" убийственны. Скорее всего, есть специальный гс-фильтр для богспота.
    На блоггер получался превосходный парсинг с rss, даже Яндекс индексировал на ура. С этим теперь борятся и определяют как раз по внезапным лишним тегам в посте.

    ОтветитьУдалить
  7. Всё равно не понимаю как часть статьи может быть лишним тегом, тем более не начало поста, а его середина. Вы же сами его составляете. Вместо div поставьте textarea. Да, если всё подряд собирать, писать незакрытые теги, то понятно, что кривые руки у кого-то.

    Да, Blogger, как мне видится, проходит всю ту же песочницу, которую сейчас для некоторых других платформ отменили. Не обязательно на блоге будет техническая инфо.

    ОтветитьУдалить
  8. Идеал для поисковика - чистый html.
    Гугл понимает страницу так, как её видит линуксовый браузер линкс. Это их слова.
    Если я вставляю ковёр <style></style>, что бы в демо завелся определённый виджет, то это лишний мусор. Не мусором он будет при правильном соотношении инструментов верстки и полезного текста.

    Мне суппорт как-то, после переезда одного движка на другой и переиндексации (которую я сам в письме запросил), прислал процент, чтобы показать, что я не тем занимаюсь: 5-10 слов, море дивов и ковры стайлов + развёрнутый скрипт js. Это был досадный баг. И чего можно было ожидать? Гугл конечно может держать это в индексе, но зачем...

    А вот питоновый парсер как раз делал тоже самое в жж и в блоггере, вставлял кучу всякой ерунды. По этому признаку легче всего ограничивать горе-мастеров, а заодно захватывать все гс.

    Теперь вспомним, что некоторые таланты делали по 1000 автоблогов на разных аккаунтах, неудивительно, что Blogger попал в список гс-платформ.

    ОтветитьУдалить
  9. У меня пока читатели приходят на блог регулярно, поэтому придерживаюсь правила: понятно и с кучей примеров. Без примеров HTML и CSS не красив и не понятен. А надо так, чтоб взглянул и сразу дошло, что можно ожидать от его применения. Вообщем, как говорится сайт для людей.

    Ссылки с постов открытые. Обязательно ссылка на автора материала - этому научилась у одного западного блоггера, а раньше зажимала.

    ОтветитьУдалить
  10. У вас всё грамотно. Образец оформления, так сказать.

    Бояться санкций надо таким лентяям, как я.

    "Ссылки с постов открытые."
    Вот это правильно. Респект. Я все пытаюсь убедить людей, что зажимать ссылки нельзя. Но народ параноит :).

    ОтветитьУдалить
  11. мда, назад в 90е? такие бегущие строчки были очень популярны на заре интернета. сейчас такое будет вызывать только рвотные рефлексы

    ОтветитьУдалить
  12. На моем блоге есть типа новостной блок, окошко небольшого размера, в котором прокручиваются какие то гиперактивные тексты, когда наводишь куросор останавливаются и можно кликать по ним и переходить на другие страницы, сайты.
    Я считаю этот новостной блок чьей то очень удачной разработкой, у вас на сайте я пока ее не вижу.
    Вопрос вот в чем - Как сделать чтобы в этот новостной блок автоматически направлялись последние допустим 5 новых статей, публикаций, хорошо бы даже с уменьшеными изображениями. Возмжно это реализовать или же уже есть что то подобное где можно это посмотреть???
    На разных крупнейших ведущих новостных сайтах это есть, ну так видимо это уже последний писк моды, что то более навороченое.

    ОтветитьУдалить
  13. Хи-хи, про Марию рассмешил. Что ж так твой блог спамеры полюбили?

    ОтветитьУдалить
  14. При том спам международный, даже иероглифы встречаются. Письма идут уже тысячами.

    ОтветитьУдалить
  15. Убери анонимных пользователей или установи контроль комментариев для сообщений, созданных более 15 дней назад (капчи для последних сообщений не будет). Второе мне больше нравится.

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

    ОтветитьУдалить
  17. Насколько я помню, сколько лупов не ставь, всё равно будет пробел между первой и последней.
    Тут уместней что-то типа liMarquee http://masscode.ru/index.php/k2/item/44-limarquee.

    ОтветитьУдалить
  18. Aldous Snow, супер, это то, что я хотела! Но мне не понятно, что и куда вставлять, чтобы себе такое сделать. И комментарий не могу вам написать, т.к. без защитного кода коммент. не отправляется, а защитного кода не видно...

    ОтветитьУдалить
  19. Ставится стандартно (я правда не ставил): сначала надо файлы загрузить на dropbox, затем в шаблоне прописать ссылки и настроечный скрипт.

    ОтветитьУдалить
  20. Пришлось убрать, т.к. оказалось, что работает только в Мозиле, а в других браузерах не работает...

    ОтветитьУдалить
  21. Сейчас в Opera проверил, работает. Смотрите табличку поддерживаемых браузеров.

    ОтветитьУдалить