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

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

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

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

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

CSS#loader {
background-color: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhumf5-kjtkiRWdvQzveJa677geHUzR1b0Tx6bgfQJfeWr0OPHbtr3vkEwlj1GZKrHIYb5Esk1qerb8p2aK1vIMrcSUcn3qInS93whsLOEIK8IvfEZZDoENZXI_XgbOgGxDUP-vlFFwyew/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;
}

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

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdfj0HDskYBUPLJzTWERbvrWmbc3nYGGN2lD7E419-Jaf0CDfu7dEvr3qGUGhRHpJdHMbRBZlU5rs4Uftqj0UK0rSldGVFrLuASKkPNmJ8jA_huuxAKG3BWwkcvSEeQnBGXL0NqXQUgeA/s1600/preloader+%25285%2529.gif

 

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBD1lE4wGp3DRteNGZE8wfrZaTlBnY64ELfHUex2M8Q4zuNaJswCbHd9bOnecl7qui58lEWXaOPJWD1moy0fgvJtIe0fCEpyWODHiJT3v5aDZQkn31U3H1zqVjfj3twnCq3p0QPs3AudI/s1600/54f4ca1edced7ed62ba934b4_infinite-gif-preloader.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPcLHcIT2en3xUhBJTlVPApG63mfyqf1wdbvK6F6saI6uWYNLi5AwVAghyphenhyphenGNa3U7P-jivEoi3HaBKpp5urbloPetbAvDaPScrSsa6NDoo9B1qnOJ5jOj_bebeqI4b7RceC7tIEaooyWcQ/s1600/042413_square_loader+%252%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdjdUTbarZpwIfbJHQ7Xg_gMtHqjR8HVJdlj6bhG_i59LMwRgeLqo4yEAl0a_2clsPT7RxZI57ur2dyx6ymMq7aPD7hezn6g8P3_z4UIwADwhwRCGO7q5KCWiDXK9Mn5NBjdyl4QTVH4k/s1600/1338614bf6bda949333801c917d9e988.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOK9ZnLEA7fak6h8_TUzK6Zb7k7sLYKWWY7Dyo2aER4rYt43uOppzwMGNpS1U9jLj1IL4_EnsACVDH87coS7ykkJYLaZIWU_RjfyasU714f0EJvyA7xqKczyTxyVBPlP7MSl5yXCuEutc/s1600/9080607321ab98fa3e70dd24b2513a20+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD8n5wo93GT9wcDtPXoSXgxqgo-NPlVostbQ0kIQy0fld_QvB-_sN7q8LTcEToJkJJjjhuJJuxHCqQ5R9fFlqgCFg1J9ZpeON05Y-mJ4vHGU64vfBSwXUiZezpGmr5UUO1mJ4nakwm0_Y/s1600/animation3+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJvEW5y5kHmKIHM99HIGoe_4Uq4r3NTGWZfKVnof4bKytcFrlP1StkB3sLeNrshKLX_Zotm_AOEZD16Vtg1d2PomwK4-nzILhM7BZVp2-ZJCPOmPAe0H4pmh34tEuIboT-8WRG6QqAjvc/s1600/e95a921638100a6e21b3143002d05a0f+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipov-ip9j3JekkI0Walj9iIDEMCxYNqGQcY8xol3cjhr2zTAaJ5zipcO2ULRrdeaqBKP7CJY7kRxeN9dNjV5ymtQ-Rm7KFs5wnSWNg2JQC6Kf9Mcf6vtLsq16_6bq_r8qZaUyLLEvSFhk/s1600/free-preloaders1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71T-b04eoNFWheSQOcDAvMyGOma7PsboGNxFw8Bbqz6pP4t4eucB4bVtIm_QMqsgb-dRzeb8asuw1jJoWkjCEwUKZ77mhDFAiS1Ho7IL1JvruxkopVhd8VXMGh7hIY_tAsi6Y7av6nZo/s1600/gear.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_pE-gh4urAY8dnsPb7m0c34Yjs1ZS8PMipIZdWw-S6kxGzfh6M0QED4-SOWixovjqdufCQz68at8B0S5ChwXG-xTLF8_XW14hC0niceO016hhigaiz3K2aKHeI3E2xfQKBdyvUOwgcM/s1600/loading+%25281%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8QqqiLXsh6Ebr07Nzgw_yn8rcSgslgUj3neovj3C_1NyepOzoqUbdXze1iLMCzqCXxOCvAKCKIzV5ohrQhkXTKaDV12S-HnUDu_r3kT9TjDKzkyr2rb-OYDFLcWTLTCYyMwXeSD1F4g/s1600/loading+%25282%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCxqYoRt9AiT0O-w9td3ZQq1q2s1gF_v1OxKF9ZTRh8Q_pbfur2b8iujR0qNkQLEJxN7F-knfEvx793rHLkxz_UuyzAmFzDvqcB3MQwaiqXctvPFnPesJGQMrIp72TBMCY5Vc-jALY3JQ/s1600/loading+%25283%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZheKF2bLu1iuuEJ8VLLh1yQ7G59CZTFT7yspLikqJLHP377YP1-C1hkgPCuK4rRWHR6zgzPgX4uBV9O64-DjC06AswUddAJhcHgrV76TgabVMvcMJcBJsbZ0AJmPX4kVnlYNwSQX2g4/s1600/logo_dark_nobg+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYi5pRDDH4xD8NI7t_CE9f-rsWDx-gqhTBzVxYor3Nbxdr87Wb8FG5e4miQebdinUm7vjHFIe233O3vcr3W7jBgnvBBd1LTEVU0fY8rcW0Gh75bf_MZvgz2MSbblay6VC3jKpUEGN6NA/s1600/preloader+%25281%2529.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoMfvd5DSz3kZ77Qtlc9DaolEkAum8gjj6G1wN_EMJbQWzYyTcCLcUT-pOKFwSqv-G2WHbbsiTrXEg83nFHBwUkaDTztTVsi-s1dDQpBAIw2gm76SBPx1nqg-zyHKB1aznhpWI8atYEHM/s1600/preloader+%25282%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDjA6KhJB6eZj6dsh8GKBUe_mYhgfdlpyFJPp1WxzwYbETVBhS22D-aDMwa5tAd3bSh6yPpZ0HT4ZxCIuY2jlz3S6Ro1cMh2stCCNpQ5m7ktugaNi2bcUnGroQC0pKgdST9b7soyGGLeE/s1600/preloader+%25284%2529.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1q-TDOzKQdL-n8cleqAC82B_dUqd2s9nfQAcuVnqssifRHx50QrJHo2rte3nXb-9h1i04Cgu2mrplwEmpvb9A_RPmWXQxzFISQDSMWxSsAZmBV0s3b-NwRR7v8ic54VihEIlffzUsGWI/s1600/Preloader_8+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9wR94CbE4nrcoHFKxJK2UgbVFN7UZ9yjL1rSe8p6jMC_TOFZQkCi1yhng-59x23INPYgwdrSTivSDhllBJzbwaS_Wop3t_so7TUlvX094ypoNc0P-ervY4e9M1ap7MMv0enNqBFGS430/s1600/Preloader_10+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

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

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

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

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

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

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

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

Mark Korvin января 30, 2024 Коммент.

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

Facebook X Vkontakte

Рекомендуем