Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

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

Здравствуйте!
В прошлой статье на progress-project, мы с вами делали увеличения изображения в статье блога при клике, с помощью скрипта. Если вы не читали её, рекомендую это сделать перейдя по ссылке, очень полезная штука.

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

Я решил вам рассказать, как можно сделать на сайте или блоге WordPress. Бегущею строку с помощью html, без плагина.

Зададимся вопросам для, чего нужна бегущая строка на блоге?
И первая мысль которая напрашивается, это улучшение внешнего вида. Да конечно бегущая строка делает сайт более живым. Но не-только для украшения можно использовать бегущею строку на блоге.
Вполне возможно прокручивать с её помощи рекламные объявления (баннеры) для получения прибыли с вашего блога или просто для привлечения внимания посетителя.
Любой человек остановит свой взгляд, на бегущий строке и соответственно прочитает её, к тому-же она совершено не оказывает не какой нагрузки на сайт.
Но давайте приступим к делу!

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

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

Давайте сделаем для начала самую простую прокрутку текста при помощи тега <marquee>.

Просто-напросто помещаем между двумя тегоми <marquee> и </marquee> текст который вам необходимо прокручивать.

<marquee>
Ваш текст или код!
</marquee>

Пример простой бегущий строки:


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

Чтобы сделать бегущую строку со ссылкой нам нужен вот-такой код:

<marquee>
<a title="текст" href="адрес">Анкор</a>
</marquee>

Пример:


Лучший хостинг для вашего блога!

Теперь давайте сделаем с помощью тега <marquee> прокрутку изображения.
Например у нас будет, идти крокодил!



В этом случае код мы имеем вот такой:

<marquee>
<img src="https://abrek-ad-abra.ru/wp-content/uploads/2015/03/krokodil-progress-project.gif"/>
</marquee>

Добавим в нашу статью ещё животных и зверей!

kak sdelat begushchuyu stroku

<marquee>
<img src="https://abrek-ad-abra.ru/wp-content/uploads/2015/03/pyos-abrek-ad-abra.ru_.gif"/>
</marquee>


kak sdelat begushchuyu stroku

<marquee>
<img src="https://abrek-ad-abra.ru/wp-content/uploads/2015/03/krolik-progress-project.gif"/>
</marquee>

А теперь они пойдут друг за другом.
kak sdelat begushchuyu stroku html kak sdelat begushchuyu stroku html kak sdelat begushchuyu stroku html

<marquee direction="left"scrollamount='5'><img src="https://abrek-ad-abra.ru/wp-content/uploads/2015/03/krokodil-progress-project.gif"/><img src="https://abrek-ad-abra.ru/wp-content/uploads/2015/03/pyos-abrek-ad-abra.ru_.gif"/><img src="https://abrek-ad-abra.ru/wp-content/uploads/2015/03/krolik-progress-project.gif"/></marquee>

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

Единственный и достаточно серьёзный недостаток, это то, что редактор WordPress не понимает тега <marquee>.
Если вы вставив тег <marquee> в статью блога в режиме html, а вставлять его необходимо именно в режиме html. То после, переключившись в визуальный режим, тег <marquee> попросту исчезнет. И у вас останется обыкновенный текст или картинка без прокрутки.

Поэтому если вам необходимо вставить бегущую строку, именно в статью, придётся сначала написать её в визуальном редакторе, всё проверить, переключится в режим html, найти место куда нужно вставить бегущую строку, вставить код строки и не выходя из html, опубликовать статью и больше её не трогать. Иначе всё пропадёт.

Но в отличие от статьи, в шаблоне данный тег работает безупречно.
Для этого, как правило подходят такие файлы, как footer.php, header.php, если вы хотите, чтобы ваша бегущая строка отображалась перед или после каждой вашей статьи, то следует вставить код в файл single.php.
Выберите наиболее подходящее место в файлах и встав-те код.

Дополнительные атрибуты тега <marquee>

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

Скорость: scrollamount

Ширина: width

Высота: height

Цвет фона: bgcolor

Тип движения: behavior
Его значения:

scrll (из конца в конец)
slide (появления с одного конца и остановка у другого)
alternate (из края к краю и обратно)

direction
left (движения текста в лева)
right (в право)
up (с низу в верх)

Возможные варианты вставки бегущей строки в ваш блог.

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

Вставка бегущий строки в статью блога.
Как я уже описал выше, вставлять код необходимо в режиме html. Далее не выходя из данного режима опубликуем статью.

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

Вставка кода бегущий строки в файлы темы блога.
Выбираем необходимый файл, вставляем код и сохраняем изменение.

Вставка кода бегущий строки в боковую панель блога.
Здесь всё точно также, как и в предыдущим варианте. Переходим в панели управления, внешний вид, виджеты. Дальше выберем виджет текст. Вставляем код и сохраняем.

Но вот собственно на этом и всё, по теме, как сделать бегущую строку html, на сайте или блоге. Хочу заметить, что нам не пришлось использовать для этой цели, специальные плагины, а значит данный способ не, как не повлияет на скорость загрузки вашего ресурса.
Уверен, что вы найдёте применение нашей бегущий строке. Я же, желаю вам успехов до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-02-19

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог