Cara Memasang Load More di Blog: Mengubah Next Post Jadi 'Selanjutnya'

Baca Juga

Load more artinya "tampilkan lebih". Maksudnya adalah tampilkan posting selanjutnya. Di template bawaan Blogger, biasanya berupa link text "Older Post" atau "Next Post".

Kita bisa ubah itu dengan cara memasang kode Load more. Kode CSS dan JavaScript ini akan mengubah "Next Post" atau "Older Post" jadi "Selanjutnya" atau kata lain --"Berikutnya", "Posting Sebelumnya", dll.

Demonya di blog ini, baik di halaman depan maupun halaman label.

Desain model gini disebutnya "Infinite Scroll" atau "Gulir Tak Terbatas". Infinite Scroll adalah plugin JavaScript yang secara otomatis menambahkan halaman berikutnya, menyelamatkan pengguna dari pemuatan halaman penuh. 

Anda mungkin pernah melihatnya digunakan di seluruh web. ... Itu adalah pekerjaan terobosan pengembangan front-end, memberikan pengembang web pengalaman mutakhir melalui plugin jQuery yang ramah pengguna namun kuat.

Cara Memasang Load More di Blog

Ini dia Cara Memasang Load More: Mengubah Next Post Jadi 'Selanjutnya'

1. Tema > Edit HTML

2. Copas kode berikut ini di atas kode </b:skin>

.techirshloader {padding:15px;font-weight:700;margin-bottom:10px;text-align:center;background:#ffffff}
.techirshloader a{text-transform:uppercase}
.techirshloader a {text-decoration: none;width: 100%;color: #f00;border: solid 2px #f00;padding: 5px 5px; font-size: 14px;font-weight: 600;}
.techirshloader a:hover{color:#fbfbfb;background: #f00}

3. Copas kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Loadmore
!function(i){function e(){t||(t=!0,n?(o.find("a").hide(),o.find("img").show(),i.ajax(n,{dataType:"html"}).done(function(e){e=i("<div></div>").append(e.replace(l,""));var a=e.find("a.blog-pager-older-link");a?n=a.attr("href"):(n="",o.hide()),e=e.find(d).children(),i(d).append(e),window._gaq&&window._gaq.push(["_trackPageview",n]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&i.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js"),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),o.find("img").hide(),o.find("a").show(),t=!1})):o.hide())}function a(){var i=Math.max(r.height(),s.height(),document.documentElement.clientHeight),a=r.scrollTop()+r.height();0>i-a&&e()}var n="",o=null,d="div.blog-posts",t=!1,r=i(window),s=i(document),l=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;i(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(n=i("a.blog-pager-older-link").attr("href"))){var d=i('<a href="javascript:;" >SELANJUTNYA</a>');d.click(e);var t=i('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRirRUWDzaAhKapHE9VGOUXyy2X9qyRV3THp4pB5vXErDSLaqwjCmi6B6GH8Etz7g3rtFakZ5nGMv66WU7JWesCJNxJ5Ag04eMZETh6my2QBrRFtt1T3o6KorEu7YHeN9ZKGh63dpkZxm-/s1600/memuat.gif" style="display: none;">');r.scroll(a),o=i('<div class="techirshloader"></div>'),o.append(d),o.append(t),o.insertBefore(i("#blog-pager")),i("#blog-pager").hide()}})}(jQuery);
//]]>
</script>

Kita bisa ubah kata SELANJUTNYA dengan kata lain. 

4. Save! Simpan dan lihat hasilnya.

Itu dia cara memasang load more di Blogger. Infinite Scroll yang mengubah next post ataupun jalaman navigasi nomor/angka menjadi 'Selanjutnya'. Demonya di blog ini, baik di halaman depan maupun halaman label.*