Рада видеть вас на моем блоге!!!

6.3.15

Анимационный баннер или как создать анимационную шапку для блога?


Анимационный баннер привлекает внимание посетителей блога не только своей информативностью, но и сменяющимися картинками с надписями. 

Анимационные баннеры часто используют блоггеры на своих блогах для приглашения читателей подписаться на тот или иной курс, ресурс.


Как создать свою уникальную шапку для блога? 

А можно ли сделать анимационную шапку на блог со сменяющимися картинками?
Конечно, можно. 

Предлагаю создать анимационную шапку-баннер для блога, созданного в Blogger.com, в программе «UnFREEz». «UnFREEz» создаёт Gif анимационные баннеры и шапки для блога. 

Скачать программу «UnFREEz»  можно здесь.

«UnFREEz» - это простая в использовании программа, которая предназначена для склеивания GIF файлов. Программа является портативной, поэтому установка не потребуется.
Интерфейс «UnFREEz» основан на маленьком окошке с ограниченным количеством функций. Можно загрузить несколько GIF файлов, а затем нажать на кнопку "Make Animated GIF", чтобы создать анимированный баннер. Можно установить время воспроизведения анимации. 

Посмотрите, как пользоваться программой «UnFREEz»:



Можно также создать автоматическую генерацию новой шапки с каждым кликом на  блоге. Смена шапки будет происходить при клике мышью на новую страницу блога. 

Как выполнить такую автоматическую генерацию новой шапки с каждым кликом.

В административной панели блога поочерёдно нажимаем вкладки «Дизайн» - «Добавить гаджет» - «HTML/JavaScript», куда и вставляем отредактированный HTML-код: 

<style type='text/css'>#header {
background: url("your header image url in quotes") no-repeat left bottom;
margin:0;
padding:2px;
}
</style><script type="text/javascript">
var banner= new Array();
banner[0]="URL- АДРЕС ИЗОБРАЖЕНИЯ для шапки 0";
banner[1]="URL- АДРЕС ИЗОБРАЖЕНИЯ для шапки 1";
banner[2]="URL- АДРЕС ИЗОБРАЖЕНИЯ для шапки 2";
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

Можно поставить столько изображений, сколько сколько захотите и создадите.  Но картинки для шапки нужно делать высотой не более 200 пикселей, т.е. узкие. 

Только предупреждаю, что аннимационная шапка увеличит время загрузки блога.

Анимационный баннер привлекает внимание посетителей блога не только своей информативностью, но и сменяющимися картинками с надписями.


8 комментариев :

  1. Анимационный баннер - вопрос как же это сделать не покидал меня последние две недели. И вот, пожалуйста, в сундучке и на этот вопрос нашелся ответ. Бабушкины подсказки просто замечательные.

    ОтветитьУдалить
  2. Замечательная статья! Просто, понятно, пошагово сделала баннер на свой любимый блог. Спасибо Татьяна!

    ОтветитьУдалить
    Ответы
    1. Анимационные баннеры часто используются блоггерами на своих блогах/сайта для приглашения посетителей подписаться или перейти на тот или иной ресурс.

      Удалить
  3. А как бегущую строку сделать как в вас? Подскажите

    ОтветитьУдалить
    Ответы
    1. Это ссылкана статью. Здесь она не активная. Вставьте её в окно браузера. Думаю, это то, что Вам нужно. https://sunduktatianiosharinoi.blogspot.ru/2016/01/blog-post_26.html

      Удалить
  4. Спасибо все очень помогло! Можете читать мой блог, которая помогла мне настроить Татьяна!

    ОтветитьУдалить
    Ответы
    1. Вставьте сюда ссылку на свой блог, посмотрю

      Удалить