BloggaRolla
Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  суббота, сентября 03, 2011  

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

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

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

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

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


1 вариант:

Ваш текст интересной новости либо занятного уведомления

Код виджета:
<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; - шрифт текста.
2 вариант:

Ваш текст интересной новости либо занятного уведомления
 

Код виджета:
<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; - шрифт текста.
3 вариант:

Новая интересная статья в блоге BloggaRolla:
Похожие статьи от LinkWithin

Код виджета:
<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" вы можете прочитать в предыдущей статье. Для подбора цвета используйте онлайн-генератор веб-цветов.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.