ротатор банерів просто

Наша взаимовыгодная связь https://banwar.org/

Привіт, друзі!

Мої дорогі читачі постійно дають мені всілякі ідеї для написання статей і ось сьогодні ця стаття теж написана на прохання моєї чарівної читачки.

Хоча, судячи з коментарів, її вже чекають багато моїх друзів.

Темою нашої сьогоднішньої бесіди буде ротатор банерів.

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

Думаю, що Ви вже знаєте навіщо потрібен такий ротатор банерів на Вашому блозі?

Він дозволяє помістити кілька банерів в одне місце і показувати їх один за одним, що дуже економить місце на Вашому ресурсі.

У ротаторі можуть бути банери з рекламою Ваших інфопродуктов або з партнерськими програмами, а може бути просто картинки-посилання, що ведуть на інші сторінки Вашого ж блогу або блоги Ваших друзів. Я, думаю, якщо подумати, прийде чимало ідей як застосувати ротатор.

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

Перш, ніж створювати ротатор, підготуйте картинки (банери). Картинки повинні бути всі однакового розміру.

Якщо Ви хочете вставити ротатор в сайдбар блогу, то поміряйте його ширину (це можна зробити за допомогою лінійки програми FastStone Capture ). Визначивши ширину і висоту картинки, слід регулювати всі банери під цей розмір.

Змінити розмір картинки можна в багатьох програмах, які ми вже розглядали з Вами, наприклад в простій програмі Picture Manager Microsoft Office , Яка входить в пакет Microsoft Office і є на Вашому комп'ютері. У цій програмі можна не тільки змінити розмір, але і обрізати зайве при необхідності.

Коли картинки будуть готові, дайте їм ім'я (тільки НЕ російською мовою), завантажте їх собі на хостинг в кореневу папку public.html. І у Вас будуть готові посилання на ці картинки.

Також картинки можна завантажити через адмін-панель Вашого блогу - «Медіафайли» - «Додати новий» і взяти посилання на картинки.

Для зручності запишіть посилання в який-небудь файл, наприклад Блокнот. Туди ж підготуйте і запишіть посилання, на які будуть перенаправляти банери.

Коли все буде готово, приступайте до установки ротатора банерів.

Варіант 1

За допомогою сервісу http://www.htmlbasix.com/banner.shtml

Цей сервіс англомовний, але я Вам даю розшифровку, хоча якщо користуєтеся браузерами Гугл Хром або Яндекс, то легко можете перевести.

Аналогічно заповнюєте поля і для інших банерів. Можете заповнити всі поля (для всіх 10-ти банерів), можете обмежитися і двома-трьома, як забажаєте.

Коли заповніть всі поля, натискаєте кнопку «Generate». На новій сторінці відкриється html-код, який Ви копіюєте і вставляєте в те місце на блозі, де хочете бачити ротатор.

У багатьох блогерів копіювальні, зроблені в цьому сервісі прекрасно працюють, але так як у мене завжди все не так як у людей, то, природно, у мене не працює.

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

Варіант 2

За допомогою скрипта.

Так як я особливо в скриптах не розбираюся, то шукала варіант найбільш простий. До речі, перебираючи різні варіанти, настільки захопилася, що вирішила - коли закінчиться літо обов'язково вивчу курс Євгенія Попова JavaScript і jQuery , Це насправді революційні технології! За допомогою їх можна буде робити цікаві речі на блозі.

Ну, а поки поставимо простий нехитрий ротатор.

Ось скрипт ротатора банерів.

<Script type = "text / javascript"> <! - $ rotator = {banners: [{url: 'http://komandalider.ru/blog.html', img: 'http://inetnovichok.ru/img /blog2dnya.jpg ', title:' ПОДАРУНКИ ДЛЯ ВАС '}, {url:' http://1000-k.ru/op/go/ledyboss/p/1000moneyel ', img:' http://inetnovichok.ru /img/Borisov.jpg ', title:' Стань тисячником і зароби на блозі '}, {url:' http://1popov.ru/partner66/disc11 ', img:' http://inetnovichok.ru/img/ Popov.jpg ', title:' JavaScript і jQuery - революційні технології '}, {url:' http://1popov.ru/partner66/disc1 ', img:' http://inetnovichok.ru/img/Popov2.jpg ', title:' ВСЕ ТЕХНІЧНІ МОМЕНТИ '}], options: {width:' 300 ', height:' 300 ', target:' _blank ', time: 4000}, num: 0, exec: function (id) {document .getElementById (id) .innerHTML = '<a href = "' + this .banners [this .num] .url + '" title = "' + this .banners [this .num] .title + '" target = " '+ this .options .target + ' "> <img src ="' + this .banners [this .num] .img + ' "width ="' + this .options .width + ' "height ="' + this .options .height + ' "alt ="' + this .banners [this .num] .title + ' "> <\ / a>'; if (this .num <this .banners .length - 1) {this .num ++; } Else {this .num = 0; }}, Ready: function (id) {var loadevent = window .onload; window .onload = function () {if (typeof loadevent == 'function') loadevent (); $ Rotator. exec (id); window .setInterval (function () {$ rotator. exec (id);}, $ rotator. options. time); }}} $ Rotator. ready ( 'banner'); // -> </ script>

Раджу Вам скопіювати його в Блокнот і там провести зміни під себе, а потім вже готовий вставляти собі на блог.

Отже, Ви бачите, що цей скрипт з моїми посиланнями, Вам їх потрібно замінити на свої.

У масиві banners знаходиться 4 моїх банера, де URL - це посилання, на яку веде банер, img - посилання на картинку, title - текст, який буде відображатися при наведенні курсору.

Ви обережно в Блокноті видаляєте мої посилання і вставляєте свої. Дивіться уважно, щоб посилання були всередині одинарних лапок.

Можете, за бажанням, додавати ще банери або прибирати.

У об'ёкте options, поставте розміри своїх картинок: width - ширина, height - висота. А також time - час показу одного банера (у мене стоїть 4000 - це 4 сек.), Можете виставити своє значення.
А target відоме вже Вам значення - де буде відкриватися сторінка, якщо людина клікнув по банеру, _blank - нове вікно, top - в цьому ж вікні.

Коли Ви зробили зміни, то копіюєте цей код, йдете в адмін-панель свого блогу «Зовнішній вигляд» - «Редактор» - файл header.php

І ПЕРЕД закривається тегом </ head> вставляєте цей код. Натискаєте «Оновити файл».

Бажано, звичайно, перед маніпуляціями з кодом скопіювати вміст файлу header.php в Блокнот. Так, про всяк випадок. Раптом щось піде не так, щоб можна було потім його відновити.

Далі, визначаєтесь куди Ви поставите ротатор. Якщо це сайдбар, то в адмінці блогу «Зовнішній вигляд» - «віджіти» берете новий Віджая «Текст» і вставляєте туди цей код

<Div id = "banner">

Натискаєте «Зберегти». Оновлюєте сторінку свого блогу.

Ротатор банерів повинен почати працювати відразу ж.

Ну, ось, друзі, і все. Начебто написано багато, але коли почнете робити, все це робиться швидко і труднощів виникнути не повинно.

Якщо ж все-таки щось піде не так - пишіть в коментарях, спробуємо розібратися.

З глибоким і щирим повагою до Вас, Людмила Винокурова