Реклама на сайте при помощи бегущей строки

Здравствуйте  мои дорогие читатели. Уже давно зародилась мысль поделиться  с вами  одной интересной идеей. Вероятно, что вы слышали о таком явлении, как реклама на сайте. Сейчас разберем  несколько приемов, как сделать рекламу на сайте или блоге при помощи бегущей строки. Это сможет сделать каждый. Читайте статью до конца.

Вы сейчас подумали о рекламном блоке от яндекс- директ,  blogun или rotoban.

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

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

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

Допустим, у вас на блоге идет конкурс.

У вас для читателей и подписчиков есть предложение по скидке на ваш курс.

Вы объявили конкурс на лучшего комментатора месяца.

Чтобы донести свое предложение в массы нужно написать свое предложение.

Вы сами  можете поставить рекламу на  сайт, не используя, баннеры и плагины. Умение и знания тоже не нужны.

Вам только нужно скопировать код, который я вам дам и поставить в нужное место.

И так сегодня вы узнаете варианты кодов для бегущей строки.

А также поясню, куда нужно и можно это все вставлять.

Варианты кодов бегущей строки.

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

Это  парный тег  <marquee></marquee>

 

Достаточно  написать:

<marquee>Внимание!  На сайте проводится конкурс комментатора</marquee>

Внимание! На сайте проводится конкурс комментатора

И строчка сразу побежала. Вставлять код нужно в редакторе текст, еще его называют HTML  редактор. Достаточно, когда вы ставите статью на блоге из режима визуально переключиться на режим текст и вставить код.

Мы рассмотрим несколько видов строчек и получим расшифровку каждой.

Делаем строчку  красивой и привлекательной,  для этого вставим  код.

<marquee style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваш текст</marquee>

Ваш текст

style="color: #D9470D это цвет

font-size: 40px это размер текста

font-weight: bolder  ширина линии

line-height: 150%; высота линии

Если добавим свойство direction со значением right  или left ,  строка изменит направление.

<marquee direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваше предложение о скидке на ваш курс</marquee>

Ваше предложение о скидке на ваш курс

Если подставим  значение up  для атрибута direction  наша строка появится снизу на вверх:

<marquee direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваш рекламный текст</marquee>

Ваш рекламный текст

А значение down  поменяет направление  сверху вниз.

<marquee direction="down"  style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваш текст</marquee>

Ваш текст

Можно увеличить скорость прокрутки бегущей строки,  используем атрибут scrollamount.  И в  кавычках укажем число меньше то и, соответственно скорость показа текста  будет меньше.

Пример:

<marquee scrollamount="20" direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваше рекламное предложение</marquee>

Ваше рекламное предложение

Атрибут behavior задаст вариант  прокрутки внутри рекламного  блока. Он  по умолчанию имеет значение scroll, это заставит  бегущую строчку  сначала скрываться, а затем  начинать движение сначала.

А если подставим такое  значение, как  alternate,  строка уже  не будет скрываться из виду, а когда  дойдет до границы блока снова начнет движение в обратную сторону. Этот вариант мне очень нравится.

<marquee behavior="alternate" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваше предложение по скидке</marquee>

Ваше предложение по скидке

Значение slide для atribyta  behavior это  команда дойти до границ  блока и остановиться:

<marquee behavior="slide" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваш рекламный текст</marquee>

Ваш рекламный текст

С помощью атрибутов width ( ширина) и  height ( высота)  будем использовать вместе и зададим границы блока. Для  этого  добавим рамку в стили.

<marquee width="300" height="300" scrollamount="15" direction="up" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваше объявление</marquee>

Ваше объявление

Можно изменить фон для рекламной строчки.  В этом нам поможет  атрибут bgcolor  В данном случае это  желтый цвет. Но можно в палитре цветов найти любой и подставить значение. Как вам это?

<marquee bgcolor="#F5FF37" width="300" height="300" scrollamount="12" direction="down" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Только сегодня скидка 10% Спешите</marquee>

Только сегодня скидка 10% Спешите

А теперь вообще супер. Бегущая строка двигается  в разные стороны.

Скорей копируйте код и внедрите.

<marquee width="49%" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee><marquee width="49%" direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Только у нас скидка 50%</marquee>

Бегущая строкаТолько у нас скидка 50%

Установив  время задержки анимации при  помощи  атрибута scrolldelay и,  подставив любое значение в числах (по умолчанию  80 миллисекунд), получим другой код:

<marquee scrolldelay="30" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваше предложение</marquee>

Ваше предложение

При  помощи тега marquee можно создать простой слайдер. Для этого подбираем картинки одинакового размера и загружаем в библиотеку. Не забываем оптимизировать. Берем ссылку на изображение и вставляем в код ниже.

<marquee direction="right" scrollamount="10" img src="Путь до картинки №1"/><img src="Путь до картинки №2" /><img src="Путь до картинки №3"/><img src="Путь до картинки №4"/><img src="Путь до картинки №5"/></marquee>

А этот вариант,  картинка будет  ссылкой. Пробуйте сами.

<marquee scrollamount="10"><a href="URL статьи №1"><img  src="Путь до изображения №1"  /><a href="URL статьи №2"img src="Путь до изображения №2" /><a href="URL статьи №3"img src="Путь до изображения №3" /><a href="URL статьи №"4"img  src="Путь до изображения №4" /><a href="URL статьи №5"2"img  src="Путь до изображения №5"  /></marquee>

