В предыдущей статье я рассказывала, как добавить в Blogger бегущую строку и как ее настроить. Сегодня, как и обещала ранее, покажу, как вставить в бегущую строку нужную ссылку или картинку.
Начнем со ссылки. Для того чтобы добавить в бегущую строку ссылку, нужно всего лишь воспользоваться HTML-кодом:
<marquee> текст перед ссылкой <a href="http://ссылка/" title="Всплывающий текст при наведении курсора на ссылку">Отображаемый в бегущей строке текст ссылки</a></marquee>
Пример вставки ссылки:
Теперь поговорим о том, как вставить в "бегучку" любую картинку.
Можно взять статичную картинку, а я решила использовать анимационные - интереснее смотрится. ("Гифки" для примеров я брала на сайте http://www.juanna.ch/ Там много прикольных анимашек. Особенно для детских сайтов).
1. Загружаем картинку в сообщение блога (в любое, можно в черновик).
2. Нажимаем на загруженное изображение правой кнопкой мыши и копируем адрес ссылки на картинку.
Например, ссылка на картинку такси у меня получилась такая: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijkpMcRfuEO2yXW8LVRFf7Jel4uiBI_qcizmodzvs0p1a19d6qJh2G8gxzDOQKGPDQI2hF6F0iEMv51ajLXMGBaUd8BfjzkNjdEGsn9eBRQonEN0NgaFAKUhhTyC2yN8iSs9ku29VbHq0/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.
Начнем со ссылки. Для того чтобы добавить в бегущую строку ссылку, нужно всего лишь воспользоваться HTML-кодом:
<marquee> текст перед ссылкой <a href="http://ссылка/" title="Всплывающий текст при наведении курсора на ссылку">Отображаемый в бегущей строке текст ссылки</a></marquee>
Пример вставки ссылки:
Теперь поговорим о том, как вставить в "бегучку" любую картинку.
Можно взять статичную картинку, а я решила использовать анимационные - интереснее смотрится. ("Гифки" для примеров я брала на сайте http://www.juanna.ch/ Там много прикольных анимашек. Особенно для детских сайтов).
1. Загружаем картинку в сообщение блога (в любое, можно в черновик).
2. Нажимаем на загруженное изображение правой кнопкой мыши и копируем адрес ссылки на картинку.
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.
Немає коментарів:
Дописати коментар