Cara membuat tombol load more di blogger - Biasanya ketika membuka halaman lain dari sebuah blog, khususnya yang berplatform blogger, browser akan melakukan reload atau refresh terlebih dulu sebelum pergi ke halaman yang dituju. Itu merupakan salah satu faktor pemborosan kuota dan waktu bagi pengunjung blog. Setiap artikel yang ada didalam blog adalah artikel download yang harus kita tunggu beberapa detik atau menit. Jadi untuk mengantisipasi dan mempermudah pengunjung blog, maka cara ini lebih efisien.
Kode tombol load more yang akan aku bagikan ini akan memuat halaman artikel berikutnya dari blogger tanpa perlu reload atau refresh lagi. Jadi pengunjung gak perlu habis-habisin kuota lagi, saat browsing di blog sobat. Tapi sebelum itu, ada dua jenis tombol load more yang tersedia berdasarkan event yang dilakukan:
- Auto load on scroll. Halaman berikutnya akan otomatis termuat saat halaman discroll sampai batas akhir sehingga konten baru akan selalu muncul.
- Auto load on click. Pengunjung perlu melakukan klik pada tombol untuk memuat halaman berikutnya.
Tombol load more akan otomatis memuat konten baru ketika pengunjung melakukan event yang ditentukan dan menempelkannya ke bagian terbawah menu navigasi halaman blogger tanpa ada proses reload. Jika sudah paham, silahkan ikuti panduan pembuatannya dibawah ini :
1. Cara Membuat Tombol Load More di Blogger
#1. Buka blogger.
#2. Pilih menu tema > pilih edit html.
#3. Pastikan blog sudah terpasang library jQuery. Tapi, jika belum ada simpan kode berikut dibawah <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>#4. Hapus semua CSS selector dari blog pager yang biasanya diberi nama #blog-pager. Jika ada banyak, pastikan hapus CSS blog pager yang ada di dalam tag kondisional multiple items isMultipleItems. Contohnya seperti ini.
#blog-pager-older-link {...}
#blog-pager-older-link:hover {...}
a.blog-pager-older-link {...}
a.blog-pager-older-link:hover {...}
#5. Lalu ganti semuanya dengan kode CSS ini.
/* Tombol Load More di Blogspot */
#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
#6. Kemudian carilah kode ini.
<b:includable id='nextprev'>#7. Kalau tidak ada carilah kode ini. Pasti ada banyak. Pilihlah yang berada di dalam area widget Blog1.
<b:includable id='postPagination' var='post'>#8. Lalu hapus semua dan ganti dengan kode berikut.Dengan tekan tombol ctrl + f > lalu cari <b:includable id='nextprev'> atau <b:includable id='postPagination' var='post'> ganti isinya seperti di bawah ini.
<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>
Load More adalah tulisan di tombol. Sobat bisa ganti sesukanya.
#9. Simpan script dari tombol load more blogspot ini diatas </body>
2. Keterangan
3. Tambahan
<b:if cond='data:view.isMultipleItems'>
<script> //<![CDATA[
// Load more blogspot
!function(ignielScroll) {
var auto = true; // true atau false
var img = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvOE2NlB4OJMZzUoZ9WPw2RrCcPnmQnhQJvrHq0OD0b2WNleH2bU-Boi6LT82J8TjQhovCQAjyl-rs3OrTbr81UKCP1vU8sEMUEixjVY2M5ObeozJ-nD7jsmVtBqqM5eSSHiio3mmlh6I/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>
2. Keterangan Variable Keterangan var autoPengaturan untuk auto load atau tidak.
true: Postingan berikutnya akan muncul otomatis tanpa perlu klik saat halaman sudah sampai batas akhir.
false: Postingan berikutnya tidak muncul otomatis dan pengunjung perlu melakukan klik pada tombol terlebih dulu. var imgURL dari gambar yang tampil ketika proses loading.
Terakhir simpan template dan lihatlah hasilnya. Load more tanpa refresh ini akan berdampak pada multiple items, yaitu halaman homepage, halaman arsip, halaman pencarian label, dan halaman pencarian berdasarkan query yang dibuat.
var auto true: Postingan berikutnya akan muncul otomatis tanpa perlu klik saat halaman sudah sampai batas akhir.
false: Postingan berikutnya tidak muncul otomatis dan pengunjung perlu melakukan klik pada tombol terlebih dulu.
var imgBaca juga : cara membuat notifikasi blog keren yang membuat blogmu tambah kece. Gak percaya?. Test aja sendiri hehehe.
3. Tambahan
Kalau menu navigasi homepage di template sobat sudah dilengkapi dengan script custom lain seperti navigasi bernomor, maka scriptnya wajib dihapus agar tidak terjadi bentrok atau error. Aku rasa sudah cukup detail dengan artikel kali ini, karena pengaturannya memang tidak banyak. Sobat hanya perlu teliti mencari nama class dan id CSS HTML didalamnya, karena kode setiap template berbeda. Dibutuhkan kesabaran, keikhlasan dan ketelitian tingkat tinggi biar berhasil hehehe.
Mas Galih
Dapatkan Tips Menarik Setiap Harinya!
- Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
- Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
- Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense
0 Response to "Cara Membuat Tombol Load More di Blogger"
Post a Comment
Catatan Untuk Para Jejaker