В продолжении прежнего поста про придание тексту разнообразного движения предлагаю несколько готовых виджетов бегущей строки.

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

Виджет бегущей строки отлично подойдет для размещения коротких уведомлений и новостей, а также об информировании читателей о различных интересных событиях в блоге.

Размещение виджета бегущей строки в блоге.

Достаточно скопировать код к выбранному примеру движущихся строк и интегрировать в блог посредством гаджета HTML/JavaScript либо с помощью вкладки "Изменить HTML" непосредственно в тело публикуемого сообщения.




Код виджета:

<table 2px="" background-color="#B5520B" border="2" bordercolor="#B5520B" cellspacing="1" height="25" solid;="" style="width: 500px;"><tbody>
<tr> <td background="" valign="bottom"><marquee direction="left" height="20" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="4" width="500"><center><span style="color: black; font-family: Georgia;">Ваш текст интересной новости либо занятного уведомления</span></center></marquee></td></tr>
</tbody></table>

Изменяемые данные:

• bordercolor="#B5520B" - цвет рамки;
• background-color="#B5520B" - цвет фона;
• height="25" ("20"), width="500" - размеры виджета;
• scrollamount="4" - скорость движения текста;
• style="color: black; - цвет текста;
• font-family: Georgia; - шрифт текста.

Код виджета:

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAf_K_Dmxc1rl80x1NTdD8_qe_3k1vJzuprAwVCSDgYFJddpK4cN7EIuQQ8MGdMaY89wv-dKVE9K9gThFdoQiJooHkH-XJ7Jdne0CCMtzwAu6LdBTkYiA-ZeRZtOhoFTWgEFCTPAOu2DNe/s1600/border.jpg" border="2" bordercolor="transparent" cellspacing="1" height="25" style="width: 500px;"><tbody>
<tr> <td background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgne-htskwceu-sYn3RzyMSpbW0Pz8GbpqQ9s1rBxSk8VxXmts8q5Vhr5lgwqoB1Wfkqpy1PZofr29y7jtnwl5vaPBZNeytaEZU8_NyX4hiLCu8Z-D8IpXalbqaeUoIXGlpOcKnTOr3KKCi/s1600/ground-%252820%2529.jpg" valign="bottom"><marquee direction="left" height="20" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="500"><center><span style="color: black; font-family: Georgia;">Ваш текст интересной новости либо занятного уведомления</span></center></marquee> </td></tr>
</tbody></table>

Изменяемые данные:

• background="http://4.bp.blogspot.com/-Hp1quPDJ9c8/ TmI8Wcvfj5I/AAAAAAAABqg/HAmqFW1j0Do/s1600/border.jpg" - окаймовка рамки выбранным изображением;
• background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgne-htskwceu-sYn3RzyMSpbW0Pz8GbpqQ9s1rBxSk8VxXmts8q5Vhr5lgwqoB1Wfkqpy1PZofr29y7jtnwl5vaPBZNeytaEZU8_NyX4hiLCu8Z-D8IpXalbqaeUoIXGlpOcKnTOr3KKCi/s1600/ground-%252820%2529.jpg" - фоновое изображение;
• height="25" ("20"), width="500" - размеры виджета;
• scrollamount="2" - скорость движения текста;
• style="color: black; - цвет текста;
• font-family: Georgia; - шрифт текста.

Код виджета:

<table border=1 bordercolor=#edb55e><tbody> 
<tr><td><marquee align="center" direction="up" scrollamount="1" bgcolor="#edb55e" width="230" height="122" style="color: #000000; font-size: 15pt">Подпись к статье:<br/>
<a href="Ссылка_на_интересную_статью_блога" title="Перейти к статье">Название статьи</a>
</marquee></td><td>
<img src="Ссылка_на_картинку" />
</td></tr></tbody></table>

У меня к любым изображениям и таблицам в блоге определены стили, поэтому из-за картинки отступы получились размазаны, но, тем не менее, в целом, пример должен выглядеть достаточно симпатично.

Изменяемые данные:

• bordercolor=#edb55e - цвет рамки;
• scrollamount="1" - скорость движения текста;
• font-size: 15pt - размер шрифта;
• width="230" height="122" - размеры виджета;
• style="color: #000000; - цвет текста.

Подробнее о многих определениях бегущей строки и теге "marquee" вы можете прочитать в предыдущей статье. Для подбора цвета используйте онлайн-генератор веб-цветов.