Belajar Membuat Show More Konten Dengan Jquery
Halo sobat, berjumpa kembali dengan saya Hernowo di tips dan trik Source Code Aplikasi. Di kesempatan kali ini saya akan memberikan tips mengenai Belajar Membuat Show More Konten Dengan Jquery dan kita akan seketika mempraktekkannya pun. Sebelum kita mulai, bagi apa sih show more konten itu..?? Show more konten ketika ini banyak di gunakan di blog toko online, fasion, dan blog lainnya. Show more ini gunanya sama seperti pagination bedanya kalau pagination umumnya menggunakan nomor bagi menampilkan halaman lainnya, dan di show more kita hanya perlu klik show karenanya konten akan tampil. Tak jauh berbeda ya teman – teman, mungkin nanti dapat di tambahkan di blog agar lebih berfariasi. Bagi ketika ini show more memang lagi banyak digunakan, di bawah ini daalah contoh menggunakan show more
Ketika di klik show more products konten yang di sembunyikan akan di munculkan
Dengan konten yang berbeda, bagus kali ini kita akan praktekkan seperti gambar di atas ini tetapi saya bikin lebih sederhana dan diinginkan teman – teman nanti dapat di kembangkan lagi dari hasil latihan kali ini. Bagus, pertama-tama – tama siapkan text editornya dan bikin script html nya
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Belajar Membangun Show More Konten Dengan Jquery</title>
</head>
<body>
</body>
</html>
Save terlebih dahulu dengan nama index.html, kemudian isikan script nya di bawah ini
<div>01Content</div>
<div>02Content</div>
<div>03Content</div>
<div>04Content</div>
<div>05Content</div>
<div>06Content</div>
<div>07Content</div>
<div>08Content</div>
<div>09Content</div>
<div>10Content</div>
<div>11Content</div>
<div>12Content</div>
<div>13Content</div>
<div>14Content</div>
<div>15Content</div>
<div>16Content</div>
<div>17Content</div>
<div>18Content</div>
<div>19Content</div>
<div>20Content</div>
<div>21Content</div>
<div>22Content</div>
<div>23Content</div>
<div>24Content</div>
<div>25Content</div>
<div>26Content</div>
<div>27Content</div>
<div>28Content</div>
<div>29Content</div>
<div>30Content</div>
<div>31Content</div>
<div>32Content</div>
<div>33Content</div>
<div>34Content</div>
<div>35Content</div>
<div>36Content</div>
<div>37Content</div>
<div>38Content</div>
<div>39Content</div>
<div>40Content</div>
<div>41Content</div>
<div>42Content</div>
<div>43Content</div>
<div>44Content</div>
<div>45Content</div>
<div>46Content</div>
<div>47Content</div>
<div>48Content</div>
<div>49Content</div>
<a href=# id=loadMore>Load More</a>
<a href= class=totop>Back to top</a>
Pastekan script di atas ini di pada tag <body>, saya bikin tag div dengan banyak 49 content agar nanti teman – teman tahu hasilnya dan dapat di scroll kemudian di bawah nya saya berikan tombol bagi show more dan back to top. Kalau telah, tambahkan css nya di bawah ini
body {
background-color: #f6f6f6;
width: 400px;
margin: 20px auto;
font: normal 13px/100% sans-serif;
color: #444;
}
div {
display:none;
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
}
.totop {
position: fixed;
bottom: 10px;
right: 20px;
background: orange;
padding: 5px;
display: block;
}
a, a:visited {
color: #33739E;
text-decoration: none;
display: block;
margin: 10px 0;
}
a:hover {
text-decoration: none;
}
#loadMore {
padding: 10px;
text-align: center;
background-color: #33739E;
color: #fff;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
transition: all 600ms ease-in-out;
}
#loadMore:hover {
background-color: #fff;
color: #33739E;
}Langkah berikutnya kita implementasikan Belajar Membuat Show More Konten Dengan Jquery , teman – teman jangan lupa load terlebih dahulu library jQuery nya kalian dapat ambil seketika dari blog resminya di jQuery.com atau dapat pun copy link di bawah ini
<script src=https://code.jquery.com/jquery-3.2.1.min.js></script>
Berikan link ini di pada tag head, baru berikutnya kita berikan jQuery kegunaan show more nya. Teman – teman dapat tambahkan script jQuery nya di bawah ini
<script>
$(function(){
$(div).slice(0, 4).show();
$(#loadMore).on('click', function (e) {
e.preventDefault();
$(div:hidden).slice(0, 12).slideDown();
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1200);
});
});
</script>
Letakkan tepat di atas tag tutup </body>, save dan jalankan di borser nya karenanya hasilnya seperti gambar di bawah ini
Kalau di klik load more karenanya konten akan di munculkan hingga nomor terakhir yaitu 49content
Berikutnya kita berikan kegunaan jQuery nya bagi back to top
$('.totop').on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}
);
});Kalau telah save dan refresh di browsernya, karenanya ketikan konten telah sangat bawah ketika klik tombol back to top karenanya konten akan kembali ke nomor 1 atau kembali ke atas.
Inilah kegunaan show more yang ketika ini banyak di gunakan di blog toko online, teman – teman nanti di kembangkan lagi dari hasil latihan kali ini mungkin nanti dapat menggunakan bootstrap supaya lebih bagus lagi hasilnya. Bagus, demikian di artikel kali ini mengenai Belajar Membuat Show More Konten Dengan Jquery kita berjumpa kembali di artikel yang akan datang yang akan memberikan tips dan trik seputar dunia blog. Terimakasih dan Hingga Jumpa.
Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
