Untuk cara pemasangan tombol Loadmore pada tema blogger generasi terbaru seperti contempo, soho, emporio dan notable cukup sangatlah mudah. Apalagi dengan script ajax di bawah ini, membuat loading tidak berat seperti pada tutorial yang sudah bertebaran dan sangat tidak efisien, seperti sebelum tombol diklik , postingan sudah lebih awal muncul membuatnya semakin berat. Tetapi tidak untuk script ajax berikut ini. Selain berupa plugin yang bisa dipasang untuk widget lainnya jika kita paham, kita bisa dengan mudah memasangnya untuk widget-widget tersebut. seperti random post, recent-post, related-post maupun widget lainya.
Namun untuk saat ini saya hanya akan memasangnya pada halaman home saja agar tampilan home kita terlihat berbeda dari tampilan defaultnya. Simak selengkpanya untuk cara pemasangannya.
Penting ! :
Praktekan pada tema contempo, soho, emporio dan notable blog yang baru, jangan lakukan pada blog yang sudah lama aktif untuk diedit untuk mencegah hal yang tak diinginkan.
Untuk langkah
Cari kode berikut:
<b:includable id='nextPageLink'>
Akan menemukan kode seperti berikut
<b:includable id='nextPageLink'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
<data:messages.morePosts/>
</a>
</b:includable>
Lalu hapus isi dari kode tersebut, jadi seperti ini
<b:includable id='nextPageLink'>
</b:includable>
Atau bisa seperti ini, dengan memberikan komentar
<b:includable id='nextPageLink'>
<! -- <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
<data:messages.morePosts/>
</a> -->
</b:includable>
Otomatis tidak akan dieksekusi.
Langkah kedua, cari kode
<b:includable id='postPagination'>
Kita akan menemukan kode seperti ini
<b:includable id='postPagination'>
<div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='previousPageLink'/>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
</div>
</b:includable>
Hapus isinya atau kita bisa melakukan seperti pada langkah pertama dengan memberikan tanda komentar <! -- kode yang ingin di hapus -->. Tapi dihapus akan lebih baik dan lebih rapi.
Seperti berikut
<b:includable id='postPagination'>
<! -- <div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='previousPageLink'/>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
</div> -->
</b:includable>
Lalu tambahkan kode berikut ini
<b:if cond='data:blog.pageType != "item"'>
<div class='loadMorePosts'>
<a class='loadMoreButton blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
Loadmore
</a></div>
<div class='noMorePosts' style='display: none'><span>No More Posts to Load</span></div>
</b:if>
<style>
.loadMorePosts{
width:100%;
max-width:130px!important;
float:none;
margin:0 auto;
padding:5px 5px 2px;
margin:0px 0 30px!important;
border:1px groove #ededed!important;
border-radius:8px
}
</style>
Css ditaruh juga disana, karen kalau diletakan di atas ]]></b:skin> , css tidak akan bekerja.
Hasilnya seperti berikut
<b:includable id='postPagination'>
<b:if cond='data:blog.pageType != "item"'>
<div class='loadMorePosts'>
<a class='loadMoreButton blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
Loadmore
</a></div>
<div class='noMorePosts' style='display: none'><span>No More Posts to Load</span></div>
</b:if>
<style>
.loadMorePosts{
width:100%;
max-width:130px!important;
float:none;
margin:0 auto;
padding:5px 5px 2px;
margin:0px 0 30px!important;
border:1px groove #ededed!important;
border-radius:8px
}
</style>
</b:includable>
Langkah ketiga
Copy dan pastekan script ajax berikut
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script type='text/javascript'>
//<![CDATA[
$('#blog-pager').hide();
var olderLink = $('a.blog-pager-older-link').attr("href");
if(olderLink)
$('.loadMorePosts').show();
$('.loadMorePosts a').on('click', function(e){
$('.loadMorePosts').hide();
$.ajax({
url: olderLink,
success: function(html){
var res = $(html).find('.blog-posts');
res.children(".status-msg-wrap").remove();
$('.blog-posts').append(res.html());
olderLink = $(html).find('.blog-pager-older-link').attr("href");
if (olderLink)
$('.loadMorePosts').show();
else $('.noMorePosts').show();
},
beforeSend: function() {
$('.loadMore > #loader').show();
},
complete: function(){
$('.loadMore > #loader').hide();
},
});
e.preventDefault();
});
//]]>
</script>
</b:if>
Diatas kode </body> lalu save. Dan lihat hasilnya.
Kita juga bisa tambahkan cssnya agar terlihat lebih menarik lagi dan tapi dengan menambahkan class .loadMoreButton dan class .noMorePosts.
OKe skian semoga sukses tambah rezeki dan sehat buat kita semua.
Wassalam.
Komentar
Posting Komentar