Blogger и другие платформы, устанавливаем на сайт - блог анимацию всплывающую при загрузке страниц.
Доброго времени суток дорогие посетители нашего сайта. Самые важные разделы для работы с blogger мы с вами проштудировали. Теперь можно перейти и к полезному и в тоже время красивому. Наверняка вы порой замечали, что при заходе на некоторые сайты - блоги перед их загрузкой на вашем мониторе появлялась небольшая анимация и длилась она ровно столько, сколько нужно сайту - блогу, чтобы полностью загрузить открываемую страницу. То есть пока все его компоненты не подгрузятся перед вами будет извиваться определенный анимационный объект. Понятно, что сделано это не только для красоты, но и для того, чтобы посетитель видел перед собой сразу все компоненты сайты, а не по отдельности каждый из них. К тому же подобный виджет показывает, что сайт - блог у вас более чем профессиональный. Чем лучше дизайн, тем больше доверия.Пример анимации можно увидеть на нашем тестовом блоге. Анимация в виде вращающегося кубика-рубика.
Для установки виджета preloader вам нужно перейти в раздел Шаблон - Изменить HTML найти код ]]> и перед ним вставить следующий код:
#loader {
background-color: #fff;
background-image: url(/2.bp.blogspot.com/-oPGZaNs5sVA/VjMsQ7sIZQI/AAAAAAAAA9w/q9k-wOikJQI/s1600/preloader.gif);
background-position: center center;
background-repeat: no-repeat;
background-size: 70px 70px;
bottom: 0px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 9999;
}
Выделенный участок кода это ссылка на анимационное изображение. Вы можете изменить его на следующие варианты:
/4.bp.blogspot.com/-TVcBl1kUwZU/VjtDTpJcYPI/AAAAAAAAiEk/xUdtLa22MT0/s1600/logo_dark_nobg%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
/2.bp.blogspot.com/-2-xhiuaRtmA/VjtDQKYc1ZI/AAAAAAAAiCc/Tum9Q_9JG08/s1600/Preloader_10%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
Дальше находим код и после него вставляем следующий код:
Если хотите, чтобы виджет работал на всех страницах, а не только на главной, в таком случае не копируйте код выделенный оранжевым цветом.
И завершающий этап, ищем код перед которым пристраиваем следующий код:
Сохраняем шаблон и проверяем, как работает ваш новый виджет.
Видео инструкция:
Коммент.