Всем привет!
Сегодня мы с вами будем загружать на яндекс фотки анимационную картинку и переносить ее к себе в блог при помощи HTML кодов. Урок будет длинный, но надеюсь что понятный.
Итак начнем!
У нас есть вот такая анимашка
На ее примере и рассмотрим наш урок!
Урок написан для mail.ru.
Для начала нужно зарегистрироваться на яндексе. Это не сложно, потому не буду на этом останавливаться.
Аналогично такую же картинку можно загрузить и в группу (сообщество).
1. Идем на яндекс фотки по сылке СЮДА .
Нажимаем "загрузить фотки"
2. Открывается вот такое окно
3. Теперь настраиваем видимость нашего фото как на скрине
4. получаем вот такое окно
и выбираем нужный нам пункт как на скрине. Вы можете выбрать другой.
5. Создаем альбом для нашей гифки
Нажимаем на выделенную мной область (см.скрин выше) и получаем вот такое окно
В нем нажимаем "создать альбом" и получаем следущее :
Вводим название альбома и нажимаем "создать"
6. Теперь приступим к загрузке фото. Нажимаем "добавьте фотографии" как на скрине
У вас откроется диалоговое окно с вашим компьютером. В нем выбираете нужное вам фото, у меня это гиф картинка (наша анимашка). Вот так это выглядит у меня :
Выделив нашу анимашку, нажимаем "открыть". Диалоговое окно закрылось и мы получили вот такую картинку :
Нажимаем "загрузить фото" и получаем это:
После того, как загрузка завершилась, у вас откроется вот такое окно как на скрине ниже. В нем нажмите "перейдите к просмотру своих альбомов"
И получаем это :
На скрине я выделила свою картинку, вы же увидите свою.
Рядос с картинкой находится глазок, это значит, что я закрыла ее ото всех. И вижу ее на яндексе только я.
7. А теперь разъяснения по кодам.
Будьте внимательны!!!
Нажимаем мышкой по нашей картинке и получаем вот это :
8. Нажимаем "в другом размере"
и видим вот это
Красным я выделила свой размер картинки, вы можете взять любой.
В дальнейшем нам это пригодится.
9. Далее, выбрав нужный нам размер жмем "код для вставки на сайт или блог"
Под нашей картинкой откроется вот такой код
Для наглядности я его выделила красным прямоугольником.
Выделенные внутри значения :
1. ширина 600 пикселей,
2. высота 400 пикселей.
10. Открываем свой блог. Нажимаем "добавить запись". Переходим на вкладку с яндекс фотками и копируем самый первый код. Вот этот :
Бережно переносим его в блог на майл (вкладка с редактором у нас уже открыта) и вставляем его в редактор записи, получаем вот это :
Нажимаем "предпросмотр".
И получаем вот такую картинку :
Что же мы видим ?
Что плавность анимации отсутствует, появилась кликабельность картинки, ненужные слова "посмотреть на яндекс фотках". И еще появилась некрасивая белая стрелочка в левом нижнем углу нашей картинки (она появляется только на анимациях).
Вот все это мы сейчас и будем исправлять. Здесь все дело в кодах.
Первое.
Убираем кликабельность. Для этого возвращаемся назад в редактор и аккуратно стираем ссылку, которую я выделила синим. Только стираем так, что бы остались кавычки.
и получим вот такой код :
Второе.
Точно так же убираем фразу "посмотреть на яндекс фотках". И получаем вот такой код :
Нажимаем "предпросмотр" и видим, что кликабельность исчезла и фраза тоже испарилась. Если у вас так, то вы все сделали правильно.
Осталось убрать стрелку.
Третье.
Возвращаемся в редактор. Преходим на вкладку с яндекс фотками и под нашей картинкой нажимаем "в другом размере". В открывшемся окне нажимаем "оригинал", вот как тут :
И наша картинка открылась в новой вкладке. Теперь нам нужно из адресной строки браузера скопировать адрес картинки. На скрине я показала где его искать.
Теперь этот адрес бережно несем на вкладку с открытым редактором своего блога. И делаем следующее. Внимательно смотрим код в нашем редакторе и находим вот эту ссылку, она у меня на скрине выделена синим. Аккуратно удаляем ее между кавычками. Вот как тут :
И сразу на ее место (между кавычками) вставляем ссылку, которую мы скопировали из адресной строки браузера.
Вот что у нас должно получиться :
Нажимаем "предпросмотр". И вуаля! Наша картинка избавилась от стрелочки и появилась плавная анимация
Уряяяя!!! У нас все получилось! Надеюсь все всем понятно! Будут вопросы - задавайте. С удовольствием отвечу на все!
С любовью, ваша Анта!
ВасилисаСчастливаяЯ обратиться по имени
Воскресенье, 06 Марта 2016 г. 19:04 (ссылка)
