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

Прелоадер для сайта на Blogger

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;
}

Выделенный участок кода это ссылка на анимационное изображение. Вы можете изменить его на следующие варианты:

 /1.bp.blogspot.com/-2IKobKg7qTg/VjtC2zU7aQI/AAAAAAAAiBU/BTWeYS66OLk/s1600/preloader%2B%25285%2529.gif

 
 
/2.bp.blogspot.com/-u2ibzymo5Jo/VjtDPbaP07I/AAAAAAAAiDI/DD0ROOQIqgY/s1600/54f4ca1edced7ed62ba934b4_infinite-gif-preloader.gif

/2.bp.blogspot.com/-7SUv4u8eRPY/VjtDPeS47-I/AAAAAAAAiCM/QwTzMPfPwaM/s1600/042413_square_loader%2B%2%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

/2.bp.blogspot.com/-sMcOp-KyYUI/VjtDPR6f1VI/AAAAAAAAiBs/AUGeDnAbWmI/s1600/1338614bf6bda949333801c917d9e988.gif

/4.bp.blogspot.com/-FxdtsBfSXx4/VjtDP23S_fI/AAAAAAAAiC0/AuebzQdPd3Y/s1600/9080607321ab98fa3e70dd24b2513a20%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

/2.bp.blogspot.com/-P5otrHI1RXA/VjtDQyzPqII/AAAAAAAAiCs/HcVcf4H6k34/s1600/animation3%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

/1.bp.blogspot.com/-hOKwIARc0og/VjtDRH4QLmI/AAAAAAAAiCw/Ys1vMVHy5F0/s1600/e95a921638100a6e21b3143002d05a0f%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.jpg

/2.bp.blogspot.com/-byt7TPCRU0g/VjtDR9PKTpI/AAAAAAAAiD4/iuznV3qDmNM/s1600/free-preloaders1.gif

/2.bp.blogspot.com/-j4pZvsYffXg/VjtDSWqy-6I/AAAAAAAAiEY/vVa-t8Qbdkk/s1600/gear.gif

/1.bp.blogspot.com/-1IaURx_Pr9o/VjtDSdPGI-I/AAAAAAAAiD0/43DI6vgPb08/s1600/loading%2B%25281%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

/1.bp.blogspot.com/-K_flPsge4v4/VjtDTW8glKI/AAAAAAAAiEs/Ws13-xYpgd4/s1600/loading%2B%25282%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

/4.bp.blogspot.com/-3-2lmFUorVA/VjtDTap1tpI/AAAAAAAAiEc/yebArfNyXVc/s1600/loading%2B%25283%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


/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/-mi47tJm0jZ8/VjtDUEcPRxI/AAAAAAAAiEA/lbnR-JT87GQ/s1600/preloader%2B%25281%2529.gif

/3.bp.blogspot.com/-6zmnUH8VwGA/VjtDUDJURVI/AAAAAAAAiEU/QSt4tzWhBlM/s1600/preloader%2B%25282%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


/1.bp.blogspot.com/-00HPLuClFMs/VjtDUru56wI/AAAAAAAAiEQ/A3Qta1QFFw4/s1600/preloader%2B%25284%2529.gif

/1.bp.blogspot.com/-1DAaJ_s8oxs/VjtDQahIrEI/AAAAAAAAiEw/sofg8c4DlJA/s1600/Preloader_8%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




Дальше находим код и после него вставляем следующий код:

 

Если хотите, чтобы виджет работал на всех страницах, а не только на главной, в таком случае не копируйте код выделенный оранжевым цветом.

И завершающий этап, ищем код перед которым пристраиваем следующий код:


Сохраняем шаблон и проверяем, как работает ваш новый виджет.

Видео инструкция:



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

Отправить комментарий