Mempercantik Paging Halaman Lokomedia


paging style with cssBulan 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 />”;

Advertisements

4 thoughts on “Mempercantik Paging Halaman Lokomedia

    1. Prinsipnya sebenarnya sama saja. Ikuti langkah-langkah diatas untuk paging 3. Tapi jangan mengubah script tautan/linknya. Kuncinya untuk script link yang berektensi html jangan dirubah sama sekali. Kemudian jangan lupa untuk memberi properti div dengan class=pages pada modul berita per kategori untuk $linkHalaman.

  1. saya sudah coba di lokomedia 1.5.5 kenapa tidak jalan dan tidak ada eror mohon pencerahannya terima kasih..

    1. maaf baru dibalas, lama gakngeblog.. Seharusnya bisa juga di terapkan di lokomedia versi terbaru. Coba periksa lagi apakah di kiri.php template anda pada modul semua berita sudah ditambahkan div paging pada $linkhalaman-nya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.