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

(Пост обновлён и дополнен.)
Про варианты бегущей строки немного упоминала в посте шпаргалка для начинающих.
Этот же интересен тем, что мы имеем вывод кликабельных ссылок на любые посты блога. Обратим внимание читателей на более популярные посты или последние публикации.
На блогах рукодельниц всегда разыгрываются всякие конфетки, призы. Почему бы не объявить об этом предстоящем конкурсе или победителе таким способом. Возможно, и в блогах педагогов это найдёт применение.
Код совершенно простой. Устанавливается через гаджет HTML/JavaScript. Каждый может подобрать нужный цвет фона, который больше подходит под дизайн конкретного блога. Перейдите, пожалуйста, по этой ссылке, чтобы посмотреть как это будет выглядеть. При наведении курсора на бегущее сообщение - ссылку движение прекращается.
Вот код, который нам понадобится.
Розовым цветом я выделила основной фон и цвет ссылки при наведении курсора.
Готовый код устанавливаем в гаджет HTML/JavaScript и перемещаем его над гаджетом сообщения.
Про варианты бегущей строки немного упоминала в посте шпаргалка для начинающих.
Этот же интересен тем, что мы имеем вывод кликабельных ссылок на любые посты блога. Обратим внимание читателей на более популярные посты или последние публикации.
На блогах рукодельниц всегда разыгрываются всякие конфетки, призы. Почему бы не объявить об этом предстоящем конкурсе или победителе таким способом. Возможно, и в блогах педагогов это найдёт применение.
Код совершенно простой. Устанавливается через гаджет 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>
#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 и перемещаем его над гаджетом сообщения.
Хочу отметить одну маленькую деталь. Не стоит писать очень длинные объявления или устанавливать много ссылок на посты. Строка будет работать некорректно. На случай если вам этот вариант не подходит, рекомендую статью по теме- красивый блок для оформления объявления.
Благодарна всем кто читает мои шпаргалки. А у меня всё на сегодня. Хороших вам денёчков. Удачи.
спасибо большое! очень понравилось!!!
ОтветитьУдалитьДа, Ирина. Очень интересно смотрится, правда.
УдалитьСПС как раз то что искал! с питонами и php вообще забыл про этот тег
ОтветитьУдалитьПользуйтесь.
УдалитьВика, спасибо. Очередная интересная "фишка". Красиво смотрится:)))))
ОтветитьУдалитьЛариса, это ещё и функционально. И обращает на себя внимание. Поиграться с цветом и под любой дизайн подогнать можно. Спасибо и Вам.
УдалитьС цветом всё получилось, а вот шрифт увеличить не удалось и стала полоса над шапкой блога, а не над сообщениями.
УдалитьВ коде задано расположение position:fixed;куда не вставь код она будет в самом верхк. Поэтому и называется фиксированная. Остаётся на месте при прокрутке страницы. Меняйте все значения размера букв, допустим на 22 в трёх местах(font:16px - font-size:12px;-font:16px) смотрите по ссылке на тестовом блоге
ОтветитьУдалитьВсё ясно. Спасибо:))))
Удалить