Привіт! Сьогодні ми з вами встановимо найпростіший ротатор банерів, але спочатку давайте з'ясуємо, що це таке і навіщо він нам потрібен.

Ви, напевно, не раз помічали на сайтах, що при оновленні сторінки на місці одного банера з'являється зовсім інший. Чи помічали? Тоді ви бачили ротатор банерів в дії.

Ротатор банерів дозволяє на одному і тому ж місці встановлювати кілька банерів. Змінюються банери при оновленні сторінки або при переході на іншу сторінку сайту (якщо ротатор варто, наприклад, в боковій колонці).

Поки ваш сайт молодий, на ньому багато місця для розміщення банерів. Але, з часом, цього місця починає катастрофічно не вистачати. І ось тут до вас на допомогу прийде ротатор банерів.

Для його установки існує безліч різних плагінів і скриптів. Я випробувала деякі з них і вибрала для вас найпростіший спосіб установки ротатора банерів.

Так як банери встановлюються найчастіше в віджети, то я не бачу сенсу використовувати для баннерокрутілкі плагін. Набагато простіше встановити в віджет свого сайту простенький код і насолоджуватися результатом.

Ось такий код дозволить вам створити карусель з трьох банерів:

<Script>
var banner = new Array ();
banner [0] = '<a href="http://ваш сайт.ru" target=_blank> <img src = "http: // адреса вашої картінкі.png" alt = "тема банера" ​​title = "Подивитися" width = 190> </a> ';
banner [1] = '<a href="http://ваш сайт.ru" target=_blank> <img src = "http: // адреса вашої картінкі.png" alt = "тема банера" ​​title = "Подивитися" width = 190> </a> ';
banner [2] = '<a href="http://ваш сайт.ru" target=_blank> <img src = "http: // адреса вашої картінкі.png" alt = "тема банера" ​​title = "Подивитися" width = 190> </a> ';
var n = ~~ (Math.random () * 3);
document.write (banner [n]);
</ Script>

Звичайно ж, перш ніж вставити цей код вам потрібно налаштувати під себе.

Потрібно замінити:

• http: // ваш сайт.ru - на адресу сайту куди буде перехід після кліка на картинку банера (для кожного банера свій). Наприклад: http://oxamitta.ru/saitwp
• http: // адреса вашої картінкі.png - на адреса картинки банера . Наприклад: http://oxamitta.ru/saitwp/images/svpress300.png

Ще необхідно для кожного банера прописати alt і title. Не лякайтеся це зовсім просто.

• alt - це тема вашого банера. Найкраще писати одним словом. Тобто в коді слова "тема банера", замінюємо на одне слово (росіянами). Приклад: замість alt = "тема банера" ​​я для першого банера напишу alt = "сайт"
• title - це слово яке буде з'являтися при наведенні курсору на банер. Можете взагалі не міняти або написати щось своє для кожного банера.

І залишилося визначитися з шириною банерів. Краще якщо вона буде однаковою. У коді ширина вказана в пікселях - width = 190. Тобто в даному випадку ширина моїх банерів 190 пікселів. Ви можете написати свою. До речі, якщо навіть ваші картинки будуть іншої ширини, то їх ширина буде приведена до тієї, яку ви вкажете. При цьому картинка зміниться пропорційно.

Після внесення всіх змін в код, вставляєте його в віджет. Переходьте в консоль свого сайту → зовнішній вигляд → віджети. Затягуєте блок "текст" в потрібне місце і вставляєте в нього відредагований код. Не забудьте зберегти!

Цей невеликий скрипт ротатора банерів можна збільшити - додати кількість банерів. У пропонованому ротаторі три банери, але ви можете додати будь-яку кількість банерів.

Продублюйте рядок banner [2] потрібну кількість разів, замінюючи в ній цифру номера банера (наступний по порядку 3, потім 4 і т.д.). До того ж в рядку - var n = ~~ (Math.random () * 3); пропишіть загальна кількість банерів.

Додати в такий скрипт можна і 10 банерів, але перш ніж це робити, подумайте гарненько. Скільки відвідувачів вашого сайту переглядають більше однієї його сторінки? А скільки оновлюють сторінку більше двох разів? Ось і виходить, що перший банер побачать всі гості вашого ресурсу, другий вже тільки частина. Третій банер побачить ще менше відвідувачів, а що говорити про десятому.

Насправді найоптимальніше кількість банерів в баннерокрутілке - три. Хоча, звичайно вирішувати вам, скільки їх буде.

Ось і вся установка і настройка самого простого ротатора банерів. А для тих хто так і не зміг розібратися - відео. Сподіваюся після його перегляду питань ні в кого не залишиться.

Приємного перегляду...

Давайте дружити