Как красиво можно вставить картинки в тексте


Без картинок в блоге, ну ни как не обойтись. Как вставлять изображения в текст сообщения блога мы уже разобрались здесь. Ну и как оптимизировать картинки . Хочу сегодня предложить ещё 2 варианта , как красиво вставить картинки в текст сообщения. Это, больше, наверно подойдёт для блогов
, где предполагается вставлять не одну , а несколько картинок.
Вариант первый-как вставить две картинки между текстом сообщения. Выглядит это примерно так-смотрим ниже


Ух ты, а вот и наши любимые мультяшные герои появились.И мультик захотелось просмотреть заново.Правда.

Для этого нужно зайти в СООБЩЕНИЯ_СОЗДАТЬ НОВОЕ и в режиме HTML вставляем следующий код и пишем там же текст, который хотим видеть между картинками, ну и соответственно адрес картинки. Можно поменять высоту (height) и ширину (width) на своё.


<table align=center><tr><td><img src="URL АДРЕС КАРТИНКИ слева"></td><td>...ТЕКСТ между картинками ...</td><td><img src="URL АДРЕС КАРТИНКИ справа"></td></tr></table>

Небольшой совет , для совсем новичков . Попробуйте сначала поиграться с этим в режиме HTML, это даст небольшой опыт.  Если вы всё правильно сделали перейдите в создать и любуйтесь результатом.

А ниже код , как   вставить 2- 3 картинки подряд по горизонтали. Таким образом можно создать галерею изображений на странице.

<table border="0" cellpadding="0" cellspacing="8"><tbody>
<tr> <td><img src="URL адрес КАРТИНКИ" /> </td> <td><img src="URL адрес КАРТИНКИ" /> </td> <td><img src="URL адрес КАРТИНКИ" /> </td> </tr></table>


И смотрим, что мы в итоге получаем-


Чтобы картинки были одинакового размера нажимаем  левой кнопкой мыши по картинке и в синей полоске, которая появилась выбираем размер маленький. Или можно самим задавать нужный размер, как описано выше.

Ну, на сегодня достаточно. С кодами разобрались, мультиков насмотрелись. До встречи. Не забудьте добавить пост в закладки, чтобы потом не искать.
Удачи всем нам.


хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

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

  1. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
  2. Алла, попробуйте, это просто даже интересно поэкспериментировать.

    ОтветитьУдалить
  3. Здравствуйте Виктория, на этой странице http://www.dogrami-sofia.eu/p/opit_2.html я применила первый вариант и поставила бегущая строка. Появилась серая линия и не знаю как удалить ее. Помогите мне, пожалуйста.

    ОтветитьУдалить
    Ответы
    1. Пепа, бегущая строка тут не при чём. Это на мой взгляд разделительная линия между элементами., как везде . смотрите в стилях CSS line-height.
      мне кажется она вообще не мешает. Посмотрите у меня внизу тоже такие есть. между гаджетами и футером.

      Удалить
  4. Благодаря, Виктория. И аз така си мислех, че разделителната линия е заложена в шаблона. Благодаря още веднъж. Здраве и успехи желая.

    ОтветитьУдалить
    Ответы
    1. Пепа, Да. у Вас ведь тоже сторонний. Не переживайте, она абсолютно не мешает. Вам успехов.

      Удалить
  5. Вика, я никак не могу найти вашу статью как ставить маленькую картинку в самом начале поста... Видел где то ...:)

    ОтветитьУдалить
    Ответы
    1. Возможно вы имели эту как работать с изображениями http://www.shpargalochki.ru/2015/05/kak-rabotat-s-izobrazhenijami-bloga.html
      Первую, смотря как вы хотите её отобразить в углу, как у меня или по центру. Если как здесь в блоге просто загружаю и перетаскиваю мышью в нужное место. Но при таком раскладе не получиться воспользоваться рекомендациями как в статье написано. Она всё равно по центру будет. А остальные встанут нормально. Если по центру вверху хотите сделать то ровно так как в статье написано. Ссылку дала.

      Удалить
  6. Если вы вставили маленькую картинку уже после публикации поста она уже не отобразится в фиде. Как здесь http://wavesmarkets.blogspot.ru/2018/02/wti-crude-oil-forecast-on-february-14.html
    к тому же она у вас ещё не оптимизирована

    ОтветитьУдалить
  7. Вика
    2/16/2018 #к тому же она у вас ещё не оптимизирована# в каком смысле не оптимизирована ? Если вы имеете в виду титл и альт то эти картинки не важны для блога . Сама картинка собрана в редакторе HTML по вашим статьям ...:(

    ОтветитьУдалить
    Ответы
    1. Да именно это я и имела ввиду. Ну коль не нужна, дело личное. Вообще про одну и ту же картинку ли мы говорим.

      Удалить
  8. Вика
    2/17/2018 Привет :) Я толдычу про малюсенькие картинки WTI и BRENT... в самом верху

    ОтветитьУдалить
    Ответы
    1. Привет. Да и я про них.
      п.с. Почему то Ваш комментарий в спам изначально попал. Пути Гугла неисповедимы.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск