Modifikasi Mempercantik Paging Style di CMS Lokomedia

Kali ini saya ingin berbagi tentang bagaimana cara mempercantik navigasi paging pada lokomedia versi 1.5.5 Referensi tulisan ini saya dapatkan dari http://www.webdistortion.com/2008/10/27/26-pager-styles-from-around-the-webcss-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 />”;

 NB: Sudah saya coba dan berhasil di modul agenda dan download juga sama ,jika sintak tidak berhasil (tidak ada pesan eror dan halaman tidak muncul) hapus dan ketik ulang tanda baca (") dan (')


sumber: http://cauza.wordpress.com