Cara Menciptakan Infinite Scroll Post Loading Pada Blogger Ala Jalantikus
Cara Membuat Infinite Scroll Post Loading pada Blogger ala Jalantikus - Halo sobat, maaf gres sempat buat tutorial lagi alasannya sebelum ini aku sedang sibuk menciptakan blogger template Sakarepmu. Jika sahabat sudah melihat template Sakarepmu, sahabat niscaya tahu bahwa salah satu fitur pada template tersebut yaitu adanya navigasi postingan yang berbeda daripada template blogger kebanyakan. Ya, template tersebut memakai Infinite Scroll Post Loading. Artinya, untuk melihat postingan sebelumnya, kita tidak perlu berpindah halaman.
Namanya juga penasaran, hasilnya aku intip CSS yang digunakan oleh Jalantikus alasannya aku tertarik dengan Infinite scroll miliknya. Setelah coba beberapa kali dengan Javascript, hasilnya selesai juga Infinite Scroll ala Jalantikus yang berhasil aku gunakan pada template Sakarepmu.
2. Ganti aba-aba tersebut beserta isinya, dengan aba-aba berikut ini!
3. Cari aba-aba </body> atau <!--</body>--></body> kemudian letakkan aba-aba javascript berikut ini sempurna diatasnya.
4. Cari aba-aba <head> atau </head><!--<head/>--> kemudian letakkan aba-aba berikut ini sempurna diatasnya!
Silahkan atur CSS diatas bila ada yang ingin diubah.
Demo
5. Selesai.
Namanya juga penasaran, hasilnya aku intip CSS yang digunakan oleh Jalantikus alasannya aku tertarik dengan Infinite scroll miliknya. Setelah coba beberapa kali dengan Javascript, hasilnya selesai juga Infinite Scroll ala Jalantikus yang berhasil aku gunakan pada template Sakarepmu.
Cara Membuat Infinite Scroll Post Loading
1. Masuk ke Blogger > Tema > Edit HTML kemudian cari aba-aba berikut ini!
<b:includable id='nextprev'>...</b:include>2. Ganti aba-aba tersebut beserta isinya, dengan aba-aba 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 aba-aba </body> atau <!--</body>--></body> kemudian letakkan aba-aba javascript berikut ini sempurna 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 aba-aba <head> atau </head><!--<head/>--> kemudian letakkan aba-aba berikut ini sempurna 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 bila ada yang ingin diubah.
Demo
5. Selesai.
