✔ Cara Menciptakan Halaman Berikutnya Tanpa Loading Di Blogger
Jika Biasanya saat pengunjung membuka halaman selanjutnya, terutama pada bab homepage halaman blogger, browser akan reload atau refresh terlebih dahulu sebelum halaman yang di tuju terbuka. Nah pada kesempatan kali ini aku akan membuatkan tutorial cara memuat halaman berikutnya pada blogger tidak loading.
Membuat Halaman berikutnya pada blogger tanpa loading dalam istilah blogger biasa di sebut dengan istilah Infinite Scroll Blogger. Nah jadi Infinite scroll ini bertujuan memuat halaman selanjutnya pada blogger tanpa ada proses reload atau loading terlebih dahulu.
Makara dengan memasang infinite scroll di blogger akan menciptakan pengunjung betah menjelajah artikel teman-teman, alasannya yakni untuk membuka halaman selanjutnya browser tidak akan reload.
Cara Membuat Halaman Selanjutnya Tanpa Reload (Infinite Scroll Blogger)
Pertama. pastikan blog sudah memasang librabry jQuery pada template. Jika memang belum ada simpan arahan di bawah ini sesudah arahan <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>Kedua. Sebelumya hapus terlebih dahulu semua arahan CSS selector. arahan ini di beri tanda dengan #blog-pager. Silahkan teman-teman hapus semua CSS blog pager yang berada di dalam tag kondisionl isMultipleItems. Contohnya kaya di bawah ini.
#blog-pager-older-link {...}
#blog-pager-older-link:hover {...}
a.blog-pager-older-link {...}
a.blog-pager-older-link:hover {...}Ganti semua arahan blog pager tersebut dengan CSS ini.
/* 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}Ketiga. Cari arahan menyerupai berikut
<b:includable id='nextprev'>kalau tidak ketemu coba dengan arahan di bawah ini. Jika ada banyak pilih arahan tersebut yang berada di dalam widget Blog1.
<b:includable id='postPagination' var='post'>Selanjutnya Hapus arahan tersebut dan gantikan dengan arahan 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>
Keempat. Simpan script infinite scroll blogger berikut di atas arahan </body>
<b:if cond='data:view.isMultipleItems'>
<script> //<![CDATA[
// Infinite Scroll Blogger
!function(ignielScroll) {
var auto = true; // true atau false
var img = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5xflprhHd28brBViF2vCgIqGzyut3uwW3ZoNpEAl6mmnGWLl0r0gFLl0X3tEUsc3BsXcHTccI71F-c1wUQOA5CukYwX6-2vW6FO8mctCQfmGvKVxIB-Guwjpd9nsU-HxqfzwsRlkRB6jT/s1600/igniel-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>Perhatikan pada arahan var auto yang aku tandai di atas. Silahkan teman-teman pilih salah satu true atau false. True artinya postingan selanjutnya akan di muat secara otomatis tanpa di klik kalau halaman sudah hingga bawah. Sedangkan untuk False, postingan selanjutnya akan di muat saat pengunjung mengklik pada tombol.
Perhatian
Dalam menciptakan halaman berikutnya tanpa Loading di Blogger, yang perlu diperhatikan yakni Jika di template teman-teman di lengkapi juga dengan script costum lain pada tombol navigasi menyerupai navigasi bernomor atau tombol navigasi dengan Judul postingan, maka lebih baik scriptnya di hapus terlebih dahulu biar tidak terjadi bentrok ataupun menciptakan beban loading lebih berat. Sumber http://www.masigun.com
0 Response to "✔ Cara Menciptakan Halaman Berikutnya Tanpa Loading Di Blogger"
Posting Komentar