Untuk bisa buat paging emang banyak logika nya bro, tapi ini gw buat sesimpel mungkin, tapi ya banyak kurangnya. Gak ada ‘prev’ & ‘next’. Udah bisa lah di pakek, untuk paging sederhana aja. Udah gw buatin sekalian css nya bro.

Index.php

<section>
	<nav role="navigation">
		<ul class="cd-pagination move-buttons custom-icons">

		<?php
		$sekarang = (@$_GET['s'] ? $_GET['s'] : 1);
		page_barang( $sekarang );

		?>
		</ul>
	</nav> <!-- cd-pagination-wrapper -->
</section>

fungsi.php

function page_barang( $sekarang )
{
	$sql_total	= mysql_query( "SELECT * FROM barang" );// sql tabel mana yang akan di paging / hitung
	$sql_total 	= mysql_num_rows( $sql_total );			// hitung total
	$total 		= ceil( $sql_total / 20 );				// bagi perhalaman kemudian di bulatkan keatas (ceil)
	
	for ($i = 1; $i <= $total; $i++) {

		$active = "";
		if ( $sekarang == $i ){
			$active = 'class="current"';
		}

	    echo '<li><a href="?s='.$i.'" ' . $active . '>'.$i.'</a></li>';

	}

}

style.css

.cd-pagination {
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}
.cd-pagination li {
  /* hide numbers on small devices */
  display: none;
  margin: 0 .2em;
}
.cd-pagination li.button {
  /* make sure prev next buttons are visible */
  display: inline-block;
}
.cd-pagination a, .cd-pagination span {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* use padding and font-size to change buttons size */
  padding: .4em .8em;
  font-size: 0.7rem;
}
.cd-pagination a {
  border: 1px solid #e6e6e6;
  border-radius: 0.25em;
}
.no-touch .cd-pagination a:hover {
  background-color: #f2f2f2;
}
.cd-pagination a:active {
  /* click effect */
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

SS hasilnya bro..