Бесконечная прокрутка для Блоггер

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

Код прокрутки с кнопкой нашла на зарубежном сайте. Установка не сложная, но добавлять код нужно в шаблон. 

Если у вас установлена постраничная навигация, то её нужно удалить. Постраничная навигация - виджет с цифрами, нажимая на которые можно перелистывать страницы.

Выглядит гаджет так (цвет кнопки и текста изменён) :

Установка кода

Заходим в Тему — Изменить HTML.

Находим тег ]]></b:skin> и выше него добавляет код:

.sedang-loading,.muatlagi{background-color:#fff;font-size: 16px;font-weight: bold;margin: 0px auto;padding: 7px 15px;text-align: center;white-space: nowrap;border-radius: 25px;box-shadow: 0 5px 4px rgba(0,0,0,0.05);border: 1px solid #00000012;} a.sedang-loading,a.muatlagi{color:#000} .sedang-loading:after{width: 14px;height: 14px;margin-left: 10px;vertical-align: -2px;display: inline-block;animation: wansSpin .75s linear infinite normal;-webkit-animation: wansSpin .75s linear infinite normal;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z' fill='%23aaa'></path></svg>") center no-repeat;content: '';} .muatlagi:hover,.sedang-loading:hover{box-shadow:-1px 9px 11px 0px rgba(0,0,0,0.05)} @keyframes wansSpin {from {transform:rotate(0deg)}to {transform:rotate(360deg)}} @-webkit-keyframes wansSpin {from { -webkit-transform: rotate(0deg)} to { -webkit-transform:rotate(360deg)}}

Красным в коде выделила цвет шрифта.

Оранжевым — цвет кнопки.

Зелёным — размер шрифта.

Второй код добавляем выше тега </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script>//<![CDATA[ !function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);var infinite_scroll = new InfiniteScroll({ type: 0, target: { posts: '.blog-posts', post: '.post-outer', anchors: '.blog-pager', anchor: '.blog-pager-older-link' }, text: { load: '<a class="muatlagi" href="javascript:;">Другие статьи</a>', loading: '<a class="sedang-loading">Загрузка</a>', loaded: '<span class="muatlagi">Другие статьи</span>', error: '<a class="muatlagi">error!</a>' } }); //]]></script> </b:if></b:if>

Синим цветом в коде отметила текст на кнопке, можно поменять на свой.