Arsip Bulan July 2010

Memodifikasi Tampilan Plugin WP-PageNavi pada WordPress

15 July 2010

Bagi mereka yang bosan sama tampilan navigasi default wordpress yang hanya menampilkan Older Entries dan Newer Entries, sudah tentu mereka bakal menambahkan plugin WP-PageNavi yang membuat tampilan navigasi paging menjadi lebih variatif dan user-friendly.

Page Navi Default

Tampilan PageNavi default tersebut bisa dimodifikasi agar lebih atraktif dengan cara mengedit file pagenavi-css.css sesuai keinginan kita. Saya pun mencoba memodifikasinya, terinspirasi oleh navigasi paging yang ada di halaman eRepublik (game online berbasis web yang aktif saya mainkan 2 tahun terakhir).

Pertama-tama, Anda membutuhkan 4 file gambar untuk first, last, previous dan next link-nya.

Unggahlah keempat gambar tadi ke server hosting Anda.

Selanjutnya, ubahlah setting plugin PageNavi yang bisa diakses dari Settings > PageNavi. Ubahlah value yang ada pada Text For First Page, Text For Last Page, Text For Previous Page dan Text For Next Page dengan kode html untuk memanggil gambar. Misalnya, untuk mengganti value yang ada pada Text For First Page, gunakan tag berikut:

<img src="http://domainanda.com/images/first.png" />

PageNavi Setting

Note: Sesuaikan url gambar dengan tempat directory kemana kita mengunggah gambar-gambar tadi.

Terakhir, Sesuaikan tampilan dengan sedikit memodifikasi file pagenavi-css.css dan jadilah tampilan navigasi paging yang kita inginkan.

PageNavi


Membuat Modul Pencarian WordPress Berlaku untuk Postingan Saja

14 July 2010

Ketika pengunjung blog melakukan pencarian melalui search form, kemungkinan besar apa yang mereka cari adalah postingan blog, bukan content static page. Modul pencarian WordPress secara otomatis akan meng-query keduanya, baik postingan maupun static page.

Untuk membuat hasil pencarian hanya berlaku terhadap postingan saja, Anda bisa menambahkan sedikit code pada file functions.php Anda.

function SearchFilter($query) {
    if ($query->is_search) {
        $query->set('post_type', 'post');
    }
    return $query;
}

add_filter('pre_get_posts','SearchFilter');

Dengan tambahan code di atas, maka engine akan melakukan pencarian untuk postingan (post_type) saja. Jika Anda membutuhkan hal yang sebaliknya, Anda hanya perlu mengubah post_type menjadi page.

Sumber:
bavotasan


Mengimplementasikan @font-face

12 July 2010

FontsSaya sering mendapatkan klien yang menyodorkan draft desain website mereka (dari paling sederhana dalam bentuk .ppt sampai dengan format .psd). Rata-rata mereka sangat “kreatif” dalam hal penggunaan font sebagai typografi mereka. Ketika saya jelaskan kaidah penggunaan font di website, rata-rata mereka cukup bisa untuk berkompromi dan akhirnya mengembalikan jenis font ke jenis yang “diizinkan”.

Tapi sebenarnya, saya bisa memenuhi permintaan mereka dengan memanfaatkan @font-face. Relatif bukan hal yang baru memang, karena @font-face sudah diajukan untuk standarisasi CSS2 dan bahkan sudah diimpelementasikan di Internet Explorer versi 5, meskipun implementasinya menggunakan format Embedded Open Type (.eot) yang notabene tidak semua browser menggunakan format tersebut.

OK, sekarang bagaimana cara kita memasang kaidah @font-face dalam blog/website kita?

Pertama, perlu diingat format font apa saja yang di-support oleh browser-browser yang ada.

  • Internet Explorer (semua versi): EOT
  • Safari (3.2+): TTF/OTF
  • iPhone (3.1) SVG
  • Chrome (semua versi): SVG (TTF/OTF supported sejak 25 Januari 2010)
  • Firefox (3.5+): TTF/OTF (.WOFF sejak versi 3.6)
  • Opera (10+) TTF/OTF

So, .eot + .ttf /.otf + svg + woff adalah format-format yang banyak di-support oleh browser. Artinya, ketika kita hendak menggunakan kaidah @font-face, sangat disarankan agar kita menyertakan format-format tersebut. Anda bisa memanfaatkan @font-face generator untuk meng-generate font pilihan dari komputer Anda (harap diperhatikan juga mengenai lisensi font yang akan Anda gunakan). Unggahlah file font yang akan Anda gunakan.

Kedua, syntax yang digunakan untuk implementasi @font-face:

@font-face {
  font-family: NamaFont; /* required */
  src: source;	/* required */
  font-weight: weight;	/* optional */
  font-style: style;  /* optional */
}

NamaFont
Nama font yang akan dipanggil untuk properti CSS kita.
source
URL tempat font tersebut kita simpan, bisa juga ditambahkan dengan local("NamaFontLokal"), dengan NamaFontLokal adalah nama yang terbaca oleh komputer lokal kita.
weight
Font weight value, misalnya bold atau normal.
style
Font style value, misalnya italic atau normal.

Note: Syntax CSS ini bisa digunakan berulang, jika kita menggunakan lebih dari 1 jenis font.

Ketiga, panggillah nama font tadi sesuai kebutuhan, misalnya:

h1{
   font-family: 'NamaFont', arial, serif;
}

Note: Tetap disarankan untuk menyertakan jenis font standar lain sebagai alternatif.

Untuk lebih jelasnya, Anda bisa membaca juga artikel-artikel berikut ini:


Dari SOHO hinggal Enterprise

6 July 2010


Pengalaman dan keahlian kami telah memungkinkan untuk mengimplementasikan berbagai solusi teknologi agar dapat memenuhi platform yang dibutuhkan oleh para klien kami.

Diawali dengan berbagai skala proyek teknologi informasi (web, desktop, network, telecommunication), Jerbee fokus dalam pengembangan web dengan teknologi jaringan terkini sebagai pendukung. Dengan kemampuan teknologi open source, meliputi berbagai macam model arsitektur komputer yang berbeda (web-based & mobile), bahasa pemrograman PHP & Ruby on Rails, juga multi-platform (Unix, Linux, Mobile OS) serta database platform mulai skala SOHO (Small Office Home Office) hingga enterprise.