Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial ara Membuat Infinite Scroll Responsive di Blogger dengan mudah.
Infinite scroll adalah sebuah script yang berfungsi untuk memanggil postingan lain yang tidak muncul pada homepage blog kalian, postingan lain yang di maksud ialah postingan lama yang tidak muncul pada homepage atau halaman depan blog kalian.
Infinite scroll ini memiliki dua versi yaitu versi manual click dan versi auto load, tapi pada kesempatan ini saya akan membagikan tutorial infinite scroll versi manual click.
Infinite scroll ini sangat saya sarankan sekali untuk di pasang di blog kalian karena sangat pentingnya memberi kenyamanan kepada pengunjung karena pengunjung yang yang ingin scroll kebawah atau mencari artikel kalian tanpa harus ada aksi klik.
Infinite scroll ini pengganti tombol page navigation yang terletak di bawah postingan homepage blog, untuk memasangnya juga sangat mudah. Jika kalian ingin memasang infinite scroll ini kalian bisa ikuti caranya di bawah ini.
Cara Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog
- Buka Blog kalian
- Pilih Tema lalu pilih Edit HTML
- Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>
/* Infinite telatngoding.com */
#blog-pager {
clear:both !important;
padding:2px 0;
text-align: center;
}
#blog-pager-newer-link a {
float:left;
display:block;
background: #ffffff;
}
#blog-pager-older-link a {
float:right;
display:block;
background: #ffffff;
}
.displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a {
font-size: 14px;
padding: 8px 12px;
margin: 2px 3px 2px 0px;
display: inline-block;
color: #000000;
border: 1px solid #000000;
}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover, a.home-link:hover, .displaypageNum a:hover,.showpage a:hover, .pagecurrent {
color: #000000;
border: 1px solid #000000;
}
.showpageOf {
display: none !important;
}
#blog-pager .pages {
border: none;
}
#blog-pager a.home-link {display:none}
#blog-pager {padding:0;margin:20px auto; text-align:center;}
#blog-pager-older-link {float:none; display:block}
#blog-pager-older-link img {max-height:50px}
#blog-pager-older-link a {
background: #1589E3;
color:#fff;
font-size:14px;
font-weight:600;
border-radius:3px;
padding:10px 20px;
display:inline-block;
position:right;
transition:0.3s;
float: right;
border: 1px solid #1a73e8;}
#blog-pager-older-link a:hover {
background:transparent;
border: 1px solid #1589E3;
color: #1589E3;
}
#blog-pager-newer-link a {
background: #1589E3;
float: left;
font-size: 14px;
font-weight: 600;
border-radius: 3px;
padding: 10px 20px;
display: inline-block;
position: left;
transition: 0.3s;
border: 1px solid #1589E3;
color: #fff;
}
#blog-pager-newer-link a:hover {
background:transparent;
border: 1px solid #1589E3;
color: #1589E3;
}- Lanjut salin kode di bawah ini dan letakan di atas kode </body>.
<!-- Lo.ad More Post -->
<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="js-load" href="javascript:;">Artikel Berikutnya</a>',
loading: '<a class="js-load" >Loading...</a><div class="load"></div>',
loaded: '<a class="js-load" href="#" data-text="Loaded! Back To Top">END</a>',
error: '<a class="js-load">Hadeh error!</a>'
}
});
//]]>//</script>
</b:if>
</b:if>
Keterangan :
Silahkan rubah kata - kata di bawah ini sesuai kemauan kalian
- Artikel Berikutnya ( Merupakan pesan yang muncul pada tombol infinite, kalian bisa menggantinya dengan Next Article atau Artikel Selanjutnya )
- Loading ( Merupakan pesan yang muncul ketika sedang memuat artikel selanjutnya )
- END ( Merupakan pesan yang muncul ketika artikel yang di muat sudah mencapai batas )
- Hadeh Error! ( Merupakan pesan yang muncul saat script tidak bekerja, sehingga ada peringatan error )
- Simpan template kalian dan selesai.
Bagiamana sangat mudah bukan untuk tutorial Cara Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog. Jika kalian ada pertanyaan seputar postingan di atas silahkan bertanya melalui kolom komentar di bawah ini, dan terimakasih atas kunjungannya semoga bermanfaat buat kalian semua.