Cara Memasang Tombol Load More Post Ringan di Blogger - SeriesWans

Cara Memasang Tombol Load More Post Ringan di Blogger - Hallo sahabat blogger, sudah hampir seminggu ini saya tidak update artikel, maklum karena ada banyak kegiatan dan pekerjaan di dunia nyata menjelang hari raya idul fitri. sebelum lanjut ke pembahasaan dan tutorialnya. terlebih dahulu saya mengucapkan minal aidzin walfaidzin buat teman-teman muslim di seluruh dunia. oke kita langsung ke topik pembahasannya.

Baca Juga : Cara Memasang Script Lazy Load di Blogger

Sekarang ini kebanyakan template blog maupun wordpress menggunakan page navigation number gunanya untuk berpindah halaman postingan, menurut saya kurang bagus karena menambah tinggi nilai bounce rate. sebagai gantinya kita ganti menggunakan load more post. load more post ini lebih ringan dan dapat mengurangi Bounce Rate blog anda. 

Apa Itu Load More Post ?

Load More Post merupakan tombol yang fungsinya untuk menampilkan postingan berikutnya pada halaman blog. load more post ini juga sebagai pengganti dari Page Navigation Number blogger. dengan load more post kita tidak perlu berpindah ke halaman ketika ingin memuat artikel baru karena fitur load more post ini memuat aritkel yang muncul dan masih ada di halaman tersebut.

Load More Post

Perbedaanya, Page navigation number ini di haruskan berpindah halaman ketika ingin memuat artikel baru. sedangkan Load more post masih tetap di halaman tersebut ketika memuat artikel berikutnya. di bawah ini adalah kelebihan menggunakan Load more post.

Kelebihan Memasang Tombol Load More Post di Blog :

• Menurunkan Bounce Rate Blog
• Mobile Friendly
• Tidak Memakai JQuery
• Tidak Memakai Javascript dan CSS Ekternal
• Mempercepat Loading Blog
• SEO Friendly
• Script sudah di kompres

Nah,itulah beberapa kelebihan dari kita memasang load more post di blog, selanjutnya kita akan lansung ke tutorial pemasangannya.

Baca Juga : Cara Mempercepat Loading Gambar di Blog atau Website

Berikut adalah Cara Memaang Tombol Load More Post Ringan di Blog :

• Masuk terlebih dahulu ke akun Blogger.com
• Pilih Tema atau Template > Edit HTML
• Silahkan cari kode ]]></b:skin>  (untuk memudahkan dalam pencarian kode tersebut, silahkan gunakan tombol CTRL + F)
• Jika sudah ketemu silahkan copy script di bawah ini dan letakan di atas kode tersebut.

/* JS LOAD MORE */
.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);

• Selanjutnya silahkan anda cari kode </body>
• Jika sudah ketemu, silahkan copy script di bawah ini dan letakan di atas kode tersebut.

<!-- 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>

• Terakhir silahkan Simpan Tema dan lihat hasilnya. contohnya anda bisa lihat gambar di bawah ini atau bisa lihat di blog serieswans.com

Load More Post

 

Sedikit tambahan, 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

Baca Juga : 5 Tips dan Cara Mudah Mendapatkan Sitelink Blog dari Google Terbaru 

Mungkin itu saja tutorial kali ini mengenai Cara Mudah Memasang Widget Load More Post dengan Tombol di blogger. jangan lupa berkomentar di bawah postingan ini dan share juga ke teman-teman media sosial anda. agar ilmu yang baru saja anda dapat bisa bermanfaat juga untuk orang lain.

Related Posts