вторник, 13 декабря 2016 г.

Blogger Как вставить картинку на блог



Картинки, фото одно из самых востребованных зрелищ и на земле, и в интернете. Сколько создано восхитительных галерей! Вставить картинку на блог обязательно захочется рано или поздно. Потому, что самые комментируемые блоги — фото блоги, то есть те же картинки с натуры. Зрелищно, познавательно, легко воспринимается любой аудиторией. А если на картинке фото ваше личное? О! На себя любимого можно любоваться часами! Про детей и всяких котов-собак промолчу. Хотите вставить картинку на блог? Или сделать галерею? Или заставить картинки увеличиваться при нажатии? Или двигаться? Варианты решений для Blogger описаны в посте в максимально простом изложении (за редким исключением все сказанное работает и на WordPress).

 1- На Blogger вставить картинку на блог можно через редактор. Порядок действий: зайти в редактор - нажимаем в панеле управления знак Загрузить изображение — грузим картинку на блог с компьютера, или уже имеющуюся из нашего блога, или из интернета.


2- Что такое ссылка на изображение и как ее найти?
Ссылка это уникальный URL адрес картинки, ее место жительство в интернете (подробнее про URL адреса). Как только загрузили картинку на блог (еще до публикации) — можно переключится на HTML и найти ссылку на изображение, которую Blogger создал при загрузки. Выглядит это так. Ссылку полезно знать, пригождается для работы (выделена красным):
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-EPr1BfYUUjQ/UEheID7b9hI/AAAAAAAAAwM/FeHgXltZfEU/s1600/poleznosti-blogger-0609-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://4.bp.blogspot.com/-EPr1BfYUUjQ/UEheID7b9hI/AAAAAAAAAwM/FeHgXltZfEU/s1600/poleznosti-blogger-0609-1.jpg" width="320" /></a></div><br />

3- Как узнать ссылку на чужую картинку?
Нажмите на понравившееся мышкой. В большинстве случаев вас перебросит на другую страницу в отдельном окне и в адресной строке вверху будет видна нужная ссылка — адрес.

4- Как вставить картинку на блог и сменить размер картинки на Blogger? Размер вставленной картинки на блог можно сменить используя стандартные функции Blogger. Порядок действий — редактор - нажмите левой мышкой на картинку — высветится внизу длинная синяя полоса — меню — выбираем один из размеров — нажимаем.
Размер картинки на блоге Blogger можно сменить и в редакторе в HTML, если прямо в кодах пропорционально (чтобы не исказить изображение) изменить размеры ширины и высоты (в примере выше выделено зеленым).

5- Как заставить вставленную картинку на блоге увеличиваться при нажатии? Достаточно просто. Вставляем картинку на блог в двух экземплярах — первый маленький для поста (я делала сразу размер 100* 75), а второй истинный размер во всей красе. Действуем по формуле, создаем коды для своих картинок. Любуемся своим произведением. Ссылки берем из п.1

<a href="ССЫЛКА НА БОЛЬШУЮ КАРТИНКУ" target=_blank><img src="ССЫЛКА НА МАЛЕНЬКУЮ КАРТИНКУ" border="0" width=100 height=75></a>
Так можно сделать и шуточные приколы с неожиданными метаморфозами: нажал на цветочек, а выскакивает волк!

6- Как менять месторасположение вставленной картинки на блог? Месторасположение картинки в посте можно сменить используя стандартные функции Blogger. Порядок действий - нажмите левой мышкой на картинку - высветится внизу длинная синяя полоса - меню - задаем месторасположение: справа, посередине, слева - нажимаем. Чтобы эта функции работала, всегда надо сначала писать текст поста, а потом в подходящее место вставлять картинку (дополнительно можно посмотретьвидео, как работать с картинками). (Можно прописывать расположение картинки сразу в кодах, если заранее уверены, где именно надо вставить картинку на блог).

7- Как вставить картинки на блог в горизонтальный ряд?
Можно сделать просто, что называется, «в лоб», через пробелы между картинками. В примере я привычным методом Blogger вставляю картинки, нахожу в HTML коды их, вставляю между кодами статические пробелы &nbsp;  . В примере подряд стоит четыре пробела.

  
8- Можно более надежно и цивилизованно вставить картинки на блог в строку, то есть создать целую галерею, используя формулы для создания таблиц. Пример формулы: стоят 4 картинки в 1 строке в 2 колонки без границ. Готовые коды берем из п.5 

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

Созерцаем галерею. Нажимаем. Восхищаемся собой.

9- Как заставить картинки из галереи на Blogger двигаться? Используем формулу движущейся строки:
<marquee>ТЕКСТ или КОД </marquee>
В качестве кода вставляем весь HTML код галереи из п.8
Не могу судить, насколько это функционально и интересно, но работает 


10- Как сделать фон под картинку или галерею?
Отдельно загружаем свой или выбираем в интернете фон и картинки. Находим ссылки. Действуем по формуле. Ссылку на фон с анимацией я нашла заранее. Код - беру весь код п.8. Размер = 100*4 +50 побольше размеров галереи установила.

<table background="ССЫЛКА НА ФОН"<tr><td width="450">КОД</td></tr></table>

На сегодня закончу
Код моей галереи

<tbody>
<table border="0" cellpadding="1" cellspacing="1" style="width: 100%px;">
<tr>
<td><a href="http://4.bp.blogspot.com/-EPr1BfYUUjQ/UEheID7b9hI/AAAAAAAAAwM/FeHgXltZfEU/s1600/poleznosti-blogger-0609-1.jpg" target="_blank"><img border="0" height="75" src="http://1.bp.blogspot.com/-cs2Nl_S4_3c/UEheNpJLYsI/AAAAAAAAAwU/hy6DMdQCa-0/s1600/poleznosti-blogger-0609-2.jpg" width="100" /></a>
</td>
<td><a href="http://2.bp.blogspot.com/-Ep-EyPdeXzg/UEheUaC_WJI/AAAAAAAAAwc/NfOwZO6_YqI/s1600/poleznosti-blogger-0609-3.jpg" target="_blank"><img border="0" height="75" src="http://2.bp.blogspot.com/-ZH0UMGte640/UEheaCJmoQI/AAAAAAAAAwk/jBpIEq1cD78/s1600/poleznosti-blogger-0609-4.jpg" width="100" /></a>
 </td>
<td><a href="http://2.bp.blogspot.com/--hvbXwk1_PE/UEhegA2ZDBI/AAAAAAAAAws/2oBhZMr-BMQ/s1600/poleznosti-blogger-0609-5-1.jpg" target="_blank"><img border="0" height="75" src="http://3.bp.blogspot.com/-uxkUIqjxVfk/UEhelkcbO5I/AAAAAAAAAw0/B2tztZe1Wk8/s1600/poleznosti-blogger-0609-6.jpg" width="100" /></a>
</td>
<td><a href="http://1.bp.blogspot.com/-j-FVTHF1csY/UEhfCR3cQ9I/AAAAAAAAAxc/tfaP7I1Qe94/s1600/poleznosti-blogger-0609-11.jpg" target="_blank"><img border="0" height="75" src="http://3.bp.blogspot.com/-h41dB9JTa4I/UEhfIEGD6aI/AAAAAAAAAxk/4ZH6mw8aLnI/s1600/poleznosti-blogger-0609-12.jpg" width="100" /></a>
</td>
</tr>
</tbody></table>

0 коммент.:

Отправить комментарий