Coding Pagination Keren

30 December 09

duritajam.web.id.Apakah anda memakai pagination di blog atau website yang sedang anda buat? jika ya,, saya memiliki beberapa inspirasi buat Anda. Khusus yang ngeblog pake wordpress, bisa menggunakan plugin wp-pagenavi. Tapi sebelumnya liat dulu perbandingan pagination pada blog worpress berikut ini:
Pagination default:
ok
Sedangakan ini adalah pagination menggunakan plugin wp-pagenavi:
wp-pagenavi

Ada beberapa situs yang juga menggunakan pagination ini:
Pagination pada digg.com
digg
Pagination pada cssremix
cssremix
Pagination pada theme worpress
theme

Untuk menginstall wp-pagenavi:

  1. Dowload wp-pagenavi disini
  2. Lalu, ekstrak dan upload di wopress anda pada wp-content/plugins
  3. Aktifkan plugin melalui dasbord anda
  4. Lalu tambahkan pada theme anda yang ingin diberi pagination dengan: 
    1

    <?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
  5. Setelah itu anda bisa mengaturnya kembali di WP-Admin -> Options -> PageNavi
  6. Jangan lupa setelah anda atur klik “Update Option”

OK.. untuk mengganti tampilan menurut slera anda, bisa dilakukan di:

/wp-content/plugins/pagenavi/pagenavi-css.css

.

Jika anda ingin mengoprek cssnya menjadi mirip seperti flickr:
flikr

Code HTML

1
2
3
4
5
6
7
8
9
10
11

<ul id="pagination-flickr">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>

Code CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

ul{border:0; margin:0; padding:0;}
 
#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
}

Oh iya kalo pengen seperti digg.com di atas, caranya begini:

Code HTML

1
2
3
4
5
6
7
8
9
10
11

<ul id="pagination-digg">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>

Code CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

ul{border:0; margin:0; padding:0;}
 
#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
#pagination-digg a{
border:solid 1px #9aafe5
margin-right:2px;
}
#pagination-digg .previous-off,
#pagination-digg .next-off {
border:solid 1px #DEDEDE;
color:#888888;
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
#pagination-digg .next a,
#pagination-digg .previous a {
font-weight:bold;
}
#pagination-digg .active{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-digg a:link,
#pagination-digg a:visited {
color:#0e509e;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-digg a:hover{
border:solid 1px #0e509e;
}

Atau anda menginginkan yang seperti ini:
clear

Code HTML

1
2
3
4
5
6
7
8
9
10
11

<ul id="pagination-clean">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>

Code CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

ul{border:0; margin:0; padding:0;}
 
#pagination-clean li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-clean li, #pagination-clean a{
border:solid 1px #DEDEDE;
margin-right:2px;
}
#pagination-clean .previous-off,
#pagination-clean .next-off {
color:#888888;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-clean .next a,
#pagination-clean .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-clean .active{
color:#00000;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-clean a:link,
#pagination-clean a:visited {
color:#0033CC;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-clean a:hover{
text-decoration:none;
}

OK selamat mencoba…

3 Responses to “Coding Pagination Keren”

  1. Budidaya News says:
    25 January 2011 at 02:52

    Klo buat blogger ada g????

    Reply
  2. ardlian says:
    15 February 2011 at 13:15

    mantab… thx eni wei…

    Reply
  3. oto says:
    22 June 2011 at 13:25

    wui…
    ini yang aku cariiii…
    makasihhh….

    Reply

Leave a Reply