Бегущая строка с активными ссылками.

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

фиксированный блок объявлений


(Пост обновлён и дополнен.)

Про варианты бегущей строки немного упоминала в посте шпаргалка для начинающих.


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

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

Вот код, который нам понадобится.

<style>
#wcnot-cont
{
top:0px;
left:0px;
z-index:9999999;
position:fixed;
width:100%;
background:#7F4646 ;
color:#ffffff;
font:16px 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:8px;
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:#D3D8B6 ;
text-decoration:none;
}
</style>
<div id='wcnot-cont'>
<div id="wc-movtext">
<marquee behavior='alternate' direction="left"
onmouseover="this.stop();"
onmouseout="this.start();">
<p>
<a href=" здесь адрес страницы на которую ссылаемся" target="_blank"><b>текст бегущей строкой</b></a>
| <a href="здесь адрес страницы на которую ссылаемся " target="_blank"><b>ваш текст</b></a>
</p>
</marquee>
</div>
<div></div></div>

Розовым цветом я выделила основной фон и цвет ссылки при наведении курсора.
Готовый код устанавливаем в гаджет HTML/JavaScript и перемещаем его над гаджетом сообщения.


Хочу отметить одну маленькую деталь. Не стоит писать очень длинные объявления или устанавливать много ссылок на посты. Строка будет работать некорректно. На случай если вам этот вариант не подходит, рекомендую статью по теме- красивый блок для оформления объявления.

Благодарна всем кто читает мои шпаргалки. А у меня всё на сегодня. Хороших вам  денёчков. Удачи.



9 комментариев:

  1. спасибо большое! очень понравилось!!!

    ОтветитьУдалить
    Ответы
    1. Да, Ирина. Очень интересно смотрится, правда.

      Удалить
  2. Анонимный4/07/2016

    СПС как раз то что искал! с питонами и php вообще забыл про этот тег

    ОтветитьУдалить
  3. Вика, спасибо. Очередная интересная "фишка". Красиво смотрится:)))))

    ОтветитьУдалить
    Ответы
    1. Лариса, это ещё и функционально. И обращает на себя внимание. Поиграться с цветом и под любой дизайн подогнать можно. Спасибо и Вам.

      Удалить
    2. С цветом всё получилось, а вот шрифт увеличить не удалось и стала полоса над шапкой блога, а не над сообщениями.

      Удалить
  4. В коде задано расположение position:fixed;куда не вставь код она будет в самом верхк. Поэтому и называется фиксированная. Остаётся на месте при прокрутке страницы. Меняйте все значения размера букв, допустим на 22 в трёх местах(font:16px - font-size:12px;-font:16px) смотрите по ссылке на тестовом блоге

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML