Как вставить в бегущую строку картинку или ссылку

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

Начнем со ссылки. Для того чтобы добавить в бегущую строку ссылку, нужно всего лишь воспользоваться HTML-кодом:

<marquee> текст перед ссылкой <a href="http://ссылка/" title="Всплывающий текст при наведении курсора на ссылку">Отображаемый в бегущей строке текст ссылки</a></marquee>

Пример вставки ссылки:

А Вы знаете, что для Blogger есть много бесплатных гаджетов?

Теперь поговорим о том, как вставить в "бегучку" любую картинку.

Можно взять статичную картинку, а я решила использовать анимационные - интереснее смотрится. ("Гифки" для примеров я брала на сайте http://www.juanna.ch/ Там много прикольных анимашек. Особенно для детских сайтов).

1. Загружаем картинку в сообщение блога (в любое, можно в черновик).

2. Нажимаем на загруженное изображение правой кнопкой мыши и копируем адрес ссылки на картинку.

  Например, ссылка на картинку такси у меня получилась такая: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7yPsOsq4IRvurZwXvUP4u0cMl4w7s9WM-F4QWxIK6Ad5yk-vspxGqs8T6vmgS7rsJV3Z7aQ0aoXWLBnn7USHq0xTzbn8ALHAK7ciUWQsTisRbBfyOe8f2z7a5RiDs8LkcaXgVteErovg/s1600/taxi.gif

3. Используем такой код:

<marquee><img title="Название картинки" src="http://адрес ссылки на картинку.gif"/>Текст Вашей бегущей строки</marquee>

Ну и покажу пример с "едущим" такси:
 Такси-такси, вези-вези...

4. Кстати, если текст бегущей строки переместить вперед, то и сама бегущая будет двигаться перед картинкой:
Бежим! Там распродажа! :)
Код будет следующим: 


<marquee>Текст Вашей бегущей строки<img title="Название картинки" src="http://адрес ссылки на картинку.gif"/></marquee>

5. Еще можно направить движение текста вправо. Об этом я также писала в предыдущей статье.  Для этого в код добавляем параметр direction="right"

Получится:
Ну что, полетели? 

HTML-код: 

<marquee direction="right"><img title="Название картинки" src="http://адрес ссылки на картинку"/>Ваш текст бегущей строки</marquee>

6. А еще мне захотелось запустить смайлик с воздушными шариками и с бегущей строкой вверх.

   Код брала этот: <marquee direction="up"><img title="Название картинки" src="http://адрес ссылки на картинку"/>Текст бегущей строки</marquee>

Всем привет!!!

! HTML-коды, которые есть в статье копируйте, затем вставляйте в блокнот или какой-нибудь редактор кода. И только потом добавляйте в пост блога (в режиме редактирования HTML) или в гаджет JavaScript/HTML.

P. S. Забыла сказать, что при вставке бегущей строки с картинками (или без них) в самом черновике и при предпросмотре статьи некоторые функции не работают. Их видно будет при публикации статьи или при вставке в гаджет JavaScript/HTML.