Георгиевская ленточка

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

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.

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

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

    ОтветитьУдалить
  2. zabavno. spasibo bolisoe. probuiu primeniti k svoemu slogu

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

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

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

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

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