Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Фиксиран панел в долния колонтитул на Blogger

панел в долния колонтитул на Blogger
Здравейте всички мои редовни читатели и гости. В малък панел, позициониран в дъното на блога, можете да благодарите на читателите за посещението или да дадете хипервръзки, съобщения, предупреждения, както и друга важна според вас информация.
  Във всички изброени възможности, панелът не изглежда натрапчив и лесно може да бъде затворен, ако някой има желание за това.
  Редактирането на кода е лесно. Можете да промените основния цвят на панела на желан от вас или да промените други негови стилове. Те са маркирани в кода с коментар.

  За да го видите, копирайте предложения по-долу код в неговата цялост и го инсталирайте в този редактор. Използвайте и този генератор на цветове.
  В моя пример има хипервръзка към главната ми страница.


<style>#sticky-footer {
 border-bottom: 1px solid #666666; /* цвят на рамката */
 background: #FEE680; /* цвят на основния фон */
 font-size: 16px; Tahoma /* размер и вид на шрифта */
 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(https://findicons.com/files/icons/1620/crystal_project/16/button_cancel.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="https://www.blogzablogove.com" target="_blank">Благодаря за посещението!!! Очаквам Ви пак!!!</a>
 <span id="close"></span>
</div>


➤Това, което е маркирано в червено е желаният от вас показващ се текст;

➤В синьо е хипервръзка към конкретна страница;

➤Инсталирайте кода в притурката HTML / JavaScript в долната част на блога.

  Такъв фиксиран панел в долния колонтитул на Blogger не е само един простичък трик. Освежава дизайна и може да задържи читателя в блога ви, както и да го насърчи да следва хипервръзките, публикувани в него.

  Вярвам, че и днес съм била полезна на някои от вас.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

BGtop


  Доскоро!

2 коментара:

  1. Много приятно стои в сайт. Някой път със сигурност ще го ползвам.

    +1, Благодаря Ви!

    ОтговорИзтриване
    Отговори
    1. Благодаря. Всъщност, ако подходите мъдро и красиво оформите панела, той ще привлича вниманието.

      Изтриване