Бегущая строка в Blogger

 Это текстовая бегущая строка, а ниже вы видите бегущую строку из картинок.

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

Установка скриптов и стилей для бегущей строки

Во-первых, идем в Шаблон - Изменить HTML с помощью сочетания клавиш Ctrl+F находим код </head> и перед ним устанавливаем скрипты:
<script src="http://yandex.st/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script src="http://ledikovaleva.narod.ru/file/jquery.liMarquee.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function(){ $('.str').liMarquee(); }); </script> Во-вторых, установим стили для наших бегущих строк, которых вы после этих установок сможете добавлять бесконечное множество.

Для этого в шаблоне находим кусок кода ]]></b:skin> и перед ним добавляем стили: /*Бегущая строка --------------------------------------------------------------------*/ .str_wrap { overflow:hidden; //zoom:1; width:100%; font-size:12px; line-height:16px; position:relative; -moz-user-select: none; -khtml-user-select: none; user-select: none; background:#f6f6f6; white-space:nowrap; } .str_wrap.str_active { background:#f1f1f1; } .str_move { white-space:nowrap; position:absolute; top:0; left:0; cursor:move; } .str_move_clone { display:inline-block; //display:inline; //zoom:1; vertical-align:top; position:absolute; left:100%; top:0; } .str_vertical .str_move_clone { left:0; top:100%; } .str_down .str_move_clone { left:0; bottom:100%; } .str_vertical .str_move, .str_down .str_move { white-space:normal; width:100%; } .str_static .str_move, .no_drag .str_move, .noStop .str_move{ cursor:inherit; } .str_wrap img { max-width:none !important; } .str .str_item { font-size:0; line-height:0 } .str img { opacity:1 } .str img:hover { opacity:0.7; color: #fff !important; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }

Создание бегущей строки

Теперь осталось создать саму бегущую строку и установить её в тело сообщения в режиме HTML, либо в гаджет HTML/JavaScript, смотря где будет располагаться ваша бегущая строка.

Текстовая бегущая строка

В данном случае всё просто. Копируйте код и вписываете текст бегущей строки. Можете сделать её ссылкой.

<div class="str str_wrap"> &nbsp;Текст бегущей строки</div>

Бегущая строка изображений

Загружаете картинки в альбомы Picasa (как работать с изображениями мы уже разбирали, можете посмотреть здесь: Работа с изображеними в Blogger) и добавляете ссылки на них в код:

<div class="str str_wrap">
&nbsp;<a href="адрес_ссылки_1"><img src="URL_изображения_1" alt="" /></a><a href="адрес_ссылки_2"><img src="URL_изображения_2" alt="" /></a><a href="адрес_ссылки_3"><img src="URL_изображения_3" alt="" /></a><a href="адрес_ссылки_4"><img src="URL_изображения_4" alt="" /></a><a href="адрес_ссылки_5"><img src="URL_изображения_5" alt="" /></a>
</div>

Меняйте всё, что выделено жирным на ссылки. Так же, при желании, можно внести изменения. Например, сделать просто картинки без ссылок или поиграть со стилями. Тут уж, кому как нравится.

Вариант установки бегущей строки для чайника

Есть те, кто боится залезать в шаблон. Специально для них код, который можно вставить непосредственно в гаджет HTML/JavaScript, в нужное место, или в тело сообщения в режиме HTML:

<link href="http://ledikovaleva.narod.ru/file/liMarquee.css" rel="stylesheet"></link>
<script src="http://yandex.st/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script src="http://ledikovaleva.narod.ru/file/jquery.liMarquee.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
$('.str').liMarquee();
});
</script>
<style type="text/css">
.str .str_item {
font-size:0;
line-height:0
}
.str img {
opacity:1
}
.str img:hover {
opacity:0.7;
color: #fff !important;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<div class="str str_wrap">
&nbsp;<a href="адрес_ссылки_1"><img src="URL_изображения_1" alt="" /></a><a href="адрес_ссылки_2"><img src="URL_изображения_2" alt="" /></a><a href="адрес_ссылки_3"><img src="URL_изображения_3" alt="" /></a><a href="адрес_ссылки_4"><img src="URL_изображения_4" alt="" /></a><a href="адрес_ссылки_5"><img src="URL_изображения_5" alt="" /></a>
</div>

Не забудьте поменять все значения выделенные жирным шрифтом.