Beranda / Programming

Membuat Pagination atau nomor urut halaman dengan bootstrap 3

Oleh Pernando Harianja Posting Komentar

Pada postingan hari ini, saya akan berbagi sedikit tutorial tentang pagination untuk web atau blog anda. Biasanya sebuah artikel pada blog yang memiliki urutan tertentua agar lebih telihat rapi dan tidak terlalu panjang maka dibuat sebuah perintah dimana setiap tampilan halaman itu diciptakan nomor urut sehingga kita tidak terlalu capek untuk melihat dari atas kebawah saat mencari artikel yang dibutuhkan.

Pagination umumnya sangat banyak kita temui di blog atau artikel yang lebih dari satu. Pagination ini juga memiliki beberapa fungsi yaitu mengurangi loading saat halaman dibuka dan jika dibanding dengan blog tanpa pagination maka blog itu akan terasa lambat dan lelet karena memuat semua artikel yang memanjang dalam satu halaman. Jadi, lebih menguntungkan bukan?

Disini kita akan membahas tentang Membuat Pagination atau nomor urut halaman dengan bootstrap 3 dan bukan dengan menggunakan cara lain namun hanya dengan bootstrap 3 saja.
Pertama sekali, kita harus meletakkan code ini diatas </head> disetiap web atau blog anda.

Membuat Pagination atau nomor urut halaman dengan bootstrap 3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<style type="text/css">
.bs_3{margin: 20px;}
</style>

Kemudian Kita meletakkan kode dibawah ini didalam <body> KODE DISINI </body>
dan yang pasti adalah, kode ini diletakkan sesudah <body> dan sebelum </body> terserah mau dimana.

<div class="bst_3">
    <ul class="pagination">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
    </ul>
</div>

Sehingga kode diatas terletak kurang lebih seperti ini didalam kode html anda:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Pagination atau nomor urut halaman dengan bootstrap </title>
<span style="color: #6aa84f;"><i><b><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<style type="text/css">
    .bs_3{margin: 20px;}
</style></b></i></span>
</head>
<body>
<span style="color: #38761d;"><i><b><div class="bs_3">
    <ul class="pagination">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
        <li><a href="#"><a href="#">&laquo;</a></li>
    </ul>
</div></b></i></span>
</body>
</html>

Screenshort dari kode html diatas adalah seperti dibawah ini:

Sekian tutorial hari ini dan jika ada pertanyaan, silahkan hubungi lewat kotak komentar dibawah ini. Terimakasih.

Pernando Harianja Pendiri dan Pengelola di InfoLoh.com, yang hobby dalam pembuatan Program Komputer, dan ngeBlog. Untuk kenal lebih dekat Follow IG saya: @pernando_harianja

Posting Komentar untuk "Membuat Pagination atau nomor urut halaman dengan bootstrap 3"

Berkomentar dengan sopan, dan Dilarang menanamkan Link pada komentar