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

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



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

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


2- Что такое ссылка на изображение и как ее найти?
Ссылка это уникальный URL адрес картинки, ее место жительство в интернете (подробнее про URL адреса). Как только загрузили картинку на блог (еще до публикации) — можно переключится на HTML и найти ссылку на изображение, которую Blogger создал при загрузки. Выглядит это так. Ссылку полезно знать, пригождается для работы (выделена красным):
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7aV45ViofRT2gtrvm594pbKYL52eW8jrltiucUPa4G0Ivre52eclDdqQmR1mejh6cqrxrqHXD5zmZoL90a_d-UdM-d6KPvWrNmQCbgH3iT5W4gKTM8Qu_BG51G_rlHNi-lcMpIu2uEE/s1600/poleznosti-blogger-0609-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7aV45ViofRT2gtrvm594pbKYL52eW8jrltiucUPa4G0Ivre52eclDdqQmR1mejh6cqrxrqHXD5zmZoL90a_d-UdM-d6KPvWrNmQCbgH3iT5W4gKTM8Qu_BG51G_rlHNi-lcMpIu2uEE/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7aV45ViofRT2gtrvm594pbKYL52eW8jrltiucUPa4G0Ivre52eclDdqQmR1mejh6cqrxrqHXD5zmZoL90a_d-UdM-d6KPvWrNmQCbgH3iT5W4gKTM8Qu_BG51G_rlHNi-lcMpIu2uEE/s1600/poleznosti-blogger-0609-1.jpg" target="_blank"><img border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubVgjwUu2CQQG7F86-0UgPby1b3F90PpRB2my8r9nGGJPyFgli2nOIDYtvjOV37wPXOYv1q6VmxWXGbCYeBooXlmqZKaerQJauRaXaU0js55qiQkLiieVLI1A-yQ9J9YgRhrHJ5Yh2bU/s1600/poleznosti-blogger-0609-2.jpg" width="100" /></a>
</td>
<td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgehQXrQomUKsbmx4SFKW8eOVRVf86hzuKct5adCn98N1QTR6E_lKsSB-2WRcx6IzgtIVMkjcbT4-8NGBIn9nx2f1j_VLb_VmxkUAreaHsrA1u2Dipietrz3og-HC_foPvdchcke-y-iiY/s1600/poleznosti-blogger-0609-3.jpg" target="_blank"><img border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJBImZCL9ZEfI2pX9SLNb1qPVahAphmKKD3TT71TtyHHZQ6J0Yl26phUPb1Uh0fIUthgDFGSLdJp1JuKJpLJWWuIni90sK-EDnGyIsjnyG23ks0aRUyAe2_gd3bUWG3H9hDA6P74OJxI/s1600/poleznosti-blogger-0609-4.jpg" width="100" /></a>
 </td>
<td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKVs8VShpejDZVVQ0DZ9cF4pbEE9kyHL-DlU5UTYPFT5-vmhIHp53DUBi1yIAz7F4UGS4yUdghG8DngTGK76kuxdOrcSuWIjshBf0xBRYs80O9vw7kzCI_G_WE0hfEVbqfjRFTYXOhLA/s1600/poleznosti-blogger-0609-5-1.jpg" target="_blank"><img border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii90N0AenfohyphenhyphenxiVbnxaGloEkn5w77pgoT5ivTB_lGBFs9nNCTmEdFpRT7DyqNJ5y15b67yo00y393hruVKJksTHEJmb9CJE7l-0IZcDUB41C5eskDgxe9C9xO9Z7DDTcUn7FNaddbXoA/s1600/poleznosti-blogger-0609-6.jpg" width="100" /></a>
</td>
<td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOZXwFr5Rh3Ub3qHqC5pDdFScRgmU8dBlmQ2HbcsErxMEkpwhx1WTskp6lfDbcrrsY1kEryNQi1U1X8FOcoSIu0Om1uwbxZEsn_oO75f86dWdN44OmY1oFPuAWnv1QGscKc-TwhmB4tOk/s1600/poleznosti-blogger-0609-11.jpg" target="_blank"><img border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqLcqIxHtftvrryMUJy1CrQ_RlglEOYpRf8pSnXY4kUN0HXjcj8x6uJiCQ_qN-vFRW-sQ2t03GgB67FVqj84SN5FxQRQHYgV1laBsOTXELksQN4h6HYIu3NQPeImpUW8RC5rsWhwB13Vs/s1600/poleznosti-blogger-0609-12.jpg" width="100" /></a>
</td>
</tr>
</tbody></table>

0 коммент.:

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