Cara Membuat Navigasi Halaman Infinite Scrolling pada Blogger
 Dilihat  Kali
Jumat, 19 Juli 2019

Cara Membuat Navigasi Halaman Infinite Scrolling pada Blogger

Kamu mungkin pernah melihat navigasi "Infinite Scrolling" yang diterapkan oleh Facebook, Twitter atau Google+. Berbeda dengan navigasi "Number" dan "Older / Newer posts", Infinite Scrolling dapat memuat postingan secara dinamis tanpa mereload halaman setiap tombol "Load More" diklik. Tutorial ini akan menunjukkan kepada Kamu bagaimana menerapkan script berbasis Ajax ini yang akan menambahkan Infinite Scrolling, sehingga pengunjung dapat dengan mudah menavigasi tanpa memuat ulang halaman. Mengapa tidak mencobanya di situs Kamu sendiri dan lihat apakah pengunjung situs Kamu akan memberikan nilai positif juga?

Perhatikan! kode yang saya bagikan ini akan berfungsi dengan baik jika di situs website kamu sudah memasang jQuery Library. Untuk Tutorial pemasangan jQuery Library kamu bisa melihat caranya disini.
Sebelum kamu menerapkan navigasi "Infinite Scrolling" ini ada baiknya kamu menghapus terlebih dahulu script navigasi yang kamu gunakan supaya tidak terjadi error. setiap template akan berbeda" letak dan bentuk scriptnya.

Cara Membuat Navigasi Halaman Infinite Scrolling

1. Masuk ke Dashboard Blogger > Tema > Edit HTML lalu cari code dibawah ini.

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

2. Ganti kode di atas 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 + &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>

3. Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; 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 &lt;/head&gt;&lt;!--<head/>--&gt; 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:&#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>

5. Terakhir simpan template yang telah kamu rubah tersebut dan lihat hasilnya.

Penting! Pastikan backup terlebih dahulu template yang kamu gunakan sebelum menerapkan Tutorial di atas untuk menghindari hal-hal yang tidak diinginkan.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.