Как установить несколько фото в ряд на Blogger

Иногда необходимо вставить несколько картинок рядом в статье. Я пыталась поставить их обычным добавлением фото через редактор, но фото у меня они начинали прыгать и плясать по всему полю статьи, получалось не очень красиво. А нужно всего лишь добавить код и фото выстроятся в ряд.

Вставляем картинки в ряд

Способ первый. Код для 4 картинок, поставленных в ряд. Картинки нужно брать небольшого размера, иначе они не уместятся на странице и вылезут на боковую панель. Вот так фотографии должны уложится в ряд, после применения кода.

Заходим в редактор в режиме хтмл, устанавливаем код и не выходя из этого режима добавляем фотографии.

Левой кнопкой мышки выделяем надпись КОД 1, и нажимаем на значок добавить картинку (изображение). Как только добавили первую картинку, сразу добавляете следующую, выделив мышкой КОД 2, затем 3...., 4.

Для каждого фото отмечаете галочки, как на скриншоте. Закончив добавлять картинки, можно перейти в режим Создать. Фотографии будут стоять ровно в ряд.
Код:

<table border="0"cellspacing="1"cellpadding="1" width="100%"><tr>
<td>КОД 1 </td><td>КОД 2 </td><td>КОД 3 </td><td>КОД 4</td> </tr></table>

Второй способ тоже довольно простой, для 3 фотографий в ряд. В режиме ХТМЛ добавить в нужное место код и перейти в Создать

На странице видим надписи СТОЛБЕЦ 1,2,3. Ставим мышку перед надписью и устанавливаем картинки как обычно. Выбирать размер картинки — маленький.

Дальше продолжаем так же — щёлкаем мышкой перед словом столбец 2 и устанавливаем следующую фотографию.
В конце работы просто удалите надписи из текста.

Код:

<table>
<tbody>
<tr>
<td>столбец 1</td>
<td>столбец2</td>
<td>столбец3</td>
</tr>
</tbody>
</table>

Если добавить несколько рядов с фотографиями, получится небольшая галерея.

Третий способ для совсем маленьких картинок. Я перекидываю их из папки на рабочем столе в редактор блога. 

В новом редакторе, на 2021 год, такой способ не работает.

Как только ряд заполняется, картинки переходят на 2 ряд.

Бегущая строка

По средствам таких же кодов и бегущей строки, можно сделать карусель фотографий.
Смотрится красиво, посетителям сайта понравится.
Так же покажу коды текстовых бегущих строк.

Простая текстовая бегущая строка:

Текст бегущей строки

<marquee>Текст бегущей строки</marquee>

Текст бегущий влево:

Текст бегущей строки

<marquee direction="right">Ваш текст бегущей строки</marquee>

Текст бегущий вверх:

Текст бегущей строки

 <marquee direction="up">Текст бегущей строки</marquee>

Текст бегущий строки вниз:

Текст бегущей строки

<marquee direction="down">Текст бегущей строки</marquee>

Изменить скорость бегущий строки очень просто, в код добавляем значение выделенное жёлтым, чем больше цифра, тем быстрее движется строка:

Текст бегущей строки

<marquee scrollamount="5">Текст бегущей строки</marquee>

Что бы строка приостанавливалась:

Текст бегущей строки останавливается

<marquee behavior="slide">Стоп, строка</marquee>

Поменять цвет бегущей строки:

  Цветная бегущая строка

<marquee style="color: #E0B0FF">Цветная бегущая строка</marquee>

Цвет можно менять на любой, воспользуйтесь таблицей цветов здесь.

Изменить шрифт строки добавив в код:  style="font-family: verdana"
 И его размер:  style="font-size: 2em"

А теперь сделаем цветной фон текстового бегущего сообщения:

Текст на цветном фоне

<marquee bgcolor="#8B00FF">Текст на цветном фоне</marquee>

 Можно поменять ширину и высоту фона:

Высота фона - height="35", естественно указывайте нужную вам цифру.
Ширина фона регулируется с помощью width="300", меняйте значения на ваши.

Подведём итог, собрать бегущую строку на ваш вкус можно добавляя к основному коду, те которые я отметила разными цветами. Повторю основной код: <marquee>вставлять дополнения сюда>Текст бегущей строки</marquee>

Вот мы плавно подошли к созданию бегущей строки из картинок.

Бегущая строка с картинкой.
 

<marquee direction="right"><img src="Ссылка на картинку" /></marquee>

Бегущая строка с несколькими картинками.

<marquee direction="right" scrollamount="10"><img src="Ссылка на картинку" /><img src="Ссылка на картинку 2" /><img src="Ссылка на картинку 3" /><img src="Ссылка на картинку 4" /><img src="Ссылка на картинку 5" /></marquee>

 

Если нужно добавить больше картинок, добавляем к коду <marquee direction="right" scrollamount="10" img src="ссылка на картинку 1"/><img src="ссылка на картинку 2" /><img src="ссылка на картинку 3"/><img src="ссылка на картинку 4"/><img src="ссылка на картинку 5"/></marquee> и так далее. 

Если картинок нужно меньше — удаляем выделенное красным. Скорость движения картинок меняем, изменив значение выделенное в коде синим на своё. Чем больше значение, тем быстрее движется картинка.