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

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

Blogger и другие платформы, устанавливаем на сайт - блог анимацию всплывающую при загрузке страниц.

Доброго времени суток дорогие посетители нашего сайта. Самые важные разделы для работы с blogger мы с вами проштудировали. Теперь можно перейти и к полезному и в тоже время красивому. Наверняка вы порой замечали, что при заходе на некоторые сайты - блоги перед их загрузкой на вашем мониторе появлялась небольшая анимация и длилась она ровно столько, сколько нужно сайту - блогу, чтобы полностью загрузить открываемую страницу. То есть пока все его компоненты не подгрузятся перед вами будет извиваться определенный анимационный объект. Понятно, что сделано это не только для красоты, но и для того, чтобы посетитель видел перед собой сразу все компоненты сайты, а не по отдельности каждый из них. К тому же подобный виджет показывает, что сайт - блог у вас более чем профессиональный. Чем лучше дизайн, тем больше доверия.

Пример анимации можно увидеть на нашем тестовом блоге. Анимация в виде вращающегося кубика-рубика. 

Для установки виджета preloader вам нужно перейти в раздел Шаблон - Изменить HTML найти код ]]></b:skin> и перед ним вставить следующий код:

#loader {
background-color: #fff;
background-image: url(http://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;
}

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

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

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

http://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

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

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

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

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

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

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

http://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

http://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

http://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


http://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


http://2.bp.blogspot.com/-mi47tJm0jZ8/VjtDUEcPRxI/AAAAAAAAiEA/lbnR-JT87GQ/s1600/preloader%2B%25281%2529.gif

http://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


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

http://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


http://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




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

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='loader'/>
  </b:if>

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

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

<script type='text/javascript'>//<![CDATA[
// Loader
$(window).bind("load",function(){$("#loader").fadeOut(1e3)});
//]]>
</script>

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

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



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

Рекомендуем

2 Коммент.

avatar
Сергей Дихтяренко
декабря 25, 2021

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

Ответить
avatar
Mark Korvin
декабря 27, 2021

.blogger-gear, .overview-sspe {
background-image: url('ССЫЛКАНАКАРТИНКУ') !important;
height: 90px !important;
width: 125px !important;
}

Ответить