Куда  вставить бегущую строку.

Вставлять  строку на сайт можно:

  • в статью

Тут нужно иметь всегда наготове нужный код и вставлять, туда куда считаете нужным. Вставляем в режиме текст(html) Только запомните, что код работает когда не переходите в визуальный редактор. Вставили просмотр, а потом публикуйте. Если потом задумаете редактировать код двигаться не будет и его нужно вставлять заново.

  • в шаблон:

Чтобы  строчка бежала все время без вставки каждый раз ее нужно вставить  в файлы header.php и footer.php  вашей темы WordPress.

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

Способы размещения и сам вид кода выбирайте на свой вкус. А у меня на этом пока все. Жду ваши вопросы. Подписывайтесь на новые статьи  блога.

 

C уважением, Рита Молчанова, автор блога ritabk.ru

  • Ольга Полякова

    Рита, спасибо за разъяснения! Бегущая строка — отличный вариант рекламы. Непривычно, поэтому нравится.) Спасибо за статью.

    [Ответить]

    Рита Молчанова Reply:

    Оля, берите коды и внедряйте. Успехов!

    [Ответить]

  • Виктория

    Рита, очень интересная статья и полезная. Я сразу применила самы1 простой вариант ( в статье). Классно. А вот, когда попыталась вставить в виджет, то почему-то , исчезли из бара соседние виджеты, хотя я их вообще не трогала... Поэтому из виджета я быстренько код убрала...Но в целом , для статей и для слайд-баров патент — Супер! Большое спасибо за статью.

    [Ответить]

    Рита Молчанова Reply:

    Спасибо, Вика!

    [Ответить]

    Рита Молчанова Reply:

    Виктория, сейчас только проверяла код работает ничего не исчезло. Просто нужно в коде немного уменьшить размеры согласно своему бару. Например:

    Я поставила width="300" height="300"у по 260 , scrollamount="10" font-size: 20px Он стал меньше и вписался

    [Ответить]

  • Ирина

    Рита! Привет! Твоя статья как всегда интересна и актуальна. Буду применить ее на своем сайте. 😀

    [Ответить]

  • Виктория

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

    [Ответить]

    Рита Молчанова Reply:

    Вика, в хедере тоже неплохо смотрится. Если что обращайся. Как найти меня знаешь.

    [Ответить]

  • Вика, для тебя не убираю. Смотри в header и в виджете. Если нужна помощь пиши.

    [Ответить]

  • Баяс

    Впечатляюще, эффектно и, наверное, эффективно.

    [Ответить]

    Рита Молчанова Reply:

    Уверена, что очень эффективно, особенно если такую строку в header поместить.

    [Ответить]

  • Олег

    Рита, маленький совет — уменьши размер шрифта, а то в браузере, где масштаб более 100%, строка мерцает и не читается (я сам через это прошел)

    [Ответить]

    Рита Молчанова Reply:

    Поняла, Спасибо, Олег!

    [Ответить]

  • Денис Скрипник

    Благодарю за интересную идею.

    P. S. Лучше написать стили не в атрибуте style, а назначить class и прописать для него стили в style.css.

    [Ответить]

    Рита Молчанова Reply:

    Денис, есть люди которые в этом не разбираются. Это для них. А как сделать в стилях я тоже знаю.

    [Ответить]

  • Артем

    Огромное спасибо за статью и за весь сайт в целом.

    Написано интересно, с душой и без воды.

    Я считаю, что это лучший ресурс в области заработка в интернете.

    Я только вступил на этот путь, начал вести блог и мне очень полезен ваш опыт.

    Отличный пример качественного сайта, за которым хочется следить:-)

    [Ответить]

    Рита Молчанова Reply:

    Артем, спасибо Вам за такую высокую оценку моей работы. Такие отзывы дорого стоят. Я тоже набралась за 2 года опыта. И теперь буду давать материал еще с большим профессионализмом. А мне, поверьте, есть что вам рассказать. Успехов Вам и вашему блогу!

    [Ответить]

  • Надежда Давыдова

    Главное не перестараться. А вообще отличная строчка получилась! Спасибо за подробное обучение!

    [Ответить]

    Рита Молчанова Reply:

    Спасибо, Надежда. Еще один не очень хороший момент, что если нужно редактировать статью, код портится. И его нужно вставлять заново. А так все устраивает.

    [Ответить]

  • Надежда Давыдова

    Спасибо, что предупредили. Я теги себе в блокнотик записала, использую при необходимости 🙂

    [Ответить]

    Рита Молчанова Reply:

    Я тоже. Всегда наготове.

    [Ответить]

  • А как поменять скорость движения строки? Сам не нашёл. Заранее благодарю!

    [Ответить]

    Рита Молчанова Reply:

    Владимир, цитирую. "Можно увеличить скорость прокрутки бегущей строки, используем атрибут «scrollamount». И в кавычках укажем число меньше то и, соответственно скорость показа текста будет меньше. Пример кода , как раз находится под этими словами в статье. Копируете код в блокнот( обязательно). И меняете величину. <marquee scrollamount="20" direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Ваше рекламное предложение</marquee>

    Измените величину «20» на «10» меньше, соответственно «20» больше.

    [Ответить]

Остались вопросы? Напишите на E-mail: rita.mol4anova@yandex.ru или позвоните Skype: margo19596