Эффект загрузки страницы Блоггер

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

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

Загрузка страницы

Кодов в сети нашла много, но на блог не все встали. Код добавляем в шаблоне перед тегом </body>. Как быстро найти нужное место в шаблоне, читаем на этой странице.

Код:

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('Ваша картинка') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Разберём код:
Цвет фона — отмечен красным.
Картинку вставляем свою или предложенную мной ниже. Куда вставлять — помечено синим цветом.

Какие картинки можно вставить — небольшую анимацию(gif), заливаем на любой фотохостинг, берём адрес картинки и добавляем в код. Как вариант, можно закачать в редакторе самого Блоггера, скопировать адрес и удалить картинку из редактора.
Фон загрузки изначально чёрный — если захотите оставить такой, то картинки ищем на прозрачном или чёрном фоне. 
Ниже 68 картинок с адресами, просто берёте адрес понравившейся и вставляем в код:

1. https://i.yapx.ru/EuIf8.gif
2. https://i.yapx.ru/EuIf9.gif
3. https://i.yapx.ru/EuIgA.gif 
4. https://i.yapx.ru/EuIgB.gif
5. https://i.yapx.ru/EuIgC.gif
6. https://i.yapx.ru/EuIgD.gif
7. https://i.yapx.ru/EuIgE.gif
8. https://i.yapx.ru/EuIgF.gif
9. https://i.yapx.ru/EuIgG.gif
10. https://i.yapx.ru/EuIgJ.gif
11. https://i.yapx.ru/EuIgI.gif
12. https://i.yapx.ru/EuIgM.gif
13. https://i.yapx.ru/EuIgN.gif
14. https://i.yapx.ru/EuIgO.gif
15. https://i.yapx.ru/EuIgK.gif
16. https://i.yapx.ru/EuIgL.gif
17. https://i.yapx.ru/EuIgP.gif
18. https://i.yapx.ru/EuIgQ.gif
19. https://i.yapx.ru/EuIgR.gif
20. https://i.yapx.ru/EuIgS.gif
21. https://i.yapx.ru/EuIgT.gif
22. https://i.yapx.ru/EuIgU.gif
23. https://i.yapx.ru/EuIgV.gif
24. https://i.yapx.ru/EuIgY.gif
25. https://i.yapx.ru/EuIgi.gif
26. https://i.yapx.ru/EuIgZ.gif
27. https://i.yapx.ru/EuIgd.gif
28. https://i.yapx.ru/EuIge.gif
29. https://i.yapx.ru/EuIgf.gif
30. https://i.yapx.ru/EuIgg.gif

1. https://i.yapx.ru/EuIgy.gif
2. https://i.yapx.ru/EuIgq.gif
3. https://i.yapx.ru/EuIgo.gif
4. https://i.yapx.ru/EuIgn.gif
5. https://i.yapx.ru/EuIgj.gif
6. https://i.yapx.ru/EuIg6.gif
7. https://i.yapx.ru/EuIg5.gif
8. https://i.yapx.ru/EuIg3.gif
9. https://i.yapx.ru/EuIg2.gif
10. https://i.yapx.ru/EuIg1.gif
11. https://i.yapx.ru/EuIg0.gif
12. https://i.yapx.ru/EuIgz.gif
13. https://i.yapx.ru/EuIg8.gif
14. https://i.yapx.ru/EuIgw.gif
15. https://i.yapx.ru/EuIgv.gif
16. https://i.yapx.ru/EuIg7.gif
17. https://i.yapx.ru/EuIgu.gif
18. https://i.yapx.ru/EuIiF.gif
19. https://i.yapx.ru/EuIiE.gif
20. https://i.yapx.ru/EuIiD.gif
21. https://i.yapx.ru/EuIiA.gif
22. https://i.yapx.ru/EuIg9.gif
23. https://i.yapx.ru/EuIic.gif
24. https://i.yapx.ru/EuIgr.gif
25. https://i.yapx.ru/EuIiK.gif
26. https://i.yapx.ru/EuIiG.gif
27. https://i.yapx.ru/EuIiZ.gif
28. https://i.yapx.ru/EuIiX.gif
29. https://i.yapx.ru/EuIiT.gif
30. https://i.yapx.ru/EuIiP.gif
31. https://i.yapx.ru/EuIiN.gif
32. https://i.yapx.ru/EuIiL.gif
33. https://i.yapx.ru/EuIic.gif
34. https://i.yapx.ru/EuIie.gif
35. https://i.yapx.ru/EuIif.gif
36. https://i.yapx.ru/EuIii.gif
37. https://i.yapx.ru/EuIij.gif
38. https://i.yapx.ru/EuIin.gif

Где ещё можно поискать картинки загрузки
Сайты с готовыми картинками-загрузками:

• https://icons8.com/preloaders/ru/free - есть бесплатные.
• https://loading.io/ - нужна регистрация, картинки со значком CCO бесплатные.
• https://mentalized.net/activity-indicators/ - несколько штук, которые можно скачать бесплатно.

Генераторы:

• http://ajaxload.info/
• http://loadergenerator.com/pulsate
• http://www.loadinfo.net/
• http://loadinggif.com/
• http://loadingapng.com/