Плавающая панель с бегущими ссылками на важные сообщения блога



Как установить в блог плавающую панель с бегущими ссылками на новостные сообщения блога или партнерские программы


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

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

<style>
#wcnot-cont
{
top:0px;
left:0px;
z-index:9999999;
position:fixed;
height:45px;
width:100%;
background:#03b4cc;
color:#ffffff;
font:14px georgia;
box-shadow:2px 2px 5px  #444444;
-moz-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}

#wc-movtext
{
text-align:center;
padding:2px;
font-family:  Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #ffffff;
}

#wc-movtext a
{
color:#ffffff;
text-decoration:none;
font:16px georgia;
}
#wc-movtext a:hover
{
color:#871f78;
text-decoration:none;
}
</style>
<div id='wcnot-cont'>
<div id="wc-movtext">
<marquee scrollamount=2   behavior='alternate' direction="left"
            onmouseover="this.stop();"
            onmouseout="this.start();">

          <p>
<a href="http://ххх">название ссылки</a>

|        <a href="http://ххх">название ссылки</a>

|        <a href="http://ххх">название ссылки</a>

|        <a href="http://ххх">название ссылки</a>
|        <a href="http://ххх">название ссылки</a>
</p>
      </marquee>
</div>
<div></div></div>

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

Выделенные разделители (слева зеленым) можно удалить, но без них мне не понравилось. В коде положение панели сверху страницы. Если будет желание установить панель вниз страницы, измените top:0px; на bottom:0px;

Можно немного приукрасить панель. После цвета фона добавьте border:2px dotted #f00; В приведенном примере рамка точечная, Вы можете применить любую другую форму рамки. Читайте информацию о формах рамок в моем посте как выделить часть текста в рамку. Так же можно закруглить углы панели, добавьте border-radius: 50px; Посмотрите пример панели в тестовом блоге, установлена внизу страницы.


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



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


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

2 коммент. :

  1. Спасибо. Панель плавает, а ссылка не открывается. Почему? http://reshyzadachy.blogspot.ru/

    ОтветитьУдалить
  2. Здравствуйте Людмила, проверьте внимательно URL адрес. Особенно кавычки, перед "http:// и после html"

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


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

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

Имя

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

Сообщение *