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

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

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

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


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

Код совершенно простой. Устанавливается через гаджет 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 и перемещаем его над гаджетом сообщения.

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

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