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

Подойдет для любой платформы не только для 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;' - задаете ширину и высоту

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


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Создание, установка на сайт баннера с отзывчивым дизайном.
Создание, установка на сайт баннера с отзывчивым дизайном.
Создание и установка на сайт - блог всплывающего баннера с отзывчивым дизайном.
http://2.bp.blogspot.com/-Drfl9gzvxCA/Vh4RKFhaj5I/AAAAAAAAh5k/Ra79wqVAeN4/s640/%25D1%2581%25D0%25BE%25D0%25B7%25D0%25B4%25D0%25B0%25D0%25BD%25D0%25B8%25D0%25B5-%25D0%25B1%25D0%25B0%25D0%25BD%25D0%25BD%25D0%25B5%25D1%2580%25D0%25B0-%25D0%25B4%25D0%25BB%25D1%258F-%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B0.jpg
http://2.bp.blogspot.com/-Drfl9gzvxCA/Vh4RKFhaj5I/AAAAAAAAh5k/Ra79wqVAeN4/s72-c/%25D1%2581%25D0%25BE%25D0%25B7%25D0%25B4%25D0%25B0%25D0%25BD%25D0%25B8%25D0%25B5-%25D0%25B1%25D0%25B0%25D0%25BD%25D0%25BD%25D0%25B5%25D1%2580%25D0%25B0-%25D0%25B4%25D0%25BB%25D1%258F-%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B0.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/10/sozdanie-i-ustanovka-na-sajt-bannera.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/10/sozdanie-i-ustanovka-na-sajt-bannera.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy