bergabung di grup telegram kami

membuat infinite scroll di template viotoko

membuat infinite scroll di template viotoko
membuat infinite scroll di template viotoko

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat infinite scroll di template viotoko.

tutorial ini di reguest oleh Oytsarp via email, buat kalian yang ingin reguest tutorial bisa berkomentar di forum atau mengirim pesan via email melalui halaman kontak. jika memungkinkan akan kami buatkan di masa mendatang.

infinite scroll di template viotoko
reguest oleh Oytsarp

ada 2 jenis infinite scroll yang bisa kalian gunakan.

  1. otomatis scrol, halaman berikutnya akan termuat otomatis saat ada aktifitas scrol.
  2. manual klik, pengunjung harus melakukan klik pada tombol untuk memuat halaman berikutnya.

dan cara ini tidak hanya untuk pengguna template viotoko saja, yang menggunakan template lain juga bisa menerapkan cara ini, ok buat kalian yang ingin mencobanya mari simak caranya di bawah ini.

Cara Membuat Infinite Scroll Di Template Viotoko

sebelum memulai pastikan untuk membackup template kalian dulu, karena jika terjadi kesalahan bisa mengembalikannya lagi.

sebelumnnya saya juga sudah menguji coba langsung pada template viotoko v.1.4 yang saya dwonload dari internet karena saya tidak punya templatenya, jadi jika ada perbedaan pada kodenya nanti tinggal di sesuaikan saja.

untuk pengguna template lain , pastikan template kalian sudah terpasang jQuery jika belum ada, bisa salin kode di bawah ini dan letakkan di atas kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt; ,untuk pengguna template viotoko tidak perlu ya karena sudah ada terpasang jQuary nya secara internal.

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

silakan masuk ke blogger pilih tema dan edit html dan cari css yang seperti #blog-pager jika sudah ketemu hapus semua css tersebut dan ganti dengan css di bawah ini

#blog-pager a.home-link {display:none}
#blog-pager {padding:0;margin:20px auto; text-align:center;}
#blog-pager-older-link {float:none; display:block}
#blog-pager-older-link img {max-height:50px}
#blog-pager-older-link a {background:#f09800; color:#fff; font-size:14px; font-weight:600; border-radius:3px; padding:10px 20px; display:inline-block; position:relative; transition:0.3s}
#blog-pager-older-link a:hover {opacity:.9}

lanjut cari kode <b:includable id='nextprev'> jika sudah ketemu hapus sampai tag penutupnya </b:includable>, untuk pengguna template lain jika tidak menemukan kode di atas bisa cari kode ini <b:includable id='postPagination' var='post'>

untuk penampakan kode keseluruhan nya seperti di bawah ini pada v.1.4 untuk versi terbarunya saya tidak tau apakah berbeda atau tidak.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <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'><i class='fa fa-arrow-left' aria-hidden='true'></i> Next</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'>Prev <i class='fa fa-arrow-right' aria-hidden='true'></i></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></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>

jika sudah di hapus , silakan ganti dengan kode di bawah ini.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <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'><data:newerPageTitle/></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'>
          Load More
        </a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></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>

dan terakhir salin kode di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isMultipleItems'>
  <script> //<![CDATA[
// Infinite Scroll Blogger
!function(n){var o=n("#blog-pager"),e=n(".blog-posts");o.find("#blog-pager-newer-link").remove(),o.on("click","#blog-pager-older-link a",function(){return n.get(this.href,{},function(l){var i=n(l).find(".post").length?n(l):n("<div></div>");e.append(i.find(".blog-posts").html()),o.html(i.find("#blog-pager-older-link").clone()),!1},"html"),n(this).replaceWith('<span><img src="https://1.bp.blogspot.com/-_sByPehjuwI/YGAjJPvjdbI/AAAAAAAACjM/It2TMAzUbjAmO4H_hFHOM4Uuj-hO9qa7gCNcBGAsYHQ/s1600/loadingz.gif"/></span>'),!1})}(jQuery);
  //]]> </script>
</b:if>

ok jadi sekian cara membuat infinite scroll di template viotoko semoga bermanfaat.

Referensi:
www.igniel.com/2018/11/infinite-scroll-blogger.html

Baca juga :

4 komentar



image quote pre code
  1. Mas kalo dipakek di template lain bisa gak mas?
    1. Bisa mas
  2. Request juga mas, cara agar dark mode tidak berpengaruh ke halaman error 404 di template linkmagz
    1. saya pertimbangkan dulu mas
© 2020 - Wendy Code