Tahukah anda tentang website flickr.com, mungkin bagi anda para pengguna jasa layanan internet yang sering kali mengupload foto-foto lebih mengenal situs ini. Flickr.com merupakan salah satu dari situs internet yang menyediakan jasa layanan online untuk menampung yang dapat dikelola atau dikostumisasi secara personal. Jika diperhatikan dengan lebih jelas lagi, dalam situs tersebut terdapat bentuk paging dengan style yang cukup menarik. Untuk kali ini akan saya tunjukkan skrip css untuk membuat paging model flickr.com.
Berikut ini scriptnya… simpan dengan nama flickr.css
div.paging{
padding : 2px;
margin : 2px;
text-align : center;
text-family : Tahoma;
text-size : 12px;
}
/*div paging untuk link*/
div.paging a{
padding : 2px 6px;
margin-right: 2px;
border : 1px solid #DEDFDE;
text-decoration: none;
color : #0061DE;
background-position: bottom;
}
/*div paging ketika mouse berada diatas link*/
div.paging a:hover{
border : 1px solid #000000;
color : #0061DE;
}
/*div paging untuk halaman yang aktif saat itu*/
div.paging span.current{
padding : 2px 6px;
margin-right: 2px;
font-weight : bold;
color : #FF0084;
}
/*div paging untuk halaman yang tidak aktif*/
div.paging span.disabled{
padding : 2px 6px;
margin-right: 2px;
color : #ADAAAD;
font-weight : bold;
}
/*div paging untuk tulisan prev dan next*/
div.paging span.prevnext{
font-weight : bold;
}
/*div paging untuk link prev dan next*/
div.paging span.prevnext a{
border : none;
}
/*div paging untuk link prev dan next ketika mouse berada diatasnya*/
div.paging span.prevnext a:hover{
border : 1px solid #000000;
color : #0061DE;
}
Untuk menjalankannya anda bisa menggunakan skrip paging pada tutorial Tiga Langkah Mudah Menerapkan Paging… hanya tinggal menambahkan source code pada baris pertama untuk memanggil file css yang akan disertakan pada skrip php, contohnya :
<link href="flikcr.css" rel="stylesheet" type="text/css">
Tapi dengan syarat file css-nya berada di dalam satu direktori dengan file php-nya.
Jika berhasil pagingnya akan terlihat seperti ini…
 |
| Paging dengan model Flickr.com |
