Советы, трюки и секреты для Blogger.com блоггеров. Все для Blogspot. Советы, трюки и секреты для Blogger.com блоггеров. Все для Blogspot.

Скрипт ротатор баннеров-баннерокрутилка

13 июля 2015, 05:10

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

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

КАК УСТАНОВИТЬ СКРИПТ СМЕНЫ БАННЕРОВ?

Установить баннерокрутилку в Blogger можно с помощью универсального гаджета HTML/JavaScript, вставив в него такой код:

<script type="text/javascript">
var mycrib = [];
mycrib[0] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>'
mycrib[1] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>'
mycrib[2] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>'
var x = 0;
function rotate(mycrib) {
while (x < mycrib.length) {
var sort = Math.floor(Math.random() * mycrib.length);
if (mycrib[sort] != 0) {
document.getElementById('adspace').innerHTML = (mycrib[sort]);
mycrib[sort] = 0;
x++;
}
}
}
</script>
<style>
#adspace {
}
#adspace img {
}
</style>
<div id="adspace">
<script type="text/javascript">
rotate(mycrib);
</script>
</div>

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

mycrib[3] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>'

Рассмотрим пример вы ведёте блог на тему промышленного оборудование, у вас есть партнёры и задача разместить пару позиций товара у себя на блоге например: Фильтр щелевой 16-80-1. Тогда код для данного товара  будет выглядеть следующим образом:

mycrib[3] = '<noindex><a href="http://sd-tehno.ru/filtr_schelevoi_g41" target="_blank" rel="nofollow"><img src="http://sd-tehno.ru/user/tovars/tovar523.jpg" alt="Фильтры щелевые 10(16,25,40,63)" width="240" height="400"></a></noindex>'

В скрипте так-же можно стилизовать отображение баннерного места, например установить заливку, сделать рамки для изображений. За стили отображения отвечает часть кода в тегах <style>, для корректных правок вам необходимо знать основы css.

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

 

Скрипт ротатор баннеров-баннерокрутилка