Бесконечная прокрутка для Блоггер
Код прокрутки с кнопкой нашла на зарубежном сайте. Установка не сложная, но добавлять код нужно в шаблон.
Если у вас установлена постраничная навигация, то её нужно удалить. Постраничная навигация - виджет с цифрами, нажимая на которые можно перелистывать страницы.
Выглядит гаджет так (цвет кнопки и текста изменён) :
Установка кода
Заходим в Тему — Изменить 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)}}
Красным в коде выделила цвет шрифта.
Оранжевым — цвет кнопки.
Зелёным — размер шрифта.
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'>
<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>
Синим цветом в коде отметила текст на кнопке, можно поменять на свой.
Уточните вопрос. Может я не так поняла. Посмотрела на ваш сайт и сделала единственный вывод. Три статьи короткие, сработала ссылка ссылка Читать дальше, а в других — нет. У меня на сайте стоит скрипт автоматической вставки ссылки "читать далее". Иногда, в некоторых сообщениях он не срабатывает и приходиться редактировать, ставить родной, тот который стоит в редакторе Блоггера. Ищите проблему в этом направлении: либо не сработал скрипт, если он у вас стоит, либо если ставите самостоятельно, забыли его нажать.
ОтветитьУдалитьЕсли вопрос задан не про эту тему, уточните о чём речь.