Cara Membuat Tombol Load More Postingan di Blogger

Jagoandzgn.com - Didalam sebuah halaman utama blogger, biasanya ketika kita membuka halaman lain dari sebuah blog terkhusus yang berplatform Blogger (Blogspot) akan melakukan reload / refresh terlebih dahulu sebelum melanjutkan halaman yang lain. Nah, pada kali ini saya akan membagikan script yang akan memuat halaman berikutnya tanpa mereload terlebih dahulu. Sekarang kebanyan template menggunakan page navigation gunanya untuk berpindah kehalaman postingan selanjutnya, menurut saya cara tersebut tidak efektif dikarenakan bisa menambah tinggi nilai bounce rate.

Apa Itu Load More ?

Load More adalah sebuah tombol yang berfungsi untuk menampilkan postingan berikutnya pada halaman blog tanpa harus merefresh / relod terlebih dahulu. nah script ini juga menggantikan Page Navigation Number blogger. Perbedaannya, Navigation Number ini diharuskan berpindah halaman ketika ingin memuat artikel baru. Sedangkan Load more post masih tetap dihalaman tersebut memuat artikel berikutnya.

Kelebihan dari Load More

• SEO Friendly
• Menurunkan Bounce Rate
• Tidak menggunakan jQuery
• Tidak memakai Javascript
• Script sudah di Kompres
• Mempercepat Loading Blog

Cara Membuat Tombol Load More Postingan di Blogger

1. Silahkan login terlebih dahulu ke Blogger.com dengan menggunakan Gmail.

2. Selanjutnya silahkan pilih menu TEMA > Edit HTML
3. Silahkan cari kode ]]></b:skin> ( Untuk mempermudah pencarian silahkan gunakan tombol CTRL + F )
4. Copy kode dibawah ini dan pastekan tepat DIATAS kode tersebut.

/* JS LOAD MORE JAGOANDZGN */
.js-load{
display:inline-block;
width:100%;
padding:15px;
box-sizing:border-box;
background:linear-gradient(45deg,#3b8d99 ,#6b6b83 ,#aa4b6b);
color:#fff!important;
font-size:16px;
margin:0;
border-radius: 15px;}
box-shadow: 0 1px 3px rgba(0,0,0,0.3);

Anda juga bisa mengganti warna backgroundnya  dengan mengganti kode warna #3b8d99 ,#6b6b83 ,#aa4b6b dan menggantinya dengan kode warna yang anda sukai. tak hanya itu anda juga bisa merubah dan mengkreasikan kata-kata pada kode java script seperti Load More, Loading, Loaded, Back To Top, Hadeh Error. dengan kata-kata sesuka hati anda.

5. Selanjutnya, silahkan kamu copy dan pastekan kode dibawah ini tepat DIATAS kode </body>

<!-- Load More Post -->
<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="js-load" href="javascript:;">Load More  <i aria-hidden="true" class="fas fa-angle-down"></i></a>',
loading: '<a class="js-load" >Loading...</a><div class="load"></div>',
loaded: '<a class="js-load" href="#" data-text="Loaded! Back To Top">Back To Top  <i class="fas fa-angle-up"></i></a>',
error: '<a class="js-load">Hadeh error!</a>'
}
});
//]]>//</script>
</b:if>
</b:if>

6. Kalau sudah klik SIMPAN dan lihat hasilnya.

Kalau belum bisa juga, silahkan kamu hapus kode Page Navigation Number untuk tutorialnya silahkan kamu cari digoogle, Mungkin hanya itu saja yang bisa saya share tentang Cara Membuat Tombol Load More Postingan di Blogger, Terima kasih.