Серия сообщений "Изображения":
Часть 1 - Всё про картинки. Часть 1. Закругляем углы.
Часть 2 - Всё про картинки. Часть 2
Часть 3 - Всё про картинки. Часть 3.
Часть 4 - Всё про картинки. Часть 4. Картинки в ряд и в столбик.
Часть 5 - Фон для поста
Часть 6 - Вставляем музыкальный плеер (и не только) в определённое место
Часть 7 - Развернуть картинку прямо на странице поста

Выбрана рубрика Изображения.

Другие рубрики в этом дневнике: флеш(3), Уроки(19), Улыбнись(3), Соцсети(2), рамки для видео(4), рамки(21), программы(18), Праздники(6), православие(1), Политика(1), Полезные советы(12), Пенсионерам(1), Памятка для Лиру(15), Онлайн(10), Ноутбук(1), Музыка(14), Лирика(1), кулинария(13), компьютер(51), Интернет(3), Интересное(12), здоровье(20), Закон и порядок(2), Домоводство(2), Видео(4)

Суббота, 17 Января 2015 г. 18:29 + в цитатник

Всё про картинки.
Часть 1

Закругляем острые углы на картинке

Берём картинку
герань (200x143, 6Kb)

Чтобы закруглить углы на картинке, пишем HTMLкод:
<img src="АДРЕС КАРТИНКИ" width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ"border="0" style="border-radius: ЧИСЛО ОТ 1 ДО 100%;" />

Вставляем данные и получаем картинку с закругленными углами :

Радиус установлен 80%

Радиус установлен 9%

bloginja

Комментарии (22)

Всё про картинки. Часть 2

Дневник

Воскресенье, 18 Января 2015 г. 18:22 + в цитатник

Всё про картинки.
Часть 2

Превью со ссылкой на оригиналЧтобы показать картинку большого размера, можно создать её превью (т. е. маленькую) и указать адрес на оригинал.
<a href="АДРЕС БОЛЬШОЙ КАРТИНКИ" target="_blank"><img src="АДРЕС УМЕНЬШЕННОЙ КАРТИНКИ" border="0" width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ" /></a>

Кликнув по маленькой картинке можно будет увидеть эту же картинку в оригинальном размере.

Создание баннера-картинки со ссылкой на нужный адрес страницы в Интернете<a href="Адрес страницы, на которую будет указывать баннер" target="_blank"><img src="Адрес картинки" border="0" title="Текст, видимый, в качестве подсказки, при наведении на ссылку." width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ" /></a>

пример баннера-ссылки на дневник:
Читать дальше...

bloginja

Метки: всё про картинки превью баннер

Комментарии (18)

Всё про картинки. Часть 3.

Дневник

Понедельник, 19 Января 2015 г. 12:39 + в цитатник

Всё про картинки.
Часть 3

Текст на картинкуHTML код:
<div align="center"><table background="АДРЕС КАРТИНКИ"><tr><td valign="bottom" align="center" width="ширина картинки" height="высота картинки"><font face="шрифт текста" size="размер текста" color="#цвет текста">ТЕКСТ.</font></td></tr></table></div>
Пример:

Смотрите на цветы. Минуты не считайте.
В цветах повтора нет, от них нельзя устать.
Смотрите на цветы. Их как стихи читайте.
Прекрасно над цветком в раздумье постоять.

Чтобы текст располагался внизу,

Читать дальше...

bloginja

Метки: всё про картинки текст на картинку

Комментарии (29)

<a href="https://www.liveinternet.ru/users/win-win-win/post350734521/">Р’СЃС‘ РїСЂРѕ РєР°СЂС‚РёРЅРєРё. Р§Р°СЃС‚СЊ 4. РљР°СЂС‚РёРЅРєРё РІ СЂСЏРґ Рё РІ СЃС‚РѕР»Р±РёРє.</a><br/>

Р’СЃС‘ РїСЂРѕ РєР°СЂС‚РёРЅРєРё.  
Р§Р°СЃС‚СЊ 4
 
РљР°СЂС‚РёРЅРєРё РІ СЂСЏРґ Р±РµР· РёСЃРїРѕР»СЊР·РѕРІР°РЅРёСЏ С‚Р°Р±Р»РёС†С‹РСЃРїРѕР»СЊР·СѓСЏ С‚РµРі nobr 
&lt;nobr&gt;РљРђР РўРРќРљР Р’ Р РЇР”&lt;/nobr&gt; 
РјРѕР¶РЅРѕ РІСЃС‚Р°РІРёС‚СЊ Р»СЋР±РѕРµ РєРѕР»РёС‡РµСЃС‚РІРѕ РєР°СЂС‚РёРЅРѕРє РІ РѕРґРЅСѓ СЃС‚СЂРѕРєСѓ.  РќРѕ С‚Р°Рє РєР°Рє СЃС‚СЂР°РЅРёС‡РєР° РЅРµ Р±РµР·СЂР°Р·РјРµСЂРЅР°СЏ, РЅСѓР¶РЅРѕ СЃР»РµРґРёС‚СЊ Р·Р° РєРѕР»Р»РёС‡РµСЃС‚РІРѕРј. РќР° РЅРѕРІРѕР№ СЃС‚СЂРѕРєРµ РѕРїСЏС‚СЊ РїРёС€РµРј СЌС‚Рё С‚РµРіРё Рё РІСЃС‚Р°РІР»СЏРµРј СЃР»РµРґСѓСЋС‰РёР№ СЂСЏРґ С„РѕС‚РѕРє. Р С‚.Рґ.

РџСЂРёРјРµСЂ:

РљРѕРґ РґР»СЏ РІСЃС‚Р°РІРєРё РєР°СЂС‚РёРЅРєРё: 
&lt;img src=&quot;РђР”Р Р•РЎ РљРђР РўРРќРљР&quot; border=&quot;0&quot; width=&quot;РЁРР РРќРђ РљРђР РўРРќРљР&quot; height=&quot;Р’Р«РЎРћРўРђ РљРђР РўРРќРљР&quot;&gt;
 
РљРѕРґ РєР°СЂС‚РёРЅРєРё СЃРѕ СЃСЃС‹Р»РєРѕР№ РЅР° РѕСЂРёРіРёРЅР°Р»: 
&lt;a href=&quot;РђР”Р Р•РЎ РћР Р... <a href="https://www.liveinternet.ru/users/win-win-win/post350734521/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Всё про картинки. Часть 4. Картинки в ряд и в столбик.

Дневник

Вторник, 20 Января 2015 г. 13:58 + в цитатник

Всё про картинки.
Часть 4

Картинки в ряд без использования таблицыИспользуя тег nobr

<nobr>КАРТИНКИ В РЯД</nobr>

можно вставить любое количество картинок в одну строку. Но так как страничка не безразмерная, нужно следить за колличеством. На новой строке опять пишем эти теги и вставляем следующий ряд фоток. И т.д.

Пример:

matryoshka02 (128x128, 11Kb)

Код для вставки картинки:
<img src="АДРЕС КАРТИНКИ" border="0" width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ">

Код картинки со ссылкой на оригинал:
<a href="АДРЕС ОРИГИНАЛЬНОЙ КАРТИНКИ" target="_blank" ><img src="АДРЕС КАРТИНКИ С ИЗМЕНЁННЫМ РАЗМЕРОМ" border="0" width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ"></a>

Картинки в столбик
Читать дальше...

bloginja

Метки: всё про картинки картинки в ряд и в столбик

Комментарии (31)

<a href="https://www.liveinternet.ru/users/win-win-win/post386687652/">Р¤РѕРЅ РґР»СЏ РїРѕСЃС‚Р°</a><br/>

Р¤РѕРЅ РґР»СЏ РїРѕСЃС‚Р°

РњРµРЅСЏ СѓРґРёРІР»СЏСЋС‚ Р±Р»РѕРіРµСЂС‹, РєРѕС‚РѕСЂС‹Рµ РІС‹СЃС‚Р°РІР»СЏСЋС‚ РїРѕСЃС‚С‹, РЅРµ РґСѓРјР°СЏ Рѕ СЃРІРѕРёС… С‡РёС‚Р°С‚РµР»СЏС…. РС‚Рѕ РІС‹СЂР°Р¶Р°РµС‚СЃСЏ РІ С‚РѕРј, С‡С‚Рѕ РѕРЅРё РЅРµ СѓС‚СЂСѓР¶РґР°СЋС‚ СЃРµР±СЏ РїРѕСЃС‚Р°РІРёС‚СЊ С„РѕРЅ РїРѕРґ С‚РµРєСЃС‚ Рё, С†РёС‚РёСЂСѓСЏ Сѓ РЅРёС… РїРѕСЃС‚С‹, Р»СЋРґРё РІРёРґСЏС‚ РЅРµРѕР¶РёРґР°РЅРЅС‹Р№ СЂРµР·СѓР»СЊС‚Р°С‚ РІ СЃРІРѕС‘Рј РґРЅРµРІРЅРёРєРµ. Р РІ РґСЂСѓРіРѕР№ СЂР°Р· СѓР¶Рµ  РїРѕРґСѓРјР°СЋС‚, РїСЂРµР¶РґРµ, С‡РµРј С†РёС‚РёСЂРѕРІР°С‚СЊ.

РЇ С‚СѓС‚ РїРѕРґСѓРјР°Р»Р°: Р° РјРѕР¶РµС‚ РѕРЅРё РЅРµ Р·РЅР°СЋС‚ РєР°Рє СЌС‚Рѕ СЃРґРµР»Р°С‚СЊ?  РџРѕСЌС‚РѕРјСѓ СЂРµС€РёР»Р° РЅР°РїРёСЃР°С‚СЊ РїРѕРґСЃРєР°Р·РєСѓ. 
Р’ РїСЂРѕСЃС‚РѕРј СЂРµРґР°РєС‚РѕСЂРµ РґРЅРµРІРЅРёРєР° РІСЃС‚Р°РІР»СЏРµС‚Рµ РєРѕРґ, РІ РєРѕС‚РѕСЂРѕРј РЅСѓР¶РЅРѕ РїРѕРґСЃС‚Р°РІРёС‚СЊ Р»РёС€СЊ С†РІРµС‚ С„РѕРЅР° (Рє РїСЂРёРјРµСЂСѓ EBD6F7 РёР»Рё FFFFFF, РёР»РёF9F9F7, РёР»Рё РґСЂСѓРіРѕР№ ).

&lt;center&gt;&lt;table bgcolor=&quot;#Р¦Р’Р•Рў Р¤РћРќРђ&quo... <a href="https://www.liveinternet.ru/users/win-win-win/post386687652/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Фон для поста

Дневник

Понедельник, 14 Марта 2016 г. 17:57 + в цитатник

Фон для поста

Меня удивляют блогеры, которые выставляют посты, не думая о своих читателях. Это выражается в том, что они не утруждают себя поставить фон под текст и, цитируя у них посты, люди видят неожиданный результат в своём дневнике. И в другой раз уже подумают, прежде, чем цитировать.

Я тут подумала: а может они не знают как это сделать? Поэтому решила написать подсказку.

В простом редакторе дневника вставляете код, в котором нужно подставить лишь цвет фона (к примеру EBD6F7 или FFFFFF, илиF9F9F7, или другой ).

<center><table bgcolor="#ЦВЕТ ФОНА" border="1"><tbody><tr><td width="600"><br /><center>ТЕКСТ...Картинки...ТЕКСТ</center><br /></td></tr></tbody></table></center>

Получится, примерно, так:

Пришла весна!
Весна – красна.
С зеленой травкой у окна
Развесила сережки
Березе — белоножке.

bloginja

Читайте так же:
ПОСТ
ПОСТ
ПОСТ
ПОСТ

Метки: Фон для поста

Комментарии (90)

Вставляем музыкальный плеер (и не только) в определённое место

Дневник

Понедельник, 03 Апреля 2017 г. 16:01 + в цитатник

Вставляем музыкальный плеер в определённое место

Чтобы вставить плеер (и не только) в определённое место, нужно создать код и вписать туда нужные для этого теги.
Код:
<div align="center"><table border="0" cellpadding="0" background="ФОНОВАЯ КАРТИНКА"><tbody><tr><td style="padding: 0px;" width="ШИРИНА ФОНА" height="ВЫСОТА ФОНА" ТЕГИ ВЫРАВНИВАНИЯ>КОД ПЛЕЕРА</td></tr></tbody></table></div>

Теги выравнивания:
снизу по центру — valign="bottom" align="center" снизу справа — valign="bottom" align="right" снизу слева — valign="bottom" align="left" сверху в центре — valign="top" align="center" сверху справа — valign="top" align="right" сверху слева — valign="top" align="left"

Примеры:

Cверху слева:

Cнизу слева:

Сверху справа:

Снизу справа:

Сверху в центре:

Снизу по центру:

Вопрос был про плееры, но не могу не написать, что точно так же можно вставить картинки.

Cверху слева:

Cнизу слева:

Cверху справа:

Cнизу справа:

Cверху в центре:

Cнизу по центру:

bloginja

Читайте так же:
Плееры для вставки МР3
Плееры в дневник
Плейкаст

Метки: выравнивание плеер

Комментарии (49)

<a href="https://www.liveinternet.ru/users/win-win-win/post412073141/">Р Р°Р·РІРµСЂРЅСѓС‚СЊ РєР°СЂС‚РёРЅРєСѓ РїСЂСЏРјРѕ РЅР° СЃС‚СЂР°РЅРёС†Рµ РїРѕСЃС‚Р°</a><br/>

Р§С‚РѕР±С‹ СѓРјРµРЅСЊС€РµРЅРЅР°СЏ РєР°СЂС‚РёРЅРєР° (РїСЂРµРІСЊСЋ) СЂР°Р·РІРµСЂРЅСѓР»Р°СЃСЊ РїСЂСЏРјРѕ РЅР° СЃС‚СЂР°РЅРёС†Рµ РїРѕСЃС‚Р°, РјРѕР¶РЅРѕ Р·Р°РіСЂСѓР·РёС‚СЊ РєР°СЂС‚РёРЅРєРё РЅР° Р›РёСЂСѓ Рё СѓРєР°Р·Р°С‚СЊ РЅСѓР¶РЅРѕРµ РґРµР№СЃС‚РІРёРµ. Рђ РјРѕР¶РЅРѕ РёСЃРїРѕР»СЊР·РѕРІР°С‚СЊ СЃС‚РѕСЂРѕРЅРЅРёРµ СЃСЃС‹Р»РєРё РЅР° РєР°СЂС‚РёРЅРєРё Рё РІРѕСЃРїРѕР»СЊР·РѕРІР°С‚СЊСЃСЏ СЌС‚РѕР№ С„СѓРЅРєС†РёРµР№. Р”Р»СЏ СЌС‚РѕРіРѕ РЅСѓР¶РЅРѕ РІ РєРѕРґ СЃСЃС‹Р»РєРё РїСЂРѕРїРёСЃР°С‚СЊ rel="li-bigpic" 
&lt;a href=&quot;РђР”Р Р•РЎ РљРђР РўРРќРљР&quot; rel=&quot;li-bigpic&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;РђР”Р Р•РЎ РљРђР РўРРќРљР&quot; width=&quot;РЁРР РРќРђ РљРђР РўРРќРљР&quot; height=&quot;Р’Р«РЎРћРўРђ РљРђР РўРРќРљР&quot;/&gt;&lt;/a&gt;
Рё СѓСЃС‚Р°РЅРѕРІРёС‚СЊ СЂР°Р·РјРµСЂ СѓРјРµРЅСЊС€РµРЅРЅРѕР№ РєР°СЂС‚РёРЅРєРё.

Рљ РїСЂРёРјРµСЂСѓ, Сѓ РјРµРЅСЏ РµСЃС‚СЊ Р°РґСЂРµСЃ-СЃСЃС‹Р»РєР° РЅР° РєР°СЂС‚РёРЅРєСѓ СЃ РЇРЅРґ... <a href="https://www.liveinternet.ru/users/win-win-win/post412073141/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Развернуть картинку прямо на странице поста

Дневник

Четверг, 28 Декабря 2023 г. 07:48 + в цитатник

Чтобы уменьшенная картинка (превью) развернулась прямо на странице поста, можно загрузить картинки на Лиру и указать нужное действие. А можно использовать сторонние ссылки на картинки и воспользоваться этой функцией. Для этого нужно в код ссылки прописать
rel="li-bigpic"

<a href="АДРЕС КАРТИНКИ" rel="li-bigpic" target="_blank"><img src="АДРЕС КАРТИНКИ" width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ"/></a>

и установить размер уменьшенной картинки.

К примеру, у меня есть адрес-ссылка на картинку с Яндекса https://img-fotki.yandex.ru/get/198026/35554120.0/0_b8806_b04fff04_L.jpg
Подставляю её в предлагаемый код и получаю такую превьюшку, при клике по которой можно увидеть её реальный размер прямо здесь.
Жмите на картинку

bloginja

Читайте так же:
Всё про картинки. Часть 1. Закругляем углы.
Всё про картинки. Часть 2
Всё про картинки. Часть 3.
Всё про картинки. Часть 4. Картинки в ряд и столбик.

Метки: развернуть картинку

Страницы:

[1]

LiveInternetLiveInternet

-Рубрики

-Метки

-Подписка по e-mail

Всё про картинки. Часть 1. Закругляем углы.

Дневник

Всё про картинки. Часть 2

Дневник

Всё про картинки. Часть 3.

Дневник

Всё про картинки. Часть 4. Картинки в ряд и в столбик.

Дневник

Фон для поста

Дневник

Вставляем музыкальный плеер (и не только) в определённое место

Дневник

Развернуть картинку прямо на странице поста

Дневник