10/14/2015

Создание, установка на сайт баннера с отзывчивым дизайном.

Подойдет для любой платформы не только для Blogger - Blogspot. Создание и установка на сайт - блог всплывающего баннера с отзывчивым дизайном.

Привет ребята, сегодняшняя тема, как вы уже поняли посвящена в некоторой степени монетизации сайта. Правда этот материал касается подготовки к ней. По лычному опыту могу сказать, что порой требуется создать собственный рекламный баннер для сайта - блога. Конечно в сети есть много сервисов позволяющие это сделать, но во-первых долго разбираться, что к чему, во-вторых могут запросить регистрацию на сайте для получения самого баннера и в третьих такие сервисы могут влепить в ваш баннер ссылку на свой сайт. Хотя один плюс в них все таки есть, если вы не дружите с графическими редакторами там вы сможете легко настроить фоновую картинку баннера. С нашим баннером таких проблем не возникнет. Зная, что самым популярным форматом является 728 * 90 пикселей выбрали именно его. Но его можно легко изменить задав нужные параметры ширины и высоты. Вот результат.

Преимущества баннера:
- Отзывчивый дизайн - хорошо для пользователей мобильных устройств.
- Есть кнопка "Закрыть - Close", пользователь в любой момент может скрыть его.
- Плавающий дизайн - постоянно на виду, то есть при прокрутке страницы не прячется, повышая таким образом процент пробива.

Для установки нужно перейти в раздел Шаблон - Изменить HTML находите код </body> и перед ним вставляете следующий код:

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='#' title='Купить кота'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Купить кота' src='http://3.bp.blogspot.com/-9h86Fhn6zZU/VhtxRDTM4qI/AAAAAAAADK0/fQN3Z00kWwk/s1600/arlina-tea.png'/></a>
</div>
</div>

Параметры выделенные желтым выставляете по собственному желанию:
max-width - ширина баннера;
href= '#' - вставляете ссылку на рекламированный сайт
img style - 'max-width:100%; height:auto;' - задаете ширину и высоту

Сохраняете шаблон и проверяете результат.

Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Создание, установка на сайт баннера с отзывчивым дизайном.
4/ 5
Oleh