Главная » Изображения » Как установить несколько фото в ряд на Blogger
Как установить несколько фото в ряд на Blogger
Вставляем картинки в ряд
Способ первый. Код для 4 картинок, поставленных в ряд. Картинки нужно брать небольшого размера, иначе они не уместятся на странице и вылезут на боковую панель. Вот так фотографии должны уложится в ряд, после применения кода.Заходим в редактор в режиме хтмл, устанавливаем код и не выходя из этого режима добавляем фотографии.
Левой кнопкой мышки выделяем надпись КОД 1, и нажимаем на значок добавить картинку (изображение). Как только добавили первую картинку, сразу добавляете следующую, выделив мышкой КОД 2, затем 3...., 4.
Для каждого фото отмечаете галочки, как на скриншоте. Закончив добавлять картинки, можно перейти в режим Создать. Фотографии будут стоять ровно в ряд.
Код:
<table border="0"cellspacing="1"cellpadding="1" width="100%"><tr>Второй способ тоже довольно простой, для 3 фотографий в ряд. В режиме ХТМЛ добавить в нужное место код и перейти в Создать
<td>КОД 1 </td><td>КОД 2 </td><td>КОД 3 </td><td>КОД 4</td> </tr></table>
На странице видим надписи СТОЛБЕЦ 1,2,3. Ставим мышку перед надписью и устанавливаем картинки как обычно. Выбирать размер картинки — маленький.
Дальше продолжаем так же — щёлкаем мышкой перед словом столбец 2 и устанавливаем следующую фотографию.
В конце работы просто удалите надписи из текста.
Код:
<table>Если добавить несколько рядов с фотографиями, получится небольшая галерея.
<tbody>
<tr>
<td>столбец 1</td>
<td>столбец2</td>
<td>столбец3</td>
</tr>
</tbody>
</table>
В новом редакторе, на 2021 год, такой способ не работает.
Как только ряд заполняется, картинки переходят на 2 ряд.
Смотрится красиво, посетителям сайта понравится.
Так же покажу коды текстовых бегущих строк.
Простая текстовая бегущая строка:
Изменить шрифт строки добавив в код: style="font-family: verdana"
И его размер: style="font-size: 2em"
А теперь сделаем цветной фон текстового бегущего сообщения:
Высота фона - height="35", естественно указывайте нужную вам цифру.
Ширина фона регулируется с помощью width="300", меняйте значения на ваши.
Подведём итог, собрать бегущую строку на ваш вкус можно добавляя к основному коду, те которые я отметила разными цветами. Повторю основной код: <marquee>вставлять дополнения сюда>Текст бегущей строки</marquee>
Вот мы плавно подошли к созданию бегущей строки из картинок.
Бегущая строка с картинкой.
Бегущая строка
По средствам таких же кодов и бегущей строки, можно сделать карусель фотографий.Смотрится красиво, посетителям сайта понравится.
Так же покажу коды текстовых бегущих строк.
Простая текстовая бегущая строка:
<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> и так далее.
Если картинок нужно меньше — удаляем выделенное красным. Скорость движения картинок меняем, изменив значение выделенное в коде синим на своё. Чем больше значение, тем быстрее движется картинка.
Добрый вечер! А сколько картинок можно вставить в бегущую строку?
ОтветитьУдалитьДумаю сколько угодно. Я больше 7-8 не вставляла. Если больше вставить, думаю, читатель устанет смотреть на эту гигантскую змею.
УдалитьВчера сделала на тестовом блоге бегущую строку из 12 картинок. Посмотрите https://nprocto.blogspot.com/2019/10/blog-post.html
УдалитьСпасибо Вам, большое! Все ясно и понятно!!!
ОтветитьУдалитьОтличная страничка-шпаргалка. Спасибо!!!
ОтветитьУдалить