Какие красивые гиф-анимации и баннеры встречаются на страницах блогов! Порой даже завидно становится. Живые картинки явно привлекают внимание читателя и оживляют любой блог — Blogger, WordPress или другой вариант, неважно. Как сделать гиф-анимацию новичку своими руками опираясь только на собственную фантазию? А потом поместить ее на свой блог на радость себе и читателям? Ничего невозможного нет! Гиф-анимация добавляет не только динамики блогу, но и функциональности.
Существует огромное количество сервисов по созданию гиф-анимации от примитивной до сложной с привлечением множества программ и технологий.
Мы с вами рассмотрим вариант создания гиф-анимации для новичка без использования специальных программ и не требующий особых знаний и навыков. Сделаем свою первую гиф-анимацию в режиме онлайн прямо здесь и сейчас.
Что надо приготовить.
Несколько фотографий, картинок желательно одного размера. Количество на ваше усмотрение. Можно заранее сделать на картинках надписи. Как работать с картинками читайте в статье. А можно и ничего не делать на первый раз.
Порядок действий. Заходим на сервис. В правом углу выбираем язык - русский. Открывается страница — Создать гиф-анимацию. Выбираем - загрузить через компьютер. Нажимаем Выбрать файл - делаем выбор картинки/фото со своего компа. Устанавливаем размер, скорость. Жмем Создать гиф-анимацию. Нас перебрасывает на новую страницу и через минуту мы видим нашу созданную гиф-анимацию. Ура! Получилось! Если вас все устраивает, то сохраняем картинку себе на комп и копируем в окошке HTML код для блога. Заносим код себе в блокнотик. Если же нас что-то не устраиваем, то удаляем эту анимацию и создаем новую.
Как вставить гиф-анимацию себе на блог Blogger через HTML коды? Подробности найдете на странице Уроки или на этой странице. Вставить можно через редактор в режиме HTML в сообщение и через гаджет HTML в боковую панель блога.
Усложним задачу. Сделаем не просто гиф-анимацию, а активный баннер. Что такое активный баннер? Баннер, при нажатии на который, нас перебрасывает по адресу заданной в баннере ссылки. То есть, мы сами указываем, куда надо перейти читателю - на другой сайт, на видео, на подписную страницу. Поработаем со своей полученной живой картинкой, точнее с кодом картинки. Если мы просто вставим коды, которые получили с сервиса, то при нажатии на картинку мы переходим на сервис. Что в кодах можно сменить? Ссылку меняем на свою собственную (выделено розовым цветом), лишнее удаляем (выделено зеленым цветом). Получаем "Колокольчик"с переходом. Замену проводим аккуратно и внимательно — важен каждый знак кода.
<a href="http://www.picasion.com/"><img src="http://i.picasion.com/pic60/fe7b2e8655c543a274001c7f70be58d4.gif" width="300" height="310" border="0" alt="gif" /></a><br /><a href="http://www.picasion.com/">gif</a>
Я сделала замену на http://www.youtube.com/user/svetasad
Нажмите на картинку и проверьте, что получилось.
По такому принципу создаются активные баннеры.
Если убрать из кода "Ягоды" то, что выделено зеленым цветом, то получим просто гиф-анимацию без перехода:
<a href="http://picasion.com/"><img src="http://i.picasion.com/pic60/2469d2f0098aeb7b0e30dae9d7196a72.gif" width="300" height="225" border="0" alt="online" /></a><br /><a href="http://www.picasion.com/">online</a>
Творите! Создайте увлекательные гиф-анимации и притягательные баннеры. Насыщайте блог информацией и красками.
Наше знакомство с сервисом на этом не закончено. На сервисе можно создать собственный аватар, отредактировать фото. Попробуйте! Работать просто и удобно. Надеюсь, вам понравится. "Приглашаю":
<a href="http://www.vseoblog.com/2012/03/blog-post_31.html"><img src="http://i.picasion.com/pic60/9ca8d8457d444c28b377e093deaec315.gif" width="125" height="114" border="0" alt="online" /></a><br /><a href="http://www.picasion.com"></a>
Напишите в комментариях - что у вас получилось?
Всего доброго вам и вашим блогам
Комментариев нет:
Отправить комментарий