Плавающий рекламный баннер слева или справа блога

Доброго времени суток, уважаемые читатели блога! Сегодня я покажу вам небольшой трюк, как разместить фиксированный рекламный баннер справа или слева страницы блога Blogger. То есть, не на самой странице сайта, а за её пределами. Хотя не обязательно рекламу размещать, можно и обыкновенную красивую картинку вывести за пределы страниц блога.

Кто заинтересовался этим трюком, прошу следовать моей простой инструкции.

Как разместить плавающий,фиксированный рекламный баннер (изображение) справа или слева страницы сайта/блога

Фиксированный баннер слева страницы блога

Рассмотрим два способа установки рекламного баннер (на блоге, смотрите скриншот, установлен первым способом). Первый самый простой: заходим - Дизайн - Добавить гаджет HTML/JavaScript и в его поле вставляем код:

<style type="text/css">
#fixedbanner {
position: fixed;
top: 160px; /* Jarak dari atas */
right: 0; /* Apabila ingin di kanan ganti right menjadi left */
}
</style>
<div id='fixedbanner'>
<a href='URL рекламодателя' title='название'><img alt='fixedbanner' src='URL баннера'/></a>
</div>

Второй способ чуть посложней, вставка кода в сам шаблон. Идём Шаблон - Изменить HTML - находим тег ]]></b:skin> и выше вставляем код стиля:

#fixedbanner {
position: fixed;
top: 160px; /* Jarak dari atas */
right: 0; /* Apabila ingin di kanan ganti right menjadi left */
}

Затем находим тег </body> и выше вставляем этот код:

<div id='fixedbanner'>
<a href='URL рекламодателя' title='название'><img alt='fixedbanner' src='URL баннера'/></a>
</div>

Сохраняем шаблон. Расположение баннера меняем: top: 160px; - расстояние от верхней границы блога, right: - справа, меняем на left - слева.

Теперь, если хотите что бы посетители могли закрыть баннер, добавим такой значок - Закрыть (X). Надо добавить перед строчкой <div id='fixedbanner'> этот код:

<a href='#' onclick='var el=document.getElementById(&apos;fixedbanner&apos;);el.parentNode.removeChild(el);' style='right: 5px;position: absolute;top: 5px;z-index: 99;'><img alt='' src='http://3.bp.blogspot.com/-VkGc1slnj74/UOb46pZPv3I/AAAAAAAADqc/40iIDnF32Nw/s1600/delete2.png'/></a>

В итоге должно получиться вот так:

<div id='fixedbanner'>
<ahref='#'onclick='varel=document.getElementById(&apos;fixedbanner&apos;);el.parentNode.removeChild(el);' style='right: 5px;position: absolute;top: 5px;z-index: 99;'><img alt='' src='http://3.bp.blogspot.com/-VkGc1slnj74/UOb46pZPv3I/AAAAAAAADqc/40iIDnF32Nw/s1600/delete2.png'/></a>
<a href='URL рекламодателя' title='название'><img alt='fixedbanner' src='URL баннера'/></a>
</div>

Вот и всё дорогие друзья. Очень надеюсь кому нибудь будет полезен этот трюк. Всего доброго. До новых встреч.

С уважением, Сергей