Закрывающийся липкий футер для Blogger

Всем, привет. В небольшой панельке в нижней части блога можно поблагодарить читателей за визит или дать ещё какие - то важные ссылки, объявления, предупреждения и т. д. В любом случае она совсем не навязчива и при желании легко можно закрыть.

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

<style>#sticky-footer {
 border-bottom: 1px solid #666666; /* цвет основного фона*/
 background: #CCC; /* цвет основного фона*/
 font-size: 16px; /* размер шрифта*/
 color: #666666; /* цвет шрифта*/
 padding: 10px 20px;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 2000;
 width: 100%;
 text-align: center;
 }
#sticky-footer a {
 font: normal 18px Trebuchet MS;
 text-decoration: none;
 }
#close {
 width: 20px;
 height: 20px;
 background: url(http://mossklad.ru/images/callback_close.png) top no-repeat;
 border: none;
 margin: 3px 0 0 15px;
 position: absolute;
 cursor: pointer;
 }</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 (function() {
 //settings
 var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
 var sibar = function() { $('#sticky-footer').fadeTo(fadeSpeed,1); }, stbar = function() { $('#sticky-footer').fadeTo(fadeSpeed,fadeTo); };
 var inside = false;
 //do
 $(window).scroll(function() {
  position = $(window).scrollTop();
  if(position > topDistance && !inside) {
   //add mouseover events
   stbar();
   $('#sticky-footer').bind('mouseenter',sibar);
   $('#sticky-footer').bind('mouseleave',stbar);
   inside = true;
  }
 });
 //close
 $('#close').live('click', function(event) {
  $('#sticky-footer').toggle('show');
 });
 })();
});
</script>

<div id="sticky-footer">
 <a href="http://www.shpargalochki.ru" target="_blank">Спасибо за ваш визит!!! Заходите ещё!!!</a>
 <span id="close"></span>
</div>

То что отмечено розовым цветом в коде HTML, это будет нужный отображаемый текст и ссылка на конкретную  страницу(если требуется). Уберите атрибут  target="_blank если хотите, чтобы ссылка открылась в этом же окне.

Устанавливайте код в гаджет HTML/JavaScript в нижней части блога. Такой липкий футер не только простая фишка. Он вполне может задержать читателя на блоге и побудит перейти по ссылкам, размещённым в нём.

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

Всем добра и до встречи. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :