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 ialah sebelum ini aku sedang sibuk menciptakan blogger template Sakarepmu. Jika teman sudah melihat template Sakarepmu, teman niscaya tahu bahwa salah satu fitur pada template tersebut ialah 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, kesudahannya aku intip CSS yang digunakan oleh Jalantikus alasannya ialah aku tertarik dengan Infinite scroll miliknya. Setelah coba beberapa kali dengan Javascript, kesudahannya selesai juga Infinite Scroll ala Jalantikus yang berhasil aku gunakan pada template Sakarepmu.
2. Ganti instruksi tersebut beserta isinya, dengan instruksi berikut ini!
3. Cari instruksi </body> atau <!--</body>--></body> kemudian letakkan instruksi javascript berikut ini sempurna diatasnya.
4. Cari instruksi <head> atau </head><!--<head/>--> kemudian letakkan instruksi berikut ini sempurna diatasnya!
Silahkan atur CSS diatas kalau ada yang ingin diubah.
Demo
5. Selesai. Sumber https://www.galihdesign.com/
Namanya juga penasaran, kesudahannya aku intip CSS yang digunakan oleh Jalantikus alasannya ialah aku tertarik dengan Infinite scroll miliknya. Setelah coba beberapa kali dengan Javascript, kesudahannya 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 instruksi berikut ini!
<b:includable id='nextprev'>...</b:include>2. Ganti instruksi tersebut beserta isinya, dengan instruksi 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 instruksi </body> atau <!--</body>--></body> kemudian letakkan instruksi 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 instruksi <head> atau </head><!--<head/>--> kemudian letakkan instruksi 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 kalau ada yang ingin diubah.
Demo
5. Selesai. Sumber https://www.galihdesign.com/