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

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



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


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

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


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

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


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

Введите Ваш email


4 комментария:

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

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

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

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

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

Пользовательский поиск