Как установить виджет «Загрузить больше сообщений» в Blogger

Если вы являетесь пользователем CMS WordPress, вы можете использовать плагин для создания « Загрузить больше сообщений». В отличие от Blogger CMS, вам необходимо установить некоторый код Javascript и CSS.

В этой статье я предоставлю краткое руководство о том, как легко установить виджет «Загрузить больше сообщений с помощью CSS» в Blogger.

Виджет «Загрузить больше сообщений» в Blogger

1. Войдите в свою учетную запись Blogger — Темы — Изменить HTML.
2. Добавьте код стиля CSS ниже и поместите его прямо перед кодом ]]> </ b:skin> или </style>

/* Tombol Load More */
.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(«/wp-content/uploads/image/svg+xml,«) 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)}}

3. Скопируйте и вставьте приведенный ниже код Javascript и поместите его прямо перед кодом </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:;»>Lihat Artikel Lainnya</a>’,
loading: ‘<a class=»sedang-loading»>Sedang dimuat</a>’,
loaded: ‘<span class=»muatlagi»>Sudah di halaman terakhir</span>’,
error: ‘<a class=»muatlagi»>error!</a>’
}
});
//]]></script>
</b:if></b:if>

4. Если в вашем шаблоне блога используется код с навигацией по страницам.

Тогда сначала нужно удалить код скрипта. Примерно код выглядит как показано ниже, найдите и удалите его.

 

<b:if cond=’data:blog.isMobile == &quot;false&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<!— JAVASCRIPT NAVIGASI HALAMAN BERNOMOR —>
<script>
var perPage=8;
var numPages=6;
var firstText ='<b:switch var=’data:blog.locale’><b:case value=’id’ />Pertama<b:default />First</b:switch>’;
var lastText ='<b:switch var=’data:blog.locale’><b:case value=’id’ />Terakhir<b:default />Last</b:switch>’;
var prevText =’› <b:switch var=’data:blog.locale’><b:case value=’id’ />Sebelumnya<b:default />Prev</b:switch>’;
var nextText ='<b:switch var=’data:blog.locale’><b:case value=’id’ />Selanjutnya<b:default />Next</b:switch> ›’;
var urlactivepage=location.href;
var home_page=»/»;
</script>
<script>
//<![CDATA[
if(numberedPagination==1){
if(typeof firstText==»undefined»)firstText=»First»;if(typeof lastText==»undefined»)lastText=»Last»;var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html=»;pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+=»<span class=’showpageOf’>Page «+currentPageNo+’ of ‘+lastPageNo+»</span>»;var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage==»page»){html+='<span class=»showpage firstpage»><a href=»‘+home_page+'»>’+firstText+'</a></span>’}else{html+='<span class=»displaypageNum firstpage»><a href=»/search/label/’+postLabel+’?&max-results=’+perPage+'»>’+firstText+'</a></span>’}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage==»page»){html+='<span class=»showpage»><a href=»‘+home_page+'»>’+prevText+'</a></span>’}else{html+='<span class=»displaypageNum»><a href=»/search/label/’+postLabel+’?&max-results=’+perPage+'»>’+prevText+'</a></span>’}}else{if(currentPage==»page»){html+='<span class=»displaypageNum»><a href=»#» onclick=»redirectpage(‘+prevNumber+’);return false»>’+prevText+'</a></span>’}else{html+='<span class=»displaypageNum»><a href=»#» onclick=»redirectlabel(‘+prevNumber+’);return false»>’+prevText+'</a></span>’}}}if(pageStart>1){if(currentPage==»page»){html+='<span class=»displaypageNum»><a href=»‘+home_page+'»>1</a></span>’}else{html+='<span class=»displaypageNum»><a href=»/search/label/’+postLabel+’?&max-results=’+perPage+'»>1</a></span>’}}if(pageStart>2){html+=’ … ‘}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class=»pagecurrent»>’+jj+'</span>’}else if(jj==1){if(currentPage==»page»){html+='<span class=»displaypageNum»><a href=»‘+home_page+'»>1</a></span>’}else{html+='<span class=»displaypageNum»><a href=»/search/label/’+postLabel+’?&max-results=’+perPage+'»>1</a></span>’}}else{if(currentPage==»page»){html+='<span class=»displaypageNum»><a href=»#» onclick=»redirectpage(‘+jj+’);return false»>’+jj+'</a></span>’}else{html+='<span class=»displaypageNum»><a href=»#» onclick=»redirectlabel(‘+jj+’);return false»>’+jj+'</a></span>’}}}if(pageEnd<lastPageNo-1){html+=’…’}if(pageEnd<lastPageNo){if(currentPage==»page»){html+='<span class=»displaypageNum»><a href=»#» onclick=»redirectpage(‘+lastPageNo+’);return false»>’+lastPageNo+'</a></span>’}else{html+='<span class=»displaypageNum»><a href=»#» onclick=»redirectlabel(‘+lastPageNo+’);return false»>’+lastPageNo+'</a></span>’}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage==»page»){html+='<span class=»displaypageNum»><a href=»#» onclick=»redirectpage(‘+nextnumber+’);return false»>’+nextText+'</a></span>’}else{html+='<span class=»displaypageNum»><a href=»#» onclick=»redirectlabel(‘+nextnumber+’);return false»>’+nextText+'</a></span>’}}if(currentPageNo<lastPageNo){if(currentPage==»page»){html+='<span class=»displaypageNum lastpage»><a href=»#» onclick=»redirectpage(‘+lastPageNo+’);return false»>’+lastText+'</a></span>’}else{html+='<span class=»displaypageNum lastpage»><a href=»#» onclick=»redirectlabel(‘+lastPageNo+’);return false»>’+lastText+'</a></span>’}}var pageArea=document.getElementsByName(«pageArea»);var blogPager=document.getElementById(«blog-pager»);for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=»}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf(«/search/label/»)!=-1){if(thisUrl.indexOf(«?updated-max»)!=-1){postLabel=thisUrl.substring(thisUrl.indexOf(«/search/label/»)+14,thisUrl.indexOf(«?updated-max»))}else{postLabel=thisUrl.substring(thisUrl.indexOf(«/search/label/»)+14,thisUrl.indexOf(«?&max»))}}if(thisUrl.indexOf(«?q=»)==-1&&thisUrl.indexOf(«.html»)==-1){if(thisUrl.indexOf(«/search/label/»)==-1){currentPage=»page»;if(urlactivepage.indexOf(«#PageNo=»)!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf(«#PageNo=»)+8,urlactivepage.length)}else{currentPageNo=1}document.write(«<script src=»»+home_page+»feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata»></script>»)}else{currentPage=»label»;if(thisUrl.indexOf(«&max-results=»)==-1){perPage=20}if(urlactivepage.indexOf(«#PageNo=»)!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf(«#PageNo=»)+8,urlactivepage.length)}else{currentPageNo=1}document.write(‘<script src=»‘+home_page+’feeds/posts/summary/-/’+postLabel+’?alt=json-in-script&callback=totalcountdata&max-results=1″ ></script>’)}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName(‘head’)[0];var newInclude=document.createElement(‘script’);newInclude.type=’text/javascript’;newInclude.setAttribute(«src»,home_page+»feeds/posts/summary?start-index=»+jsonstart+»&max-results=1&alt=json-in-script&callback=finddatepost»);nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName(‘head’)[0];var newInclude=document.createElement(‘script’);newInclude.type=’text/javascript’;newInclude.setAttribute(«src»,home_page+»feeds/posts/summary/-/»+postLabel+»?start-index=»+jsonstart+»&max-results=1&alt=json-in-script&callback=finddatepost»);nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage==»page»){var pAddress=»/search?updated-max=»+timestamp+»&max-results=»+perPage+»#PageNo=»+noPage}else{var pAddress=»/search/label/»+postLabel+»?updated-max=»+timestamp+»&max-results=»+perPage+»#PageNo=»+noPage}location.href=pAddress}
};
//]]>
</script>
</b:if>
</b:if>
</b:if>

 

5. Если вы сделали всё правилбн, просто сохраните тему.

 

/* Tombol Load More */
.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("/wp-content/uploads/image/svg+xml,") 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)}}

 

/* Tombol Load More */
.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("/wp-content/uploads/image/svg+xml,") 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)}}