Mempercantik Paging Halaman Lokomedia

Bulan januari ini lokomedia kembali merilis versi terbarunya yakni lokomedia 1.5.5. Banyak perbaikan disana sini, terutama dalam hal security-nya. Tampilannya pun dirubah sedemikian rupa sehingga berbeda dengan tampilan sebelumnya, walaupun tidak signifikan. Didukung dengan banyaknya programer dan designer yang tertarik dalam pengembangan lokomedia, sudah banyak template yang sengaja dibuat dan diupload ke internet. Namun bagi anda yang ingin mengkustomize tampilan web anda yang berbasis lokomedia itu sah sah saja.Karena setiap orang mempunyai selera masing-masing.

Kali ini saya ingin berbagi tentang bagaimana cara mempercantik navigasi paging pada lokomedia. Referensi tulisan ini saya dapatkan dari http://www.webdistortion.com/2008/10/27/26-pager-styles-from-around-the-web-css-images-and-html/. Disana terdapat banyak style paging yang digunakan oleh berbagai web terkenal seperti yahoo, digg, wordpress, facebook dll.

Style yang akan saya gunakan dalam tulisan saat ini adalah seperti digg.com, download css dan html filenya dari web referensi diatas. Ambil file css-nya dan copykan ke folder css template ubah dengan nama paging.css

/* Page Numbers */
.pages {
font: 83%/1.4 arial, helvetica, sans-serif;
padding: 1em;
margin: 1em 0;
clear: left;
font-size: 85%;
}

.pages a, .pages span {
color:#003366;
display: block;
float: left;
padding: 0.2em 0.5em;
margin-right: 0.1em;
border: 1px solid #fff;
background: #fff;
}

.pages span.current {
border: 1px solid #2E6AB1;
font-weight: bold;
background: #2E6AB1;
color: #fff;
}

.pages a {
border: 1px solid #9AAFE5;
text-decoration: none;
}

.pages a:hover {
border-color: #2E6AB1;
}

.pages a.nextprev {
font-weight: bold;
}

.pages span.nextprev {
color: #666;
}

.pages span.nextprev {
border: 1px solid #ddd;
color: #999;
}

.pages .nextprev-next {
float: right;
}

Panggil paging.css ini dengan menambahkan kode @import url(paging.css); pada style.css. Ini berfungsi agar file paging.css dapat bekerja. Yang tidak boleh ketinggalan adalah kita mengedit class_paging.php pada folder config. Untuk percobaan kita akan mengubah style paging pada halaman semua berita, yang pada design defaultnya ini terletak di class paging2.

Hilangkan semua karakter “|” pada class paging2.
Tambahkan class pada link first prev pada saat aktif

$link_halaman .= “<a href=halberita-1.html><< First</a>

menjadi

$link_halaman .= “<a href=halberita-1.html class=’nextprev’><< First</a>

tambahkan juga class untuk link prev-nya

Tambahkan class pada saat link first prev disable yaitu pada saat halaman 1 aktif

<< First

menjadi

<span class=’nextprev’><< First</span>

berikan juga class=nextprev untuk link prev-nya.

Tambahkan class untuk titik tiga apabila halaman aktifnya lebih dari 3

$angka = ($halaman_aktif > 3 ? ” … ” : ” “);

menjadi

$angka = ($halaman_aktif > 3 ? “<span class=’nextprev’>…</span>” : ” “);

Berikan juga class buat halaman aktif

 $angka .= ” <b>$halaman_aktif</b> | “;

menjadi

$angka .= ” <span class=’current’><b>$halaman_aktif</b></span>”;

Untuk membuat link angka ubah

 $angka .= ($halaman_aktif+2<$jmlhalaman ? ” … | <a href=halberita-$jmlhalaman.html>$jmlhalaman</a> | ” : ” “);

menjadi

$angka .= ($halaman_aktif+2<$jmlhalaman ? “<span class=’nextprev’>…</span><a href=halberita-$jmlhalaman.html>$jmlhalaman</a> ” : ” “);

Sekarang beralih ke navigasi next last, sama seperti first prev. Jika dalam keadaan aktif

$link_halaman .= ” <a href=halberita-$next.html>Next ></a> |

menjadi

$link_halaman .= ” <a href=halberita-$next.html class=’nextprev’>Next ></a>

Juga dengan navigasi Last. Terakhir adalah navigasi next last disable yaitu pada saat halaman yang aktif adalah halaman terakhir

$link_halaman .= ” Next > | Last >>”;

menjadi

$link_halaman .= ” <span class=’nextprev’>Next ></span> <span class=’nextprev’> Last >></span>”;

Kode lengkapnya :

<?php
// class paging untuk halaman berita (menampilkan semua berita)
class Paging2{
// Fungsi untuk mencek halaman dan posisi data
function cariPosisi($batas){
if(empty($_GET['halberita'])){
$posisi=0;
$_GET['halberita']=1;
}
else{
$posisi = ($_GET['halberita']-1) * $batas;
}
return $posisi;
}

// Fungsi untuk menghitung total halaman
function jumlahHalaman($jmldata, $batas){
$jmlhalaman = ceil($jmldata/$batas);
return $jmlhalaman;
}

// Fungsi untuk link halaman 1,2,3
function navHalaman($halaman_aktif, $jmlhalaman){
$link_halaman = “”;

// Link ke halaman pertama (first) dan sebelumnya (prev)
if($halaman_aktif > 1){
$prev = $halaman_aktif-1;
$link_halaman .= “<a href=halberita-1.html class=’nextprev’><< First</a>
<a href=halberita-$prev.html class=’nextprev’>< Prev</a>”;
}
else{
$link_halaman .= “<span class=’nextprev’><< First</span><span class=’nextprev’>< Prev </span> “;
}

// Link halaman 1,2,3, …
$angka = ($halaman_aktif > 3 ? “<span class=’nextprev’>…</span>” : ” “);
for ($i=$halaman_aktif-2; $i<$halaman_aktif; $i++){
if ($i < 1)
continue;
$angka .= “<a href=halberita-$i.html>$i</a>  “;
}
$angka .= ” <span class=’current’><b>$halaman_aktif</b></span>”;

for($i=$halaman_aktif+1; $i<($halaman_aktif+3); $i++){
if($i > $jmlhalaman)
break;
$angka .= “<a href=halberita-$i.html>$i</a>  “;
}
$angka .= ($halaman_aktif+2<$jmlhalaman ? “<span class=’nextprev’>…</span><a href=halberita-$jmlhalaman.html>$jmlhalaman</a> ” : ” “);

$link_halaman .= “$angka”;

// Link ke halaman berikutnya (Next) dan terakhir (Last)
if($halaman_aktif < $jmlhalaman){
$next = $halaman_aktif+1;
$link_halaman .= ” <a href=halberita-$next.html class=’nextprev’>Next ></a>
<a href=halberita-$jmlhalaman.html class=’nextprev’>Last >></a> “;
}
else{
$link_halaman .= ” <span class=’nextprev’>Next ></span> <span class=’nextprev’> Last >></span>”;
}
return $link_halaman;
}
}

?>

Jangan lupa juga memberi properti div pada link halaman dalam file kiri.php tepatnya di module semua berita.

 echo “Hal: $linkHalaman <br /><br />”;

jadi

echo “<div class=’pages’> $linkHalaman </div><br />”;

Advertisement