Cara membuat Infinite Scroll Blogger Tanpa Reload - Onet4u Tech
Dark
News Update
Loading...

Cara membuat Infinite Scroll Blogger Tanpa Reload

Cara membuat Infinite Scroll Blogger Tanpa Reload
Also Read
Assalamualaikum, Kali ini saya akan terangkan tentang Cara membuat Infinite Scroll Blogger Tanpa Reload, Infinite Scroll berfungsi tanpa relode atau refresh page blogger anda.
Cara membuat Infinite Scroll Blogger Tanpa Reload

Sebelum kita ke tutorialnya, saya ingatkan Infinite Scroll ini menggunakan jqury 3.3.1 so sekiranya anda belum memasangnya, saya ingatkan untuk memasangnya dahulu.
Pasangkan di atas </head> atau di atass </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>. 

Baiklah kia teruskan ke cara pemasangan infinite scroll blogger.

Pertama anda hendakla memadam/menghapus semua code #blog-pager yang ada di blogger anda dan mengantikanya dengan code css berikut.

 
 /* Infinite Scroll Navigation */
#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:#008c5f; 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 {background:#ed4044} 

Seterusnya cari code <b:includable id='nextprev'>...</b:includable> Dan gantikan dengan code 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> 

Selanjutnya pasangkan js berikut di atas code /body

  
<b:if cond='data:view.isMultipleItems'><b:if cond='data:view.isMultipleItems'>
  <script> //<![CDATA[
  // Infinite Scroll Blogger
  !function(ignielScroll) {
    var auto = false; // true atau false , jika true akan muncul otomatis jika sudah akhir halaman
    var img = 'https://3.bp.blogspot.com/-cqUhnTmDUbo/XGzfj9XF2DI/AAAAAAAAAXc/yoE3CcLYUP8ooNJoC2pEAbr381xEezn7gCLcBGAs/s1600/kuncisiana-loading.gif';
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('B a=["\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e","\\I\\t\\c\\d\\f\\i\\g\\d\\k\\l\\k","\\e\\b\\D\\d\\G\\b","\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\j\\b\\U\\b\\e\\i\\c\\h\\j\\w","\\y\\h\\j\\p","\\n\\c\\h\\n\\w","\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\d\\c\\p\\b\\e\\i\\c\\h\\j\\w\\F\\m","\\r\\e\\b\\y","\\c\\b\\j\\f\\l\\r","\\I\\g\\d\\k\\l","\\s\\p\\h\\G\\u\\s\\C\\p\\h\\G\\u","\\r\\l\\D\\c","\\m\\g\\g\\b\\j\\p","\\n\\c\\d\\j\\b","\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\d\\c\\p\\b\\e\\i\\c\\h\\j\\w","\\f\\b\\l","\\s\\k\\g\\m\\j\\u\\s\\h\\D\\f\\F\\k\\e\\n\\P\\J","\\J\\C\\u\\s\\C\\k\\g\\m\\j\\u","\\e\\b\\g\\c\\m\\n\\b\\Y\\h\\l\\r","\\d\\j","\\k\\n\\e\\d\\c\\c\\F\\e\\b\\k\\h\\O\\b","\\k\\n\\e\\d\\c\\c\\N\\d\\g","\\r\\b\\h\\f\\r\\l","\\l\\d\\g","\\d\\y\\y\\k\\b\\l","\\l\\e\\h\\f\\f\\b\\e"];B q=o(a[0]),K=o(a[1]),z=L;q[a[4]](a[3])[a[2]](),q[a[19]](a[5],a[6],E(){1c o[a[15]](x[a[7]],{},E(A){B H=o(A)[a[4]](a[9])[a[8]]?o(A):o(a[10]);K[a[12]](H[a[4]](a[1])[a[11]]()),q[a[11]](H[a[4]](a[14])[a[13]]());z=L},a[11]),o(x)[a[18]](a[16]+Z+a[17]),!1});M(1a){$(1b)[a[19]](a[W],E(){M(!z&&($(x)[a[V]]()+$(x)[a[R]]())>=q[a[Q]]()[a[S]]){q[a[4]](a[6])[a[T]](a[5]);z=X}})}',62,75,'||||||||||_0x143a|x65|x6C|x6F|x72|x67|x70|x69|x2D|x6E|x73|x74|x61|x63|ignielScroll|x64|pager|x68|x3C|x62|x3E|x23|x6B|this|x66|loading|_0x5348x4|var|x2F|x6D|function|x20|x76|_0x5348x5|x2E|x22|post|false|if|x54|x7A|x3D|24|22|23|25|x77|21|20|true|x57|img|||||||||||auto|window|return'.split('|'),0,{}));
  }(jQuery);
  //]]> </script>
</b:if>

Setela selesai memasang semua code di atas silakan save dan lihat hasilnya.

Info
Suka saya ingatkan, sebelum melakukan pengeditan template anda, silakan buat backup yaa , agar template anda selamat sekiranya mengalami error semasa proses pengeditan template

Baiklah sampai di sini sahaja posting saya tentang Cara membuat Infinite Scroll Blogger Tanpa Reload, sekiranya anda ada soalan silakan ytinggalkan comment anda di ruangan comment. Wsalam
dottycat
“Don’t try to plan everything out to the very last detail. I’m a big believer in just getting it out there: create a minimal viable product or website, launch it, and get feedback.”

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel