Arsip Kategori ‘Article’
Membuat Ribbon Menggunakan CSS Tanpa Image
6 Useful MySQL Command
Introducing Gmail Priority Inbox
Bagi mereka yang banyak berinteraksi melalui internet, email tentu menjadi hal yang tidak bisa lepas dari aktivitas sehari-hari. Terkadang ketika jumlah email yang masuk mencapai puluhan atau bahkan ratusan per harinya bisa membuat kita melewatkan satu atau beberapa email penting (saya pribadi sih paling gatel kalo ada unread message di inbox saya :p)
Hal ini tidak luput dari perhatian tim pengembang Google yang merilis Gmail Priority Inbox beta. Ini adalah fitur baru dari gmail/google apps,
Fitur ini mengklasifikasikan message menjadi “Important and Unread”, “Starred” dan “Everything Else” secara berurutan. Tentu jika kita tidak berkenan dengan perlakuan tersebut, kita bisa kembali ke urutan semula dengan mengklik “Inbox”
Bagaimana Gmail melakukannya?
Server Gmail akan mengidentifikasi pesan email mana yang dikategorikan penting, bisa dari history alamat email yang pernah kita kirim, chat yang paling sering dan seberapa sering kita berkomunikasi via email dan juga beberapa kata kunci yang sering disebut dalam email yang kita baca.
Baca selengkapnya di sini
Bermain dengan Style Message Box
Di era web 2.0 sekarang, memunculkan pesan kepada pengguna setelah melakukan satu eksekusi adalah satu hal yang diperlukan. Para developer wordpress plugin juga semestinya melakukan hal ini terhadap plugin yang dikembangkannya.
Di dasbor wordpress sering kita jumpai informasi yang muncul di atas halaman (contohnya: informasi mengenai adanya wordpress versi terbaru). Bagi para developer, hal ini berguna untuk meng-generate error atau pesan lainnya tanpa perlu membuat style tambahan.
Output untuk message box pada wordpress di-generate sebagai berikut:
<div id="message" class="updated">
<p>
Output
</p>
</div>
Message yang di-generate untuk keperluan (misalnya) plugin, tentu memuat informasi yang berbeda. Untuk itu, wordpress sendiri memiliki beberapa class stylesheet untuk message box tersebut. Berikut adalah beberapa class yang bisa digunakan…
<div id="message" class="updated">...</div>
<div id="message" class="error">...</div>
<div id="message" class="updated highlight">...</div>
<div id="message" class="updated below-h2">...</div>
Catatan:
Sebaiknya tidak menggunakan format sendiri, karena secara psikologis, dengan menggunakan format yang terintegarsi dengan wordpress akan membuat plugin yang dikembangkan menjadi lebih “terpercaya”.
Sumber: wpengineer
Mencegah Klien Mengubah Theme WordPress
Ketika kita menggunakan wordpress untuk proyek-proyek pembangunan website, terkadang kita menjumpai klien (yang notabene “awam”) yang begitu “kreatif” mengeksplorasi halaman wordpress admin, sehingga tanpa sengaja mengganti/switch theme menjadi theme default tanpa dia sadari.
Untuk mencegah kasus seperti itu, sedikit tips dari soulsizzle.com bisa menjadi alternatif pemecahannya.
Tambahkan kode berikut pada file functions.php anda:
add_action('admin_init', 'remove_theme_menus');
function remove_theme_menus() {
global $submenu;
unset($submenu['themes.php'][5]);
unset($submenu['themes.php'][15]);
}
Unit PNG Fix: Alternatif Siasat untuk Mengatasi Masalah PNG Transparan pada IE 6
Tempo hari, saya pernah membahas mengenai PNG Transparan untuk Windows IE 5.5 dan 6. Di situ saya menggunakan jquery.pngFix.js untuk mengatasi permasalahan transparansi file PNG untuk IE 6 ke bawah. Namun ternyata, siasat tersebut terbentur ketika kita menggunakan file png untuk background repeat.
Setelah saya coba cari lagi, saya menemukan solusi yang terbaik (saat ini) untuk mengatasi permasalahan png transparan pada IE 6 ke bawah ini, yaitu unitpngfix.
Berikut adalah beberapa fakta, mengapa saya merekomendasikan unitpngfix ini:
- Javascript yang dipakai terbilang ringan (kurang dari 2kb!).
- Menyelesaikan masalah yang diakibatkan oleh atribut filter IE.
- Bisa diimplementasikan untuk objek
imgdanbackground-.- image
- Berjalan secara otomatis sebelum halaman di-load untuk semua elemen atau elemen tertentu.
- Bisa dipakai untuk elemen
auto widthdanauto height. - Mudah dalam hal deployment atau teknis pemakaiannya.
Demo
Petunjuk Pemakaian
- Unduh file
unigpngfix.zipdi sini. - Sisipkan tag berikut pada header (antara tag
<head>dan</head>)<!--[if lt IE 7]> <script type="text/javascript" src="unitpngfix.js"></script> <![endif]--> - Unggah file
clear.gifke folder images Anda. Bukalahunitpngfix.jslalu sesuaikan path dengan directory tempat file clear.gif diunggah. - Secara default,
unigpngfixakan bekerja pada semua gambar PNG di halaman situs Anda, namun jika dibutuhkan untuk beberapa elemen tertentu, Anda cukup menambahkanclass="unitPng"pada elemen yang dibutuhkan. Penambahan class tersebut akan membuatunigpngfixhanya bekerja pada elemen yang memiliki class tersebut.
That’s it! Mulai sekarang Anda tidak akan menganggap Internet Explorer “hanya” sebagai tool untuk mengunduh Mozilla Firefox saja :p
Note:
Bagi pengguna wordpress, Unit PNG Fix ini sudah bisa digunakan dalam bentuk plugin (Unduh di sini).
Memodifikasi Tampilan Plugin WP-PageNavi pada WordPress
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.
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" />
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.
Membuat Modul Pencarian WordPress Berlaku untuk Postingan Saja
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
Saya 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:
Membuat Halaman Maintenance untuk Blog WordPress
Selain update blog, terkadang kita harus sedikit terjun membenahi masalah “teknis” misalnya pasang theme baru, upgrade wordpress (secara manual, bukan via fantastico) atau mungkin sedikit hard coding. Ketika kita melakukan hal teknis tersebut tentunya halaman depan sebaiknya kita “tutup”, bisa dengan membuat file index.html dengan tulisan “Under Maintenance”. Tapi tentu hal ini sedikit banyak akan membuat ribet karena kita harus mengarahkan url ke index.php.
Ada satu trik agar kita bisa dengan tenang “mengobrak-abrik” blog kita sementara halaman depan tetap manteng di halaman maintenance, yaitu dengan memanfaatkan konfigurasi halaman .httaccess.
- Buatlah satu halaman maintenance, dan namai, let’s say, dengan
maintenance.html - Cari file
.htaccess, biasanya terletak di halaman root. Buat file backup-nya. - Buka file
.htaccessuntuk diedit. - Gantilah dengan code seperti di bawah ini:
RewriteEngine on RewriteCond %{REQUEST_URI} !/maintenance.html$ RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123 RewriteRule $ /maintenance.html [R=302,L] - Gantilah
123\.123\.123\.123di line 3 dengan IP address anda (Masa gak tau? :P). Pastikanlah anda memakai syntax yang sama lalu Save - Sekarang, pengunjung blog anda akan di-redirect ke halaman maintenance anda.
- Ketika “pekerjaan” anda kelar, anda bisa mengembalikan file
.httaccessseperti semula.
File .httaccess adalah file yang berisi perintah-perintah untuk webserver Apache. Dalam kasus ini, .httaccess mengontrol agar pengunjung yang berasal dari IP address yang berbeda dengan 123.123.123.123 akan di-redirect ke file maintenance.html.
Dengan mengganti 123.123.123.123 dengan IP address anda membuat anda bisa tetap mem-browse halaman blog anda secara normal ketika yang lain di-redirect ke halaman maintenance.html.