About

Planet Bloggerian adalah aggregator daripada tulisan-tulisan members Forum Bloggerian.

Subscribe

Untuk mendaftar, menghubungi kami, kasih kritik, saran dll, silakan isi Contact Form.

Desclaimer

The intellectual property of the content that is found in this website belongs exclusively to the origin authors.

Statistics

Bloggerian Top Hits

Feeds

3318 items (3314 unread) in 34 feeds

  • Mencegah Klien Mengubah Theme WordPress

    Posted: August 4th, 2010, 4:07pm WIT by Aban Nesta
    TagsWordpress  

    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]);
    }
    
    Permalink for 'Aban/2010/08/04/Mencegah_Klien_Mengubah_Theme_WordPress'
  • Unit PNG Fix: Alternatif Siasat untuk Mengatasi Masalah PNG Transparan pada IE 6

    Posted: August 3rd, 2010, 7:14pm WIT by Aban Nesta
    TagsWebby  

    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 img dan background-
    • image.
    • Berjalan secara otomatis sebelum halaman di-load untuk semua elemen atau elemen tertentu.
    • Bisa dipakai untuk elemen auto width dan auto height.
    • Mudah dalam hal deployment atau teknis pemakaiannya.
    Demo

    Contoh PNG

    Petunjuk Pemakaian
    1. Unduh file unigpngfix.zip di sini.
    2. Sisipkan tag berikut pada header (antara tag <head> dan </head>)
      <!--[if lt IE 7]>
              <script type="text/javascript" src="unitpngfix.js"></script>
      <![endif]-->
      
    3. Unggah file clear.gif ke folder images Anda. Bukalah unitpngfix.js lalu sesuaikan path dengan directory tempat file clear.gif diunggah.
    4. Secara default, unigpngfix akan bekerja pada semua gambar PNG di halaman situs Anda, namun jika dibutuhkan untuk beberapa elemen tertentu, Anda cukup menambahkan class="unitPng" pada elemen yang dibutuhkan. Penambahan class tersebut akan membuat unigpngfix hanya 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).

    Permalink for 'Aban/2010/08/03/Unit_PNG_Fix__Alternatif_Siasat_untuk_Mengatasi_Masalah_PNG_Transparan_pada_IE_6'
  • Memodifikasi Tampilan Plugin WP-PageNavi pada WordPress

    Posted: July 16th, 2010, 10:33am WIT by Aban Nesta
    TagsWordpress  

    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

    Permalink for 'Aban/2010/07/16/Memodifikasi_Tampilan_Plugin_WP_PageNavi_pada_WordPress'
  • Membuat Modul Pencarian WordPress Berlaku untuk Postingan Saja

    Posted: July 15th, 2010, 11:06am WIT by Aban Nesta
    TagsWordpress  

    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

    Permalink for 'Aban/2010/07/15/Membuat_Modul_Pencarian_WordPress_Berlaku_untuk_Postingan_Saja'
  • Mengimplementasikan @font-face

    Posted: July 13th, 2010, 7:44am WIT by Aban Nesta
    TagsWebby  

    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:

    Permalink for 'Aban/2010/07/13/Mengimplementasikan__font_face'
  • Membuat Halaman Maintenance untuk Blog Wordpress

    Posted: February 24th, 2010, 5:59am WIT by Aban Nesta
    TagsWordpress  

    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.

    1. Buatlah satu halaman maintenance, dan namai, let’s say, dengan maintenance.html
    2. Cari file .htaccess, biasanya terletak di halaman root. Buat file backup-nya.
    3. Buka file .htaccess untuk diedit.
    4. 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]
    5. Gantilah 123\.123\.123\.123 di line 3 dengan IP address anda (Masa gak tau? :P). Pastikanlah anda memakai syntax yang sama lalu Save
    6. Sekarang, pengunjung blog anda akan di-redirect ke halaman maintenance anda.
    7. Ketika “pekerjaan” anda kelar, anda bisa mengembalikan file .httaccess seperti 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.

    Permalink for 'Aban/2010/02/24/Membuat_Halaman_Maintenance_untuk_Blog_Wordpress'
  • Perjalanan Bersama Acer AspireOne AO532h

    Posted: January 30th, 2010, 10:00pm WIT by Aban Nesta
    TagsTeknologia  

    Ketika aku melakukan perjalanan ke luar kota, aku hanya bisa menikmati alunan lagu yang terngiang dari walkman. Ketika ada pekerjaan mendadak yang urgens, aku pun tidak bisa berbuat apa-apa selain menunggu sampai di tempat tujuan dan langsung mencari warnet terdekat. Tapi itu cerita lama.

    Kini, setelah aku mempunyai netbook Acer AspireOne AO532h, perjalananku tidak lagi menjemukan. Dengan bermodalkan modem hsdpa, perjalanan yang memakan hampir setengah hari pun tidak menjadi masalah. Ketika ingin berinteraksi atau sekadar kongkow-kongkow, aku bisa manyalakan Yahoo Messenger dan mengobrol atau konfrens dengan teman-teman dan relasiku di netbook netbook Acer AspireOne AO532h-ku. Update status atau sekadar mengomentari wall post di facebook orang pun bisa dilakukan dengan mudah. Mau twitter-an atau update blog pun bisa dilakukan secara instan.

    Ketika kubuka email, ada beberapa email dari klien yang membutuhkan tindak lanjut dari jarak jauh (update website, ubah tata letak dll). Tidak masalah, aku tinggal meng-akses halaman admin website yang menjadi kerjaanku kemudian kukerjakan apa-apa yang diminta oleh klien. Dengan prosesor Intel Atom N450 (512 L2 cache, 166 GHz), yang merupakan netbook pertama di Indonesia yang menggunakan prosesor tersebut, dan memori 1GB DDR2, plus sistem operasi Windows XP Home, pekerjaan yang biasa dilakukan di kantor pun bisa dengan mudah dikerjakan di atas kereta api sekali pun, sehingga aku tidak kuatir pekerjaanku terhambat oleh lamanya waktu perjalanan.

    Setelah agak santai sedikit, aku melanjutkan hobiku mencari tutorial-tutorial desain atau sekadar memperdalam tentang wordpress. Beberapa file, baik tulisan ataupun gambar yang belum sempat kubaca online, aku simpan dalam hardisk netbook Acer AspireOne AO532h-ku. Dengan kapasitas 250 GB, tentu aku tidak akan merasa ragu untuk menyimpan file sebesar apa pun. Selain itu, aku juga bisa memainkan karakterku di gim online meskipun aku berada dalam perjalanan, sehingga aku tidak perlu merasa kuatir akan ketinggalan level di gim-ku itu.
    Oiya, mau tau warna netbook Acer AspireOne AO532h-ku? Karena warna favoritku biru, maka kupilih netbook Acer AspireOne AO532h yang warnanya Biru Safir! 2 warna lain yang tersedia adalah Perak Pearl dan merah ruby.

    Tak terasa, keretaku sudah sampai di tempat tujuan dan tahukah kamu? Netbook Acer AspireOne AO532h-ku masih anteng menyala, karena daya tahan baterainya sampai 8 jam. FYI, kalopun aku menggunakan listrik, dengan menggunakan netbook Acer AspireOne AO532h, berarti aku bisa menghemat penggunaan listrik sampai 22,2% dibanding netbook lainnya Semua aktivitas yang biasa dilakukan di kantor ataupun di rumah ternyata bisa juga dilakukan di atas kereta api dengan netbook Acer AspireOne AO532h-ku.

    Rencananya, aku akan membelikan isteriku netbook yang sama. Netbook Acer AspireOne AO532h tentu akan pas dipakai isteriku yang berprofesi sebagai guru IPA di SMP. Mengerjakan RPP, membuat soal ulangan atau untuk media mengajar akan praktis mengingat beratnya yang hanya 1,25 kg dan dimensi 10,17 x 7,28 x 0,99 inchi.

    Permalink for 'Aban/2010/01/30/Perjalanan_Bersama_Acer_AspireOne_AO532h'
  • Menghilangkan Error Message Update Otomatis yang Gagal

    Posted: January 14th, 2010, 1:20pm WIT by Aban Nesta
    TagsWordpress  

    Salah satu pengalaman berharga saya dapatkan ketika saya mencoba meng-upgrade wordpress klien. Seperti biasa, ketika ada wordpress versi terbaru, maka alert “WordPress 2.9.1 is available! Please update now.” akan terpampang di bagian atas dashboard. Tak ayal lagi, saya hajarlah itu link “Please update now”, tapi apa nyana, update otomatis gagal. Saya terpaksa melakukan proses upgrade secara manual via ftp. Tapi alert berubah menjadi “An automated WordPress update has failed to complete – please attempt the update again now.

    Sebenarnya tidak ada yang salah dengan proses upgrade, dengan kata lain, proses upgrade telah berjalan. Namun tetap saja alert tersebut menjadi sedemikian annoying (apalagi untuk klien).

    Solusinya ternyata cukup sederhana:

    1. Hapus folder upgrade yang ada di directory wp-content
    2. Hapus juga file .maintenance yang ada di root directory

    dan hilanglah alert tersebut… BTW, blog saya ternyata masih pake wordpress 2.9. Ntar aja ah update-nya hehehe….

    Permalink for 'Aban/2010/01/14/Menghilangkan_Error_Message_Update_Otomatis_yang_Gagal'
  • Menambah (Gr)Avatar Default pada Wordpress

    Posted: December 9th, 2009, 1:54am WIT by Aban Nesta
    TagsWordpress  

    Gravatar adalah satu servis yang memungkinkan munculnya avatar kita ketika memberikan komentar di blog orang lain (yang menggunakan servis gravatar juga tentunya). Sejak wordpress 2.7 diluncurkan, servis ini pun sudah terintegrasi dengan engine wordpress, sehingga kita tidak perlu meng-install plugin gravatar ataupun menambah tag gravatar secara manual. Lantas, bagaimana “nasib” para pengunjung yang tidak terdaftar di gravatar? WordPress menyediakan beberapa alternatif yang bisa dipilih untuk digunakan para pengunjung yang belum terdaftar.

    gravatar

    Namun, dengan pilihan gambar yang itu-itu saja, tentu akan membosankan. Seringkali kita menginginkan adanya gambar unik untuk gravatar default tersebut. Well, berikut saya paparkan hack untuk menambah gravatar default pada wordpress.

    Yang harus anda lakukan adalah menambah function pada function.php dan unggahlah file gambar yang akan dijadikan gravatar default (sebaiknya dimensi gambarnya tidak lebih dari 60 x 60 pixel).

    /**
     * add a default-gravatar to options
     */
    if ( !function_exists('fb_addgravatar') ) {
    	function fb_addgravatar( $avatar_defaults ) {
    		$myavatar = get_bloginfo('template_directory') . '/images/glassess.gif';
    		$avatar_defaults[$myavatar] = 'Kacamata';
    
    		return $avatar_defaults;
    	}
    
    	add_filter( 'avatar_defaults', 'fb_addgravatar' );
    }
    

    Ketika theme anda aktif, maka anda akan melihat gravatar default bertambah.

    addgravatar

    Permalink for 'Aban/2009/12/09/Menambah__Gr_Avatar_Default_pada_Wordpress'
  • Koin untuk Prita

    Posted: December 5th, 2009, 8:00pm WIT by Aban Nesta
    TagsEpisentrum  

    koinuntukprita

    Ketika saya membaca berita ini, saya tidak lantas berusaha menghakimi ataupun menyalahkan siapa pun. Tapi 204 juta rupiah untuk seorang Prita Mulyasari, terdakwa dugaan pencemaran nama baik RS Omni Internasional Alam Sutera, Tangerang, rasanya pasti teramat sangat berat. Untuk itu, saya mendukung sepenuhnya gerakan Koin Untuk Prita.

    Namanya juga gerakan spontan, tanpa hierarki, dan tanpa banyak rapat, maka wajar saja jika Koin Keadilan ini masih bolong. Misalnya?

    1. Bagaimanakah cara melaporkan perolehan koin secara periodik, baik per titik pengumpulan maupun keseluruhan?
    2. Jika ada pendukung yang berhalangan datang ke tempat pengumpulan koin, lalu ingin mentransfer, harus ke rekening siapa?
    3. Hal sama berlaku untuk pendukung yang berada di luar negeri, apakah dimungkinkan untuk menyampaikan sumbangan melalui PayPal?

    Sejauh ini belum ada solusi untuk ketiga pertanyaan tersebut. Justru Andalah yang kami harapkan memberikan saran dan solusi.

    Permalink for 'Aban/2009/12/05/Koin_untuk_Prita'