Membuat Pagination atau nomor urut halaman dengan bootstrap 3

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="#">&amp;laquo;</a></li>
        <li class="active"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;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="#">&amp;laquo;</a></li>
        <li class="active"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;laquo;</a></li>
        <li&gt;&lt;a href="#"><a href="#">&amp;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.

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

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel