Cara Membuat Infinite Scroll di Blogger Seperti Jalantikus

Jagoandzgn.com - Hallo sahabat blogger kembali lagi di blog Jagoandzgn, untuk tutorial kali ini saya akan membagikan sebuah tutorial bagaimana Cara Membuat Infinite Scroll Post Loading di Blogger Seperti Jalantikus. Apasih maksud dari infinite ini? Maksudnya adalah untuk melihat postingan sebelumnya tanpa perlu berpindah halaman.


Pada umumnya saat membuka halaman page di blog, terutama kamu yang berplatform blogger atau blogspot, browser akan melakukan teload terlebih dahulu untuk pergi kehalaman yang dituju, Nah tujuan dari tutorial ini adalah untuk memuat halaman berikutnya tanpa perlu merefreshnya.

Cara Membuat Infinite Scroll di Blogger Seperti Jalantikus

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Selanjutnya, Cari kode dibawah ini.

<b:includable id='nextprev'>...</b:include>

4. Ganti kode tersebut berserta isinya dengan kode dibawah 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>

5. Cari kode berikut ini </body> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

<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>

6. Cari kode </head> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

<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:&#39;\f0d7&#39;}.loader,.loader:after{height:100%;width:100%}
.loader{position:relative}
.loader:after{position:absolute;top:0;left:0;content:&#39;&#39;;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>

7. Kalau sudah silahkan klik SIMPAN dan Selesai.


Bagaimana mudah bukan untuk tutorial Cara Membuat Infinite Scroll di Blogger Seperti Jalantikus bagi kamu yang masih bingung atau ada pertanyaan lain seputar blogger silahkan komen di kolom komentar dibawah artikel ini.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    0 Komentar

    Posting Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel