HTML-код ротатора тизеров и баннеров.




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



Создаём ротатор тизеров или баннеров,кому что надо.




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

Рамку на таблице можно регулировать по
своему желанию.Тег border="1" отвечает за этот параметр и если вместо переменного значения 1 поставить 0 то рамка станет невидимой.

<table style="text-align: left; width: 300px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">Ваш тизер<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Ваш тизер </td>
</tr>
<tr>
<td style="vertical-align: top;">Ваш тизер </td>
</tr>
<tr>
<td style="vertical-align: top;">Ваш тизер </td>
</tr>
<tr>
<td style="vertical-align: top;">Ваш тизер </td>
</tr>
</tbody>
</table>
V-G
Агрегатор партнёрских
 программ


Деньги сегодня
Заработать онлайн можно в
течении пару часов и  даже
 сегодня  снять в банкомате


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






Таким образом выглядит сама таблица куда мы будем
вставлять свои тизеры или баннеры в принципе разницы нет.Единственное что нужно будет обязательно учитывать значение width: 300px;" которое необходимо будет менять в зависимости от размеров баннеров.При желании изменять
можно много параметров.Цвет каждой ячейки тизера, расположение текста и т.д и т.п. В примере у меня расположены три тизера ссылки которых ведут на мои страницы,один баннер социалки  и скрипт от qwertypay.
Как видим они нормально существуют и не мешают друг другу.

Ваш тизер
Ваш тизер
Ваш тизер
Ваш тизер
Рекламный код тизеров


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

 <marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="320">место для ваших банеров</marquee>

Если всё было сделано правильно,то при просмотре у Вас должно получиться тоже,что и меня.

Горизонтальный ротатор


Ротацию тизеров можно настраивать по своему желанию.Для того что-бы тизеры ротировались справа налево нужно просто создать горизонтальную таблицу и поменять переменную direction="up" на direction="left" и получиться такой симпатичный блок.

Код ротатора

<marquee direction="left" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="200">Место для контейнера с баннерами.</marquee>

Платные опросы
отзыв и рекомендации


Б.К ЛЕОН
Ставки на спорт.
Скорпион 3Д
Татуировки скорпионов в 3Д


От простого к более сложному и функциональному ротатору баннеров.Узнать как установить самостоятельно и настроить слайдер ротатор для баннеров можно из следующей статьи.
Код таблицы
<table style="text-align: left; width: 500px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">1<br>
</td>
<td style="vertical-align: top;">2<br>
</td>
<td style="vertical-align: top;">3<br>
</td>
</tr>
</tbody>
</table>

Смотреть ещё

Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода

6 комментариев:

  1. Все класно, все работает. Только напрягают паузы между повторными показами тизеров. Как можно сделать (и можно ли), чтобы тизеры демонстрировались непрерывно?

    ОтветитьУдалить
  2. Админ добрый день все работае супер. К вам другой вопрос поделись секретом как при наведении на ссылку рекламы так ру ссылка увеличивается в рамке и рамка еще и цвет меняет. Буду очень благодарен. мои контакты:
    https://vk.com/pavlyuk81
    Chertegnik@ukr.net

    ОтветитьУдалить
  3. Об этом написано подробно в статье Креативное выделение ссылок http://www.v-gol.ru/2014/04/add-creative-links.html

    ОтветитьУдалить
  4. Приличный ротатор. Подскажите, как правильно код внедрить в блог на Блоггер. Через гаджет или в сам код блога. Если можно то пошагово. Спасибо.

    ОтветитьУдалить
  5. Да всё элементарно.Берём картинки со ссылками и устанавливаем каждую на место подписанное-ваш тизер. Затем всю конструкцию вносим в место для контейнера баннеров место для ваших банеров и устанавливаем куда угодно или же в гаджет или же просто в тело страницы в нужном нам месте.Внимательней читайте всё и так подробно описано

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