Cara Membuat Infinite Scroll di Blogger Seperti Jalantikus

Hallo sahabat blogger kembali lagi di blog showdzgn, 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.
Tampilkan Komentar
Sembunyikan Komentar

1 Response to "Cara Membuat Infinite Scroll di Blogger Seperti Jalantikus"

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel