Как сделать блок рекламы с прилипанием

рекламный блок в сайдбаре

Сегодня попросили меня помочь с установкой рекламного блока с «прилипанием», т.е. такого, который при прокручивании страницы остается на своем месте на экране. Это очень удобно в том плане, что такой блок не раздражает пользователей, но в то же время не исчезает из поля зрения посетителей. Это позволяет увеличить число кликов по рекламному блоку.

Как это выглядит видно здесь: http://domreceptu.ru/profitroli-recept-s-foto. Смотрите на блок рекламы в правом сайдбаре. Собственно, эту ссылку мне и дали со словами «хочу так же, чтобы было на моем сайте».

На самом деле сделать подобный блок в сайдбаре сайте достаточно просто. Потребуется встроить на сайт два куска кода.

Так как у человека блог на Вордпрессе и он сам будет внедрять код, то инструкции должны быть предельно простые и четкие.

Итак, как сделать блок рекламы в сайдбаре блога на Вордпрессе нужно сделать следующее.

  1. В админке сайта переходим на блок виджетов. Перетаскиваем в сайдбар текстовый виджет («Текст»).

В блоке следует сделать такую запись:

<div id=»reklama»>

<!— тут должен быть ваш код рекламы —>

</div>

название id может быть любым. Между тегами <div id=»reklama»> и </div> вставляем код с вашей рекламой. Это может быть контекстная реклама, тизеры, баннер – разницы совершенно никакой нет.

Но сам по себе такой блок не будет «работать», хотя выводится будет.

  1. Теперь займемся реализацией «прилипания».

<script type=»text/javascript»>

function getTopOffset(e) {  

           var y = 0; 

           do { y += e.offsetTop; } while (e =

e.offsetParent); 

           return y;

}

var block = document.getElementById(‘ reklama’);

/* reklama — значение атрибута id блока */

if ( null != block ) { 

           var topPos = getTopOffset( block ); 

           window.onscroll = function() { 

                       var newcss = (topPos <

window.pageYOffset) ?  

                                    ‘top:20px;

position: fixed;’ : ‘position:static;’;

                        block.setAttribute( ‘style’,

newcss ); 

           }

}

</script>

Вот этот код необходимо добавить в файл footer.php Вордпресса. Это легко сделать с помощью вкладки «Редактор» в панели администратора блога.

Вышеуказанный код нужно вставить непосредственно перед закрывающим тегом </body> в файле footer.php.

Это все, можете наслаждаться работой «прилипающего» блока рекламы в сайдбаре вашего сайта.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *