Прежде всего хочу заметить, что сообщение в Blogger - это полноценный HTML документ, т.е. на его оформление можно влиять как глобально, добавляя стили и блоки во все посты, внося изменения в код шаблона, так и локально - добавляя простыни кодов и внутренних стилей непосредственно в HTML отдельно взятого сообщения. И они будут работать, естественно если соблюдены правила их написания. Но увлекаться внутренними стилями не стоит.
1. HTML код простой ссылки имеет следующий вид:
<a href="http://какой-то веб-адрес" target="_blank" title="это ссылка">Видимый текст ссылки</a>
target="_blank" - добавляется чтобы ссылка открывалась в новой вкладке или новом окне (зависит от пользовательских настроек браузера)title="..." - это всплывающая подсказка (описание ссылки) при наведении.
В Blogger это все делается инструментами создания нового сообщения - выделяете нужный текст, и нажимаете на кнопку "Ссылка"
2. HTML код изображения (картинки). нужно для начала загрузить изображение на хостинг и получить на него ссылку, например на Picasa или Radikal.ru (подобных сервисов много), но я использую для этих целей черновую страницу (черновик) в блоге, не публикую, а просто подгружаю туда все нужные картинки.
Для примера возьмем вот такое изображение:сейчас это не ссылка, а просто картинка, которая имеет такой HTML код:
<img alt="Иконка" src="прямая ссылка на изображение" title="Иконка домашней страницы"/>
Тег alt нужен для альтернативного описания картинки, когда у пользователя отключен показ изображений в браузере, т.е. вместо стандартного "Изображение" будет показано ваше описание, в данном случаи - "Иконка"Также можно регулировать размер изображения на странице. Например: ваша картинка имеет размеры 200 X 200 пикселей, а вам нужно чтобы она отображалась как изображение с параметрами 64 Х 64 пикселей, для этого не обязательно уменьшать картинку в графическом редакторе - браузер сделает это за вас, нужно только задать свойства высоты - height и ширины - width для вашей картинки и тогда код будет таким:
<img alt="Иконка" height="64" src="прямая ссылка на изображение" title="Иконка домашней страницы" width="64" />
3. Как сделать изображение (картинку) ссылкой. У нас уже есть код ссылки и изображения, теперь их нужно объединить, покажу с ссылками - как есть, и выглядеть код будет так:
<a href="http://www.magentawave.com" target="_blank" title="Главная страница этого блога. Откроется в новой вкладке"><img alt="Иконка" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiW-DSuunLN0TF57T5X5rAnnr6PUSIJbNDdm6vsPs5EsGOkQEDK-OyD5RscooqnDPkzhFNp9iT0f26lWY94jUIlLYQtkdOROSkcsBbwGGRFagacYh1en-i5VEaimoV95kQ5LZlqezL9njU/s1600/folder_home_2637.png" width="64" /></a>
Итог такой:Таким образом можно делать простые кнопочки на свои социальные страницы или еще куда-нибудь. О том как сделать динамическую кнопку читайте в этой статье.
К изображениям, как и к ссылкам можно применять внутренние свойства CSS (стили), т.е. кроме общих стилей, можно задать отдельный, для конкретного изображения или ссылки. Делается это при помощи тега style, а записывается код так.
<a href="ссылка на нужную страницу" target="_blank" title="Главная страница этого блога. Откроется в новой вкладке"><img style="border: 5px solid #FFFFE0;" alt="Иконка" height="64" src="http://картинка.png" width="64" /></a>
И вот что получилось:Здесь я просто добавил для примера простой контур (рамку) через свойство border, указав его ширину и цвет.
Подробнее ознакомится со свойствами CSS можно на этой странице
4. Ссылка для отправки электронной почты делается просто - точно также как и обычная ссылка, но вместо адреса http://.... пишется mailto:адрес электронной почты куда будет отправлено письмо. При нажатии на такую ссылку у пользователя (посетителя) запускается почтовая программа установленная по умолчанию, а точнее форма для отправки нового сообщения на указанный в ссылке адрес. Также можно заранее задать тему сообщения, добавив после адреса и до закрывающих ковычек, ?subject= например: "Личный вопрос".
А код будет выглядеть так:
<a href="mailto:ваш адрес@gmail.com?subject= Личный вопрос">Видимый текст ссылки</a>
И к этой ссылке также можно добавить изображение и использовать его вместо простого текста (типа кнопочки). Пример есть в правой колонке этого блога, раздел : "Подпишись или напиши"Вот такие маленькие примудрости :)
Хмм, а зачем же так усложнять? Мне очень хочется освоить все эти премудрости, но в Blogger есть совершенно простейший способ сделать картинку ссылкой: Вставляете картинку в сообщение своим любимым способом, кликаете по ней и она покрывается голубой пеленой, в этот момент нажмите на предоставленный инструмент Ссылка, откроется окно, в котором нужно указать URL адресс, куда перенаправляете, поставить галочку, чтобы открылось в новой вкладке, жмите OK и готово. Альт и title прописать можно в свойствах (они справа когда изображение покрыто пеленой)
ОтветитьУдалитьВпрочем, боюсь, что мои советы здесь выглядят глупыми. Я не скрываю, что я чайник. Но мне нравится находить решение. Желательно самое простое.
Этот пост скорее не пособие "как добавить картинку в сообщение Blogger", а о том как выглядят эти самые картинки-ссылки в коде HTML вообще и показывает их структуру.
УдалитьВы конечно правы и что в WYSIWYG редакторе сообщения все просто, но даже в Blogger не всегда картинки добавляются именно в пост.
Прошу прощения за глупые комментарии
УдалитьДобрый день, большое спасибо за интересный блог, читаю всегда с удовольствием .. вопрос в следующем - подскажите, как вы сделали, что у вас сразу за всеми ссылками распологается маленькая кнопка в виде стрелочки ...
ОтветитьУдалитьНе за всеми, а только за теми, которые откроются в новой вкладке или окне.
Удалитьhttp://jsfiddle.net/229nv/
Вы самый крутой! Спасибо!!!! Только благодаря вам я смогла за пол часа сделать то, над чем билась 3 дня! Мою рекламку событий на Блогспот! БЛАГОДАРЮ! http://www.senseylab.ru/
ОтветитьУдалить