Navigasi Next Prev merupakan navigasi halaman yang di ciptakan dengan properti CSS, apabila apabila Artikel yang Sobat buat sangat panjang maka akan terkesan tidak rapih. Solusinya Sobat bisa membuat halaman Navigasi Next Prev dengan demikian Artikel tersebut bisa Sobat buat beberapa halaman. Bagaimana Apakah Sobat berminat untuk memasangnya, baiklah berikut ini langkah-langkahnya :
Langkah Ke 1 : Buka Editor Seperti Notpad ++ atau Sublime Text.
Langkah Ke 2 : Masukan Script ini Di editor anda
<!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
div.center {text-align: center;}
</style>
</head>
<body>
<h2>Centered Pagination</h2>
<div class="center">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
Keterangan : class="active" Adalah Dihalaman yang sedang di kunjungi atau halaman yang Aktiv
Langkah Ke 3 : Buka Script yang di simpan dengan nama index.html.
Hasil.......
Selamat mencoba..!!!!
Sekian Dan terimakasih V: Semoga bermanfaat untuk teman – teman dan lihat juga tutorial lainnya di Mudabeda
Cara Membuat Halaman Navigasi Next Prev Dengan Css >>>>> Download Now
ReplyDelete>>>>> Download Full
Cara Membuat Halaman Navigasi Next Prev Dengan Css >>>>> Download LINK
>>>>> Download Now
Cara Membuat Halaman Navigasi Next Prev Dengan Css >>>>> Download Full
>>>>> Download LINK