Наша взаимовыгодная связь https://banwar.org/
Інструкція про те, як зробити ротатор банерів своїми руками, використовуючи бібліотеку jQuery. В якій вже містяться необхідні кошти анімації, а код самого ротатора буде вміщатися в кілька рядків. При цьому кожен банер буде мати свою посилання.
Щоб зробити ротатор банерів кваліфікація програміста вам не буде потрібно. Ви просто скопіювали код, замінивши в ньому деякі дані на свої, використовуючи чіткі інструкції. За допомогою власного ротатора ви зможете збільшити заробіток в CPA партнерках багаторазово:
Наявність свого ротатора дозволило мені підвищити кликабельность банерів в кілька десятків разів, працюючи зі CPA партнеркою Admitad . Кількість банерів в ротаторі не має обмежень: в даному прикладі використовується - 3 картинки; а ефектів змінюваності - 5, їх число можна зменшити:
Спробуйте клацнути по ротаторами, кожен банер посилається на окрему сторінку. Що в ньому саме чудове? У ньому немає монотонності і звикання - саме це робить його понад клікабельним. Зміна кадрів відбувається «вроздріб» - не по порядку, з інтервалом в 4 сек. Це оптимальний інтервал, що не викликає роздратування користувачів, яке настає від частого миготіння яскравих зображень.
Для змінюваності картинок використовуються 5 ефектів, якщо ви вважаєте, що їх багато, то зможете залишити тільки потрібні. Ось вони:
- Горизонтальна прокрутка;
- Вертикальна прокрутка;
- Плавне заміна всіх пікселів картинки;
- Виростання картинки з точки;
- Горизонтальне обертання куба.
Перейдемо до технічної частини:
1) Щоб ротатор працював необхідно підключити бібліотеку jQuery. Для цього в тезі <head> сторінки або всього сайту помістивши в нього такий рядок:
<Script type = "text / javascript" src = "js / jquery-1.6.js"> </ script>Це означає, що бібліотека jquery-1.6.js (всього 89.2 КБ) знаходиться в папці js вашого сайту. Підійде будь-яка інша версія jQuery-бібліотеки (не обов'язково 1.6), можливо якась вже знаходиться на вашому сайті - перевірте. Якщо немає, то ви легко знайдете її в Мережі.
2) Додайте наступний код css в тезі <head> сторінки або в зовнішньому css-файлі (тоді без тегів <style>), що краще, якщо ротатор буде використаний для всього сайту:
<Style type = "text / css"> .slider {width: 160px; height: 120px; overflow: hidden; position: relative; margin: 15px auto 30px} .slider> div, .slider a {width: 160px; height: 120px; left: 0px; position: absolute; background-size: 100% 100%} .slide1 {background: url (images / block-hosting.png)} .slide2 {background: url (images / block-skidka-kursy- popova.png)} .slide3 {background: url (images / block-infobiznes.png)} </ style>Що тут потрібно поміняти?
- Розміри банера - в двох місцях, у мене він шириною - 160px, висотою - 120px.
- значення властивості margin в першому рядку, воно задає розташування слайдера на сторінці, у мене по центру.
- Вкажіть URL-адреси своїх зображень в background: url (...) для кожного банера, у мене їх 3. Якщо потрібно більше, то допишіть рядки по аналогії: .slide4 {...}, .slide5 {...}, ...
3) Вставте скрипт і html-код слайдера в те місце на сторінці, де буде розташовуватися ротатор:
<Script> $ (function () {var _rand = function (min, max) {return Math.floor (Math.random () * (max-min + 1)) + min;}; var ink = 1, oldink = 3; var slider = function () {setTimeout (function () {var callback = arguments.callee; $ ( '. slider div'). css ({zIndex: 0, width: '160px', height: '120px', top: '0px', left: '0px'}); $ ( '. slide' + oldink) .css ({zIndex: 1}); switch (_rand (1,5)) {case 1: $ ( '. slide '+ ink) .css ({left:' 160px ', top:' 0px ', zIndex: 2}). animate ({left:' 0px '}, 2000., slider); $ ('. slide '+ oldink ) .css ({left: '0px', top: '0px'}). animate ({left: '- 160px'}, 2000); break; case 2: $ ( '. slide' + ink) .css ( {top: '- 120px', zIndex: 2, left: '0px'}). animate ({top: '0px'}, 2000., slider); $ ( '. slide' + oldink) .css ({top: '0px', left: '0px'}). animate ({top: '120px'}, 2000); break; case 3: $ ( '. slide' + ink) .css ({top: '0px', zIndex : 2, left: '0px', opacity: 0.0}). animate ({opacity: 1.0}, 2000., slider); break; case 4: $ ( '. slide' + ink) .css ({top: _rand ( 1,120) + 'px', zIndex: 2, left: _rand (1,160) + 'px', width: '1px', height: '1px'}). animate ({top: '0px', left: '0px' , width: '160px', height: '120px'}, 2000., slider); break; ca se 5: $ ( '. slide' + ink) .css ({zIndex: 2, left: '0px', width: '1px'}). animate ({width: '160px'}, 2000., slider); $ ( '.slide' + oldink) .css ({left: '0px', width: '160px'}). animate ({left: '160px', width: '1px'}, 2000); break; } Oldink = ink ++; if (ink> 3) ink = 1;}, 2000+ _rand (1,3) * 1000);}; slider ();}); </ script> <div class = "slider"> <div class = "slide1"> <a target="_blank" href="http://webmastersam.ru/sozdat-hosting.html"> </a> </ div> <div class = "slide2"> < a target = "_ blank" href = "http://webmastersam.ru/skidka-na-kursy-popova.html"> </a> </ div> <div class = "slide3"> <a target = "_ blank "href =" http://webmastersam.ru/infobiznes.html "> </a> </ div> </ div>Замініть в html-коді URL-адреси посилань href = "..." на свої. Якщо банерів буде більше, то допишіть рядки по аналогії: <div class = "slide4"> ... </ div>, <div class = "slide5"> ... </ div> і т.д.
Що стосується скрипта: то, що потрібно змінити я розділив порожніми рядками, крім розмірів:
- Замініть всі розміри банера: 160px, 120px - на свої, в т.ч. з негативними значеннями.
- switch (_rand (1,5)) - тут цифра 5 - це кількість ефектів змінюваності, якщо ви їх зменшіть, наприклад до двох, то замініть 5 на 2.
- Кейси case 1: ... - case 5: ... - це самі ефекти змінюваності. Можете прибрати будь-які з них, але не забудьте про пункт 2.
- У першому рядку oldink = 3 ;, а в останній if (ink> 3) - цифра 3 - це кількість картинок. Збільште цифру відповідно, якщо банерів буде більше.
Непогані результати кликабельности показав ротатор з 8-ю банерами. Більша кількість, напевно, робити не має сенсу, навряд чи хтось буде сидіти і милуватися ними. Сенс в тому, щоб змінювані картинки потрапляли в фокус користувача, поки він переглядає корисну інформацію на сторінці.
Партнерські програми інтернет-магазинів
Що в ньому саме чудове?