фиксированная панель в верхней части блога для нужной информации (3 варианта)

Доброго времени суток,  друзья. Предложу вам 3 варианта оформления панелек, где вы сможете отобразить какие - то важные сообщения с кликабельными ссылками. 

Обновление поста В качестве примера я сделала переход на страницу содержание своего блога. У вас могут абсолютно другие варианты, куда вы захотите перенаправить читателя - на ваши паблики в социальных сетях, форму контактов, другие ваши блоги.  

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

Реализация достаточно простая. Нужно выбрать понравившейся вариант, скопировать код и установить его в разделе дизайн в гаджет HTML/JavaScript. И перетянуть в нужное место макета блога. Цвета самой панели меняйте на ваше усмотрение. 

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

Демонстрация

 Вариант 1. Простая панель с рамкой и кликабельной надписью. 

Код.

<style>#knig_bar {width: auto; height: auto; display: block; text-align: center; padding: 7.5px; background: none repeat scroll 0 0 #004D40;

  border: 4px double black; 

    background: #fc3; 

    padding: 10px; 

   } color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}

#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}

#knigulper_bar a:hover{background:#3e454c;color:#fff;}

</style>

<div id='knig_bar'>

Все статьи блога для вас <a href='http://www.shpargalochki.ru/p/blog-page_1.html' target='_blank'>Перейти!</a>

</div>

Вариант 2. Тёмная панель уже с другой рамкой , где ссылка оформлена в виде кнопки.

Код.

<style>#knigulper_bar {width: auto; height: auto; display: block; text-align: center; padding: 6.5px; background: #3e454c;border: 3px solid #ff6347 ;
    border-radius: 10px; color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;}</style>
<div id='knigulper_bar'>
Все статьи блога для вас<a href='http://www.shpargalochki.ru/p/blog-page_1.html' target='_blank'>Перейти!</a>
</div>

Вариант 3. Панель с бегущей строкой.

Задали немного динамики  с помощью тега marquee и получили такую динамичную бегущую строку. Еще в этом варианте, кроме основной ссылки, добавлена ссылка на последнюю статью блога. Но это можно легко убрать, если посчитаете нужным.

С помощью свойства box-shadow зададим красивые границы с тенью.

Код.

<style>#bloggernotificationWrap{display:none;position:relative;z-index:999999;width:100%;height:41px;margin:0px 0px -41px 0px;padding:0}

#bloggernotification{overflow:hidden; width:100%;height:28px;padding-top:7px;text-align:center; background:#37474F;position:relative;box-shadow:1px 2px 9px #2A5200;z-index:9998;text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400;text-shadow:1px 1px 4px #000;border-bottom:1px solid #90f128;margin:0}
#bloggernotification strong {font-size:14px;font-family:oswald; font-weight:normal;padding-right:7px;}
#bloggernotification a{text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400; word-spacing:1px; text-shadow:1px 1px 1px #000;outline:none}
#bloggernotification a:hover{text-decoration:underline}
#openbloggernotification{display:block;position:absolute;top:-6px;right:15px;background:#2E2F2E;border-left:2px solid #90f128;border-right:2px solid #90f128;border-bottom:2px solid #90f128;cursor:pointer;z-index:1;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:1px 2px 9px #90f128;padding:0 7px}
#send{background:#6f9ff1;color:#fff;cursor:pointer;border-radius:4px;box-shadow:5px 5px 5px #ccc;border:1px solid #79a7f1;padding:6px 10px!important}
#send:hover{background:#79a7f1}
#send a{color:#fff;text-shadow:1px 1px 2px #333}
#send a:hover{text-decoration:none}</style>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
<div style='width: 997px;margin: 0px auto;'>
<div style='-moz-background-inline-policy: continuous; background: none repeat scroll right top;font-size:14px;font-weight: normal;font-family: &apos;Oswald&apos;, sans-serif;'>
  <marquee behavior='alternate' onmouseout='this.start();' onmouseover='this.stop();' scrollamount='2'><a href='http://www.shpargalochki.ru/2018/04/dizajn-gadzheta-okno-poiska-blogger.html'><font color='yellow' size='3'>НОВОЕ</font> ДИЗАЙН ОКНА ПОИСКА</a>  <a href='http://www.shpargalochki.ru/p/blog-page_1.html'><font color='yellow' size='3'></font> Все статьи блога</a></marquee>
 </div>
</div></div></div>

В строках, отмеченных розовым цветом пишите адреса страниц, на которые ведёт ссылка. Пояснительный текст, соответственно, измените на ваш вариант.
Как видим, всё просто. Если есть задумка, попробуйте поиграться со стилями CSS. Если пока сложно, берите готовые коды.

Приветственный бар в верхней части блога
Фиксированная панель в нижней части блога.

Спасибо всем за внимание и до встречи.

 

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

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