Текст поверх изображения Blogger
Когда вы прокрутите веб-страницу и поместите курсор на изображение, вы увидите всплывающую подсказку с текстом, который был вставлен в тег заголовка, относящийся к рассматриваемому изображению.
Когда вы публикуете фотографию на веб-странице, рекомендуется также добавить теги title и alt. Тег alt является фундаментальным с точки зрения SEO, потому что он показывает так называемый альтернативный текст или скорее текст отображаемый в браузере, когда по какой-то причине последний не может загрузить изображение.
Вместо этого тег заголовка является одновременно именем и описанием изображения и важен, как и с точки зрения SEO для читателя, который просто перемещая мышь над изображением, может получить дополнительную информацию.
Пользователь Blogger может добавлять теги title и alt к изображению непосредственно из редактора. Нажмите на фото, чтобы выбрать его. Различные кнопки будут показаны чтобы выбрать его размер и выравнивание . Там также будет кнопка, чтобы добавить заголовок и описание.
При нажатии на Свойство откроется форма, в которой вы можете ввести содержимое текста заголовка и альтернативного текста. Вы можете добавить тот же контент или разнообразить. Переходя к HTML, можно будет убедиться, что два текста были вставлены в код в два тега с этим синтаксисом:
title = » Заголовок изображения » и alt = » Альтернативный текст изображения «
Подсказка к заголовку изображения, которая появляется при наведении курсора, довольно мала и эстетически не слишком хороша. В этом посте мы увидим, как настроить отображение тега заголовка изображения. Я буду ссылаться на Blogger, но код, который я опубликую, будет работать на всех платформах поддерживающих CSS.
Перейдите в режим HTML в редакторе и вставьте такой код
<style>.text-overlay { position: relative; width: 100%;}h4 { position: absolute; color: #eee; font: bold 26px Georgia; padding:10px; top: 100px; left: 10px; width: 100%;}</style><div align=»center«><div class=»text-overlay»> <img src=»http://lorempixel.com/600/400» alt=»testo alternativo» /> <h4>Una immagine casuale<br/>mostrata con Lorem Pixel</h4></div></div>
Результатом будет изображение с наложенным текстом, даже без наведения на него курсора. В результате будет отображаться изображение, подобное следующему.
В качестве URL изображения я использовал случайное изображение, полученное с помощью сервиса Lorem Pixel .
Настройки касаются текста отображаемого над фотографией, который был окрашен в синий цвет. Мы не должны забывать альтернативный текст, который в этом случае отличается от названия. Затем вы можете изменить код цвета текста, размер шрифта и семейство шрифтов.
Два главных тега: 100px; и слева: 10 пикселей; они используются для позиционирования текста в соответствии с расстоянием от верхней и левой сторон фотографии. Но при (необязательно) добавлении тега <div align = » center «> запись будет центрирована.
Пользователи Blogger смогут вставить код в тему, вставив выделенную зеленую часть прямо над тегом </head> . Таким образом, в сообщении им нужно будет только ввести выделенный желтый код. Очевидно, что вместо URL-адреса изображения, взятого из Lorem Pixel, необходимо вставить ссылку на изображение, которое могло быть ранее загружено в Blogger, в черновике.
