Cara Membuat Navigasi Load More Di Blog

Cara Membuat Navigasi Load More Di Blog
Sekarang sudah banyak template blogger menggunakan navigasi Load More berbeda dengan yang dulu hanya posting baru posting lama dan seiring waktu para editor template membuat kreasinya dengan page number, load more, dsb untuk memperbagus tampilan template blognya.

Nah pada kesempatan kali ini saya akan membagikan Tutorial Load More dengan fungsi Onclick jadi setiap ingin melakukan Load More maka si pengunjung harus melakukan Click terlebih dahulu tentu saja dengan menggunakan cara ini juga dapat meringankan Blog kalian.

Berbeda dengan Navigasi yang dulu yang tampilannya akan di refresh ke halaman berikut. Sedangkan untuk Load More kita hanya berada di Homepage saja tanpa perlu melakukan Refresh dengan begitu pasti lebih mempermudah pengunjung karena dengan Refresh akan meload kembali semua dari awal itu pasti akan buang buang kuota

Untuk kalian yang ingin mencoba Navigasi Load More ini bisa langsung praktekan saja Tutorialnya yang ada dibawah ini.

Membuat Navigasi Load More Di Blog



1. Pertama silahkan masuk keblogger > Blog Anda > Theme >> Edit HTML

2. Kemudian copykan kode berikut sebelum/diatas </body>
 <b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
(function($) {var $pager = $('#blog-pager'),$posts = $('.blog-posts');$pager.find('#blog-pager-newer-link').remove(); $pager.on("click", "#blog-pager-older-link a", function() {$.get(this.href, {}, function(data) {var source = $(data).find('.post').length ? $(data) : $('<div></div>');$posts.append(source.find('.blog-posts').html());$pager.html(source.find('#blog-pager-older-link').clone()); }, "html");$(this).replaceWith('<span>Memuat.....</span>');return false;});})(jQuery);
//]]>
</script></b:if></b:if> 
3. Langkah selanjutnya, silahkan pasang kode berikut sebelum </style>
 a.home-link{display:none}
#blog-pager{padding:10px}
#blog-pager-older-link{float:none}
#blog-pager-older-link a{background: #4a86e8;color: #fff;border-radius: 5px;-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.1);box-shadow: 0 5px 10px rgba(0,0,0,0.1);-webkit-transition: -webkit-box-shadow .5s;transition: -webkit-box-shadow .5s;transition: box-shadow .5s;transition: box-shadow .5s,-webkit-box-shadow .5s;transition: box-shadow .5s,-webkit-box-shadow .5s;overflow: hidden;display: inline-block;position: relative;cursor: pointer;padding: 20px 30px;margin: 0 20px;}
#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover{-webkit-box-shadow:0 10px 10px rgba(0,0,0,0.2);box-shadow:0 10px 10px rgba(0,0,0,0.2)} 
4. Jika script tersebut tidak berjalan, silahkan gunakan JQuery dibawah dan pasang kode berikut sebelum </head> jika template sobat sudah terpasang JQuery langkah ini bisa Anda lewati.
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/> 


Demikian lah Tutorial Cara Mengganti Posting Lama dengan Load More AJAX di Blogger, bila ada yang ingin ditanyakan atau diwork bisa berkomentar, ohh iya di demo tersebut adalah Projek Template yang saya buat kalian bisa kasih saran untuk tambahan featured lainnya.

Berlangganan update artikel terbaru via email:

Show comments
Hide comments

0 Response to "Cara Membuat Navigasi Load More Di Blog"

Post a Comment

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