Плавающий раскрывающийся гаджет баннера



Установка в блог плавающего гаджета с раскрывающимся рекламным баннером


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

Положение гаджета на страницах блога настройте по своему, в каком месте он впишется в дизайн. В коде настройка вверху страницы справа. Гаджет устанавливаете в черновике blogger дизайн-добавить гаджет вставить скопированный ниже код. По моему удобно, и опять же экономит место. Сходите в тестовый блог и посмотрите пример вверху справа.

Пример гаджета

При тестировании в блогах родных шаблонов устанавливается легко, размер и цвет шрифта будут отображаться, как настроены в коде гаджета. В сторонних шаблонах нужно будет настроить высоту панели гаджета. Размер и цвет шрифта будут зависеть от настроек в сайдбаре шаблона. Но это на моих сторонних шаблонах, у Вас может быть по другому. 

Копируем код и устанавливаем в макет блога

<style text-type="CSS">
#banner{
position:fixed;
right:2px;
center:0px;
background-color:#006400;
border-radius:20px;
-moz-border-radius:20px;
border:1px solid #006400;
width:240px;
height:22px;
top:3%;
color:#ffffff;
font-size: ;
margin:0;
padding:0;
text-align:center;
cursor:pointer;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#banner:hover{
z-index:5;
height:500px;
</style>

<div id="banner">
<h3>
Заработай свои Первые деньги</h3>
<p>                                                                                                                           
<a href="http://www.wmmail.ru/index.php?ref=protasova23"><img src="http://www.wmmail.ru/banners/wmmail240x400x5.gif" alt="WMmail.ru - сервис почтовых рассылок" border="0" /></a>
<br/><center>Лучший старейший почтовик для заработка начинающим интернет пользователям</center></p>
</div>

Настройки: выделенное синим-справа (right), надо слева измените на left, top3%-ниже, выше на странице; лиловым-цвет фона панели, форма, размер и цвет границы панели; коричневым-радиус закругления углов; красным-ширина и высота панели; голубым-цвет и размер шрифта (в родных шаблонах можно не устанавливать размер шрифта);

Сиреневым-высота раскрывающейся панели; оранжевым-название заголовка; зеленым-адрес баннера; бардовым-текст под баннером (если нужно, или удалите эту часть с кода); 

Это все настройки. Будут вопросы, задавайте в комментариях или воспользуйтесь формой для связи. Если Вам понравилась информация, буду благодарна за плюсик в социальных сетях. А у меня на сегодня все. Всем пока и Всего доброго.


Почитайте интересные фишки для блога; Счетчик статистики посетителей блога в реальном времениПлавающий баннер, счетчик, изображения или текст в одном гаджете; Анимированный виджет счетчика статистики посещений блога; Как установить фиксированный рекламный баннер на странице блога;


Автор статьи ✎ Olga Protasova Выпуск ✹ 11/13/2014 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Оля, здорово и смотрится солидно! Обязательно возьму на заметку. Перспективный вариант для работы. Спасибо за подсказку))

    ОтветитьУдалить
  2. Да Ирина, гаджет вместительный. Вся нужная информация всегда на виду, а настроив под дизайн, еще и неплохо смотрится. Кстати можно и код подписки окна вставить и еще много всего, пусть перемещается по странице за посетителем.

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


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *