Всем привет!
Сегодня мы с вами будем загружать на яндекс фотки анимационную картинку и переносить ее к себе в блог при помощи HTML кодов. Урок будет длинный, но надеюсь что понятный.
Итак начнем!
У нас есть вот такая анимашка
[640x400]
На ее примере и рассмотрим наш урок!
Урок написан для mail.ru.
Для начала нужно зарегистрироваться на яндексе. Это не сложно, потому не буду на этом останавливаться.
Аналогично такую же картинку можно загрузить и в группу (сообщество).
1. Идем на яндекс фотки по сылке СЮДА .
Нажимаем "загрузить фотки"
[800x417]
2. Открывается вот такое окно
[800x314]
3. Теперь настраиваем видимость нашего фото как на скрине
[800x314]
4. получаем вот такое окно
[259x132]
и выбираем нужный нам пункт как на скрине. Вы можете выбрать другой.
5. Создаем альбом для нашей гифки
[446x83]
Нажимаем на выделенную мной область (см.скрин выше) и получаем вот такое окно
[265x328]
В нем нажимаем "создать альбом" и получаем следущее :
[374x351]
Вводим название альбома и нажимаем "создать"
[374x351]
6. Теперь приступим к загрузке фото. Нажимаем "добавьте фотографии" как на скрине
[518x131]
У вас откроется диалоговое окно с вашим компьютером. В нем выбираете нужное вам фото, у меня это гиф картинка (наша анимашка). Вот так это выглядит у меня :
[800x473]
Выделив нашу анимашку, нажимаем "открыть". Диалоговое окно закрылось и мы получили вот такую картинку :
[800x369]
Нажимаем "загрузить фото" и получаем это:
[727x281]
После того, как загрузка завершилась, у вас откроется вот такое окно как на скрине ниже. В нем нажмите "перейдите к просмотру своих альбомов"
[571x253]
И получаем это :
[800x191]
На скрине я выделила свою картинку, вы же увидите свою.
Рядос с картинкой находится глазок, это значит, что я закрыла ее ото всех. И вижу ее на яндексе только я.
7. А теперь разъяснения по кодам.
Будьте внимательны!!!
Нажимаем мышкой по нашей картинке и получаем вот это :
[800x571]
8. Нажимаем "в другом размере"
[800x571]
и видим вот это
Красным я выделила свой размер картинки, вы можете взять любой.
В дальнейшем нам это пригодится.
9. Далее, выбрав нужный нам размер жмем "код для вставки на сайт или блог"
[776x309]
Под нашей картинкой откроется вот такой код
[800x327]
Для наглядности я его выделила красным прямоугольником.
Выделенные внутри значения :
1. ширина 600 пикселей,
2. высота 400 пикселей.
[800x327]
10. Открываем свой блог. Нажимаем "добавить запись". Переходим на вкладку с яндекс фотками и копируем самый первый код. Вот этот :
[800x133]
Бережно переносим его в блог на майл (вкладка с редактором у нас уже открыта) и вставляем его в редактор записи, получаем вот это :
[800x612]
Нажимаем "предпросмотр".
И получаем вот такую картинку :
[800x488]
Что же мы видим ?
Что плавность анимации отсутствует, появилась кликабельность картинки, ненужные слова "посмотреть на яндекс фотках". И еще появилась некрасивая белая стрелочка в левом нижнем углу нашей картинки (она появляется только на анимациях).
Вот все это мы сейчас и будем исправлять. Здесь все дело в кодах.
Первое.
Убираем кликабельность. Для этого возвращаемся назад в редактор и аккуратно стираем ссылку, которую я выделила синим. Только стираем так, что бы остались кавычки.
[800x264]
и получим вот такой код :
[800x241]
Второе.
Точно так же убираем фразу "посмотреть на яндекс фотках". И получаем вот такой код :
[800x230]
Нажимаем "предпросмотр" и видим, что кликабельность исчезла и фраза тоже испарилась. Если у вас так, то вы все сделали правильно.
Осталось убрать стрелку.
Третье.
Возвращаемся в редактор. Преходим на вкладку с яндекс фотками и под нашей картинкой нажимаем "в другом размере". В открывшемся окне нажимаем "оригинал", вот как тут :
[188x231]
И наша картинка открылась в новой вкладке. Теперь нам нужно из адресной строки браузера скопировать адрес картинки. На скрине я показала где его искать.
[800x236]
Теперь этот адрес бережно несем на вкладку с открытым редактором своего блога. И делаем следующее. Внимательно смотрим код в нашем редакторе и находим вот эту ссылку, она у меня на скрине выделена синим. Аккуратно удаляем ее между кавычками. Вот как тут :
[800x284]
И сразу на ее место (между кавычками) вставляем ссылку, которую мы скопировали из адресной строки браузера.
Вот что у нас должно получиться :
[800x238]
Нажимаем "предпросмотр". И вуаля! Наша картинка избавилась от стрелочки и появилась плавная анимация
[680x466]
Уряяяя!!! У нас все получилось! Надеюсь все всем понятно! Будут вопросы - задавайте. С удовольствием отвечу на все!
С любовью, ваша Анта!