Mempercantik paging dengan css

Anda ingin membuat paging seperti ini?

Yah, paging di atas memang sama dengan Flickr. *Tutorial ini hanya menampilkan design css-nya saja, kami hanya ingin menunjukkan bagaimana cara membuat tampilan paging menjadi cantik? belum termasuk script pagingnya.

CSS
div.paging {
    padding     : 2px;
    margin      : 2px;
    text-align  : center;
    font-family : Tahoma;
    font-size   : 12px;
}
div.paging a {
    padding             : 2px 6px;
    margin-right        : 2px;
    border              : 1px solid #DEDFDE;
    text-decoration     : none;
    color               : #0061DE;
    background-position : bottom;
}
div.paging a:hover {
    background-color: #0063dc;
    border : 1px solid #fff;
    color  : #fff;
}
div.paging span.current {
    border : 1px solid #DEDFDE;
    padding      : 2px 6px;
    margin-right : 2px;
    font-weight  : bold;
    color        : #FF0084;
}
div.paging span.disabled {
    padding      : 2px 6px;
    margin-right : 2px;
    color        : #ADAAAD;
    font-weight  : bold;
}
div.paging span.prevnext {   
  font-weight : bold;
}
div.paging span.prevnext a {
     border : none;
}
div.paging span.prevnext a:hover {
    display: block;
    border : 1px solid #fff;
    color  : #fff;
}

HTML:
<div class=”paging”>
  <span class=”prevnext”>&larr; prev</span>
  <span class=”current”>1</span>
  <a href=”#”>2</a>
  <a href=”#”>3</a>
  <a href=”#”>4</a>
  <a href=#”>5</a>
  <a href=”#”>6</a>
  <a href=”#”>7</a>
  <span class=”disabled”>…</span>
  <a href=”#” class=”prevnext”>next &rarr;</a>
</div>

DEMO

Kunjungi www.proweb.co.id untuk menambah wawasan anda.