Wednesday, September 6, 2017

Published 9/06/2017 07:54:00 AM by with 1 comment

Cara Membuat Halaman Navigasi Next Prev Dengan CSS

Sebelumnya saya telah mengulas membuat Box Shadow dengan CSS, kali ini saya akan berbagi Tpis dan trik cara membuat Halaman Navigasi Next Prev Dengan CSS. Tentunya Sobat sering melihat Navigasi Next Prev biasanya pada homepage, namun navigasi Next Prev bukanlah di homepage tetapi pada halaman postingan.

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



      edit

1 comment:

  1. Cara Membuat Halaman Navigasi Next Prev Dengan Css >>>>> Download Now

    >>>>> 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

    ReplyDelete