CSS Asyik - Belajar Bikin Web Makin Asyik dengan CSS

Paging Navigation berfungsi menginformasikan user bahwa konten yang mereka lihat terdiri dari beberapa halaman dan apa yang mereka lihat saat ini adalah satu dari halaman-halaman tersebut. Kita tentunya menginginkan agar setiap user/pengunjung berpikiran seperti itu. Oleh karena itu, desain paging navigation yang informatif dan atraktif menjadi kunci navigasi yang baik. CSS Asyik ingin berbagi pengalaman tersebut.

Struktur HTML dari Paging Navigation pada umumnya adalah:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="pagingID">
	<ul>
		<li><a href="#">First</a></li>
		<li><a href="#">&lt; Previous</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#" class="current">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">7</a></li>
		<li><a href="#">Next &gt;</a></li>
		<li><a href="#">Last</a></li>
	</ul>
</div>

Berikut ini adalah tampilan yang bisa didapatkan dari HTML tersebut:

Kelima contoh diatas terdapat di dalam file CSS-Paging.zip yang telah saya susun khusus untuk CSS Asyik. Silakan digunakan untuk kepentingan apapun

CSS-Paging.zip

Version: 0.1
Last Updated: November 7, 2009
Size: 44.52 KB