Cara membuat Infinite Scroll Blogger Tanpa Reload
Assalamualaikum, Kali ini saya akan terangkan tentang Cara membuat Infinite Scroll Blogger Tanpa Reload, Infinite Scroll berfungsi tanpa relode atau refresh page blogger anda.
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.
Seterusnya cari code <b:includable id='nextprev'>...</b:includable> Dan gantikan dengan code ini.
Selanjutnya pasangkan js berikut di atas code /body
Setela selesai memasang semua code di atas silakan save dan lihat hasilnya.
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
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>
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbFZhLAnHzJyOtwlyJWDKARCRSDEtz5HMWipt96qmFo_cQzeXJyUzMfjwXJo7A8mEyoSlSjFA5ILl4mk_Laq0ZoEerG5HxEXGzEqeLR1rVfqDHwPTgT0u9WV81GcDVtpCIX9NY92F1BCQ/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
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
Caution - In the recruitment process, legitimate companies never charge a fee from candidates. If there are companies that charge for interviews, tests, ticket reservations, etc., it is better to avoid them because there are indications of fraud. Do not transfer any payments when applying for a job.
Post a Comment
Post a Comment