Cara Membuat Infinite Scroll Post Loading pada Blogger ala Jalantikus - Halo sobat, maaf baru sempat buat tutorial lagi karena sebelum ini saya sedang sibuk membuat blogger template Sakarepmu. Jika sobat sudah melihat template Sakarepmu, sobat pasti tahu bahwa salah satu fitur pada template tersebut adalah adanya navigasi postingan yang berbeda daripada template blogger kebanyakan. Ya, template tersebut menggunakan Infinite Scroll Post Loading. Artinya, untuk melihat postingan sebelumnya, kita tidak perlu berpindah halaman.
Namanya juga penasaran, akhirnya saya intip CSS yang dipakai oleh Jalantikus karena saya tertarik dengan Infinite scroll miliknya. Setelah coba beberapa kali dengan Javascript, akhirnya selesai juga Infinite Scroll ala Jalantikus yang berhasil saya gunakan pada template Sakarepmu.
2. Ganti kode tersebut beserta isinya, dengan kode berikut ini!
3. Cari kode </body> atau <!--</body>--></body> lalu letakkan kode javascript berikut ini tepat diatasnya.
4. Cari kode <head> atau </head><!--<head/>--> lalu letakkan kode berikut ini tepat diatasnya!
Silahkan atur CSS diatas jika ada yang ingin diubah.
Demo
5. Selesai.
Namanya juga penasaran, akhirnya saya intip CSS yang dipakai oleh Jalantikus karena saya tertarik dengan Infinite scroll miliknya. Setelah coba beberapa kali dengan Javascript, akhirnya selesai juga Infinite Scroll ala Jalantikus yang berhasil saya gunakan pada template Sakarepmu.
Cara Membuat Infinite Scroll Post Loading
1. Masuk ke Blogger > Tema > Edit HTML lalu cari kode berikut ini!
<b:includable id='nextprev'>...</b:include>2. Ganti kode tersebut beserta isinya, dengan kode berikut ini!
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pagerx'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>MORE</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>MORE</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><i aria-hidden='true' class='fa fa-home'/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>3. Cari kode </body> atau <!--</body>--></body> lalu letakkan kode javascript berikut ini tepat diatasnya.
<b:if cond='!data:view.isSingleItem'>
<script type='text/javascript'>
//<![CDATA[
var $pager = $("#blog-pagerx"),
$posts = $(".blog-posts");
$pager["find"]("#blog-pager-newer-link")["remove"]();
$pager["on"]("click", "#blog-pager-older-link a", function() {
$["get"](this["href"], {}, function(variable_0) {
var variable_1 = $(variable_0)["find"](".post")["length"] ? $(variable_0) : $("<div></div>");
$posts["append"](variable_1["find"](".blog-posts")["html"]());
$pager["html"](variable_1["find"]("#blog-pager-older-link")["clone"]())
}, "html");
$(this)["replaceWith"]("<div class=\"loader icon-jt-simple\"></div>");
return false
})
//]]>
</script>
</b:if>4. Cari kode <head> atau </head><!--<head/>--> lalu letakkan kode berikut ini tepat diatasnya!
<b:if cond='data:view.isMultipleItems'>
<style type='text/css'>
/*Blog Pager*/
#blog-pagerx{position:relative}
#blog-pager-older-link{position:relative;height:90px;width:90px;margin:30px auto;display:block}
.blog-pager-older-link{width:100%;height:100%;text-align:center;font-weight:700;line-height:78px;background-color:#ee4c4c;border-radius:50%;color:#fff;-webkit-transition:.2s;-o-transition:.2s;transition:.2s;display:block}
.blog-pager-older-link:before{position:absolute;top:19px;left:29px;width:32px;height:32px;font-size:32px;color:#fff;font-family:fontawesome;content:'\f0d7'}.loader,.loader:after{height:100%;width:100%}
.loader{position:relative}
.loader:after{position:absolute;top:0;left:0;content:'';border-top:5px solid #ededed;border-right:5px solid #ededed;border-bottom:5px solid #ededed;border-left:5px solid #ffb13d;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:load 1s linear infinite;animation:load 1s linear infinite}
@-webkit-keyframes load{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
</style>
</b:if>Silahkan atur CSS diatas jika ada yang ingin diubah.
Demo
5. Selesai.