logo

Баннер растяжка

Как сделать и установить на сайте баннер растяжку

Поиски в интернете по этому вопросу почти ничего не дали. А лишнее рекламное место не помешает. Пришлось "изобретать" самому. Решил сделать растяжку с бегущей строкой. Делается всё очень просто, а для начала загляните на страницу "Бегущая строка". Результат, который получится, смотрите под шапкой этого сайта.

Начал с самого элементарного - с тегов, которые образуют бегущую строку < marquee >  </marquee >:

Баннер растяжка

Далее, чтобы получить полноценную растяжку, необходимо добавить к тегам некоторые атрибуты. Начнём с того, что создадим сам блок растяжки и сразу зададим ему какую-то окраску.
Добавим к тегу атрибуты width, height и bgcolor, которые зададут длину, высоту и цвет блока:
< marquee width="100%" height="25" bgcolor="#99ADC2>Баннер растяжка  </marquee >

Баннер растяжка

Длину блока width можно установить как в процентах так и в пикселях, на Ваше усмотрение

Сделаем бордюрную обводку блока с помощью атрибута border, так будет красивее смотреться:

< marquee style="border: #000000 2px solid" width="100%" height="25" bgcolor="#99ADC2>Баннер растяжка </marquee >

Баннер растяжка

Теперь надо уменьшить скорость движения строки с помощью атрибута scrollamount и время между прорисовками строки с помощью атрибута scrolldelay

< marquee style="border: #000000 2px solid" scrollamount="2" scrolldelay="20" width="100%" height="25" bgcolor="#99ADC2>Баннер растяжка </marquee >

Баннер растяжка

Изменяя значения в этих атрибутах, соответственно меняются параметры движения строки

Далее можно изменить цвет и размер шрифта текста в бегущей строке, добавив определённый код:

< marquee style="border: #000000 2px solid" scrollamount="2" scrolldelay="20" width="100%" height="25" bgcolor="#99ADC2><b><font face="Arial" size="4" color="#CC3300">Баннер растяжка</font></b></marquee >

Баннер растяжка

size - размер шрифта;
color - цвет шрифта

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

Сделаем ссылку: <a href="http://thirdsite.ucoz.ru/" title="полезные скрипты"></a>. Сделанную ссылку вставим в общий код:

< marquee style="border: #000000 2px solid" scrollamount="2" scrolldelay="20" width="100%" height="25" bgcolor="#99ADC2><b><font face="Arial" size="4" color="#CC3300"><a href="http://thirdsite.ucoz.ru/" title="полезные скрипты">Баннер растяжка</a></font></b></marquee >

Баннер растяжка

В основном это всё. Можно конечно еще добавить некоторых атрибутов, но это уже зависит от ваших потребностей.

Теперь о том куда вставить этот код, что бы он был под шапкой сайта. По логике код надо вставлять где-то в конце кода шапки. В моём случае я вставил код в конце файла header.php Поскольку внизу шапки находится горизонтальное меню, то я вставил код сразу после закрывающего тега </nav>

Баннер растяжка обновлено: Апрель 10, 2017 автором: admin

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

▲Вверх