17 июл. 2014 г.

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

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

ЦветыЦветыЦветыЦветыЦветыЦветыЦветы

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

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

Во-первых, идем в Шаблон - Изменить HTML с помощью сочетания клавиш Ctrl+F находим код </head> и перед ним устанавливаем скрипты:
Во-вторых, установим стили для наших бегущих строк, которых вы после этих установок сможете добавлять бесконечное множество.

Для этого в шаблоне находим кусок кода ]]></b:skin> и перед ним добавляем стили:

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

Теперь осталось создать саму бегущую строку и установить её в тело сообщения в режиме 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>
Не забудьте поменять все значения выделенные жирным шрифтом.

14 комментариев

Мария Гаврилова

Светлана, здравстуйте. Я пыталась выполнить ваши указания, но что-то пошло не так. Теперь у меня на странице блога перед шапкой появляется часть кода: http://glazkino.blogspot.ru/. Как это убрать?

Светлана Ковалева Светлана Ковалева

Стили не туда куда надо установили, Мария. Скопируйте весь этот кусок кода, найдите с помощью сочетания клавиш Ctrl+F и удалите из Html шаблона.

После внимательно читайте сообщение и попробуйте снова сделать как описано в сообщении.

И мой вам совет, перед каждой манипуляцией делайте бэкап шаблона, на случай, если что-то пошло не так!

Coral Club

Спасибо за урок. Сегодня сделала... Разобралась достаточно быстро с бегущей строкой... http://super-cclub.blogspot.com/ Вот теперь хочу с изображениями сделать...

Shanan trade

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

Светлана Ковалева Светлана Ковалева

Shanan trade, background в стилях замените на нужный.

Shanan trade

Светлана спасибо, на пробу брал установку виджетом,там бекграунда не увидел....А после того как Вы написали глянгул установку через шаблон-а там все есть.Получилось без проблем))) Я вас еще помучаю попозже,многие старые блоггеры бросили отвечать на вопросы,а вы вот оперативненько общаетесь с читателями.Спасибо!!!

Светлана Ковалева Светлана Ковалева

Стараюсь общаться, бывает по разному. Пожалуйста!

Іванна Бойчук

Здравствуйте. У меня почему-то никак не получается установить срока с рисунками. Все делаю так как вы написали .. а картинки не открываются

Գոռ Վարդանյան

извените я Гор,у меня нечего не получается на блоге появляется картинка только с 5 фотографиями и ни каких бегущх строк с изображениями нету... как испрвить???

Светлана Ковалева Светлана Ковалева

Смотрите внимательно, видимо какой-то шаг пропустили.

Адмін Сайту

Что вставляем в "адрес_ссылки" в "URL_изображения"? Помогите "чайнику"!

Светлана Ковалева Светлана Ковалева

То что надо и вставляем, адрес ссылки и адрес (URL) изображения :)

AfAmeLLi

У менявотбегучая строка не двигаеться что делать?

Ярослав Мысив

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

Отправить комментарий