Всплывающий баннер поверх страницы




Всплывающий баннер поверх страницы с автоматическим закрытием через определённый промежуток времени.На данный момент многие рекламные сети используют такой формат трансляции рекламных объявлений на сайтах.Установка кода баннера поверх основного тела страницы незамысловата и ничем не отличается от других стандартных манипуляций при редактировании блога.



Установка баннера поверх страницы.


Прежде чем установить данный скрипт на своём блоге следует убедиться,что у Вас подключен код подключения библиотеки ajax . Как проверить и установить код jquery можно  посмотреть в следующей статье.  Проверив или установив jquery подключение приступаем непосредственно к работе с самим скриптом вывода баннера.Для начала добавим немного стиля нашему блоку.Для этого добавим css-код отвечающий за настройки блока.Код устанавливаем в шаблон нашего блога.
<style type="text/css">
.box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -225px;
margin-left: -325px;
width: 650px; /* ширина блока  */
height: 300px; /* высота блока */
background: #E4E4E4;    /* фон блока  */
border: 3px solid #fff;  
padding-top: 5px;
color: #000; /* цвет текста  */
font: 12px Arial; /* размер шрифта  */
text-align: center;
border-radius: 10px;
box-shadow: 0 0 3px 1px #666;
}
#timer {
font: 14px Tahoma;
}
</style>

Далее устанавливаем код вызова баннера и сам блок в котором будет размещена полезная информация или рекламные баннеры. Если планируется показ баннеров на всех страницах,то данный код устанавливаем в гаджет НТМЛ. При показе на отдельно взятых страницах данный код устанавливаем непосредственно в тело страницы.
<script type="text/javascript">
setTimeout(function(){$('.box').fadeOut('fast')},30000); //30000 = 30 секунд
</script>
<script type="text/javascript">
function timery(){
var obj=document.getElementById('timer');
obj.innerHTML--;
if(obj.innerHTML==0){setTimeout(function(){},1000);}
else{setTimeout(timery,1000);}
}
setTimeout(timery,1000);
</script>
<div class="box">
<hr/>подождите<div id="timer">
30</div>


Настройки блока показа баннера.


Настройки ширины,высоты,фона блока внесены в код css и при желании можно изменить и подогнать под свой дизайн воспользовавшись  таблицей цвета для веб-страниц. и онлайн редактором для  настройки различных скриптов и кодов.

Оформление текста,цитат,блоков
Тизерная реклама отзывы
Деньги легко уже сегодня
Для тех кому отказал Яндекс-директ
Партнёрка с оплатой за показы.








    Contema


    подождите
    30



    2 комментария:

    1. Замечательная штука,но меня интересует как сделать блок для выделения кода.Объясните пожалуйста.

      ОтветитьУдалить
    2. Вика перейдите по ссылке Оформление текста,цитат,блоков и там всё подробно описано.

      ОтветитьУдалить