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

27.04.2014

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

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

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

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

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

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

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

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



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


  Например, ссылка на картинку такси у меня получилась такая: http://1.bp.blogspot.com/-O099Pm8rUYM/U1v-e5XlYDI/AAAAAAAADfo/tQMCaufgVfo/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.

9 комментариев:

  1. Дуже доступно викладений матеріал. Цікава інформація. Щиро вдячна Вам за таку роботу!!!

    ОтветитьУдалить
  2. Добрий вечір! Маю свої блоги для співпраці з учнями. Але хотілося б їх "оживити". Зокрема, заголовок, вставити цікаві інформери, кольорові біжучі строчки. Корисною для мене є інформація про бігучий малюнок!
    Ваш блог - супер! Дякую за кропітку роботу!!! Поступово перегляну усі рубрики.

    ОтветитьУдалить
  3. PS. Сьогодні вперше завітала на Ваш блог.

    ОтветитьУдалить
  4. Мария, с каждой новой открытой страницей я поражаюсь возможностям блога и вашему энтузиазму обо всем рассказать. Восторг!

    ОтветитьУдалить
  5. Добрый день. Как должно выглядеть "название картинки", в каком формате? Спасибо

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. "Название картинки" - это текст, который отображается при наведении курсора мыши на картинку (поэтому формат - обычный текст). Также может влиять на оптимизацию и затем отображение (и поиск) картинки в интернете.

      Удалить
  6. Дякую. Було багато спроб, доки вдалося!!!

    ОтветитьУдалить
  7. Классс!Мария,очень понравилось,спасибо большое.А вот мне очень хотелось бы сделать чтобы название блога бегущей строкой бежало.Вы не подскажете как мне это сделать.

    ОтветитьУдалить

Загляните и на другие страницы ^