Плавающий баннер, счетчик, изображения или текст в одном гаджете



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


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

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

К сожалению не все шаблоны blogger поддерживают этот код. У меня при тестировании гаджет не сработал в шаблоне "Корпорация Чудеса", а также в не стандартных шаблонах, кнопка не открывается.

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

Посмотреть пример гаджета

<style> img,a { border: 0;  } #on { visibility: visible;} #off { visibility: hidden;}  #box2_div { width: 250px; height: 353px; overflow: hidden;} #box2_right { z-index: 10004; border: 2px solid #1a8fce; background-color: #F2F2F2; width: 240px; height: 350px; position: fixed; right: -239px;} #box2_right_img { position: absolute; top: -2px; left: -42px; border: 1;}#feedburner_right { z-index: 10003; position: fixed; right: -303px;} #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0;}   #box2_left { z-index: 10004;  position: fixed; left: -250px;} #box2_left_img { position: absolute; top: -2px; right: -35px; border: 0;}  #feedburner_left { z-index: 10003;  position: fixed; left: -303px;} #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0;}  .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0;} .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px;}  </style><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#box1_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 5}, 500); },function(){ jQuery("#box1_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#box2_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 5}, 500); },function(){ jQuery("#box2_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script>
<div id="on">
<div id="box2_right" style="top: 20%;">
<div id="box2_div">
<img src="http://1.bp.blogspot.com/-uqmrYoGS5Xk/VF5ho5DWiSI/AAAAAAAAGAY/XtBqcoJplQw/s1600/46119202251_75427.png%2B123.png" id="box2_right_img" />
<br />
  Ваши ссылки, изображения или текст
</div>
</div></div>



Теперь немного о настройках: выделенное синим-цвет фона, размер и форма границы выдвигающейся панели; width: 240px; height: 350px ширина и высота рамки; position: absolute; top: -2px; left: -42px;-положение рамки с картинками или баннером верх-низ и прилипание кнопки к рамке; красным-положение кнопки верх-низ; коричневым-сюда вставляете коды баннера, счетчика. картинки; сиреневым-адрес кнопки.


Кнопку Вы можете изменить на свою. Выбрать и настроить не плохие кнопки можно на этом сайте

На этом у меня всё. Комментируйте, задавайте вопросы, поделитесь со своими друзьями и знакомыми в социальных сетях. Всем пока и до новых встреч.






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


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

7 коммент. :

  1. Ответы
    1. Пожалуйста, пробовать надо. Гаджет удобен в использовании и размещении информации.

      Удалить
  2. Привет,Ольга. Нравятся мне все эти "выскочки" И оригинально смотрятся и место экономят. Надо будет подумать, куда и что приткнуть. Здорово.

    ОтветитьУдалить
  3. Оль, пишу опять. Что-то мои комментарии никак не отображаются. Стильная вещичка. Так люблю эти боковые панельки. Как-нибудь надо попробовать и что можно установить в него.

    ОтветитьУдалить
    Ответы
    1. Вика привет. Я не поняла, где не отображаются комментарии? Ты вставляла в эту выдвигающуюся панель?

      Удалить
  4. Оля, сейчас нормально с комментариями. Комменты конечно писала сюда.Просто не первый раз уже сбрасывает. А завтра протестирую твой код на своём новом шаблоне и попробую на одном из родных. Отпишусь.

    ОтветитьУдалить
    Ответы
    1. Вика, у меня на сторонних шаблонах не открывается кнопка, пробуй на своем. А в родных работает, кроме Корпорация Чудеса. Хотя может только у меня. Последнее время в браузере Хром не открываются многие сайты и в редакторе сообщений часто даже не могу вставить скопированный код, как заглушка какая то, даже не открывается окно Вставить. Перехожу в Мазилу, работаю там.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

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

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

Имя

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

Сообщение *