CSS3 Accordion Tanpa JavaScript


Masih terkait dengan postingan CSS1K yang lalu, jika anda melihat demo CSS saya yang berjudul “1024-bytes” efek visualnya memang sangat terpengaruh dari efek accordion.

Biasanya, untuk membuat efek visual seperti accordion ini perlu digunakan JavaScript dikarenakan efek animasi yang tidak dimiliki CSS2.1, namun seiring perkembangannya khususnya dengan hadirnya fitur “transition” di CSS3 maka sebuah komponen accordion dapat dibuat murni menggunakan CSS.

Meski demikian terdapat beberapa keterbatasan daripada pembuatan accordion menggunakan CSS:

Bahwa pada dasarnya CSS tidak memiliki event listener untuk mouse click, namun bukan tidak ada cara sebenarnya, untuk menyiasati event click ini bisa digunakan trik yang memanfaatkan :target selector, hanya saja dengan syarat tiap elemen dari accordion memiliki nilai attribute href yang unik (itulah mengapa pada demo CSS saya accordionnya bereaksi pada event mouse hover saja karena markup HTML-nya sudah ditentukan dari sananya, tidak bisa diubah).

Kemudian pula, accordion yang dibuat menggunakan murni CSS ini adalah bersifat fixed (tidak fluid/responsive) dikarenakan nilai ukuran tidak dapat berdasar proporsi/perbandingan ukuran dengan elemen parentnya (yang kalau menggunakan JavaScript ini mudah saja dihitung) namun ditentukan besarnya secara fix.

Terakhir, tentu saja tidak semua browser mendukung fitur-fitur CSS terbaru ini, karena browser-browser lama belum memiliki implementasi CSS3. Berdasarkan data dari Mozilla (https://developer.mozilla.org/en/CSS), berikut daftar fitur yang didukung dan versi browsernya:

“transition / -webkit-transition / -moz-transition” property:
Chrome 1.0+, Safari 3.0+, Firefox 4.0+, Opera 10.5+, IE?

“:target” selector:
Chrome 1.0+, Safari 1.3+, Firefox 1.3+, Opera 9.5+, IE 9+

Tips & Trik Minimisasi CSS ala CSS1K


Jika anda mengikuti perkembangan dunia persilatan, eh, maksud saya.. perCSSan, mungkin pernah mendengar CSS1K, apa itu? CSS1K merupakan sebuah situs yang diinisiasi oleh Jacob Rask (seorang software developer di Opera) yang dimaksudkan untuk mendemonstrasikan kemampuan layout CSS (mirip-mirip CSS Zen Garden) namun dengan ukuran yang hanya 1KB (mirip seperti kontes JS1K). Adalah sebuah tantangan tersendiri tentunya untuk bisa membuat sebuah visualisasi kreatif atas sebuah struktur HTML tertentu namun dengan jumlah karakter CSS yang dibatasi maksimum sebanyak 1 Kibibyte. Dengan 1 Kibibyte sama dengan 1024 bytes dan 1 karakter menghabiskan 1 byte, maka batasannya adalah 1024 karakter, sebuah jumlah yang sedikit dibandingkan ukuran stylesheet pada umumnya.

Diantara demo yang ada, "Typhon" by eswat, merupakan salah satu tema favorit saya

Setiap orang boleh berpartisipasi dengan mengirimkan tema CSSnya melalui email atau github, saya sendiri mensubmitnya lewat pull request di github ke https://github.com/jacobrask/CSS1K/ karena kebetulan punya akun github dan lebih praktis saja rasanya. Bagaimana demonya? bisa dilihat di situs CSS1K, silakan cari yang mana hehe.. 😀 Prototip CSS yang saya buat awalnya memang jauh lebih besar dari 1024 bytes, wajar karena banyak elemen yang distyle sedemikian rupa, sehingga akhirnya harus memutuskan untuk menghilangkan banyak rule yang sebenarnya menarik namun tidak terlalu berdampak pada konsep desain yang saya buat secara keseluruhan. Setelah itu dirasa tidak dapat dikurangi lagi namun masih belum memenuhi batas 1K, masih ada beberapa cara yang bisa dilakukan untuk meminimisasi ukuran CSS, berikut saya rangkumkan diantaranya:

1. Satukan beberapa selector yang sebagian besar atau seluruh nilai propertiesnya redundant

Sebagai contoh, lihat kesamaan rule antara kedua selector ini:

h1 {
    color: red;
    font-weight: bold;
    text-align: center;
}
h2 {
    color: blue;
    font-weight: bold;
    text-align: center;
}

dengan menyatukan kesamaannya, kita dapat menyederhanakannya menjadi:

h1, h2 {
    color: red;
    font-weight: bold;
    text-align: center;
}

h2 {
    color: blue;
}

2. Manfaatkan CSS shorthand untuk menyatukan properties setipe yang bisa disatukan

Beberapa shorthand antara lain font, background, margin, padding, list-style, dst. Sebagai contoh:

font-family: sans-serif;
font-size: 12px;
line-height: 20px;

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;

dapat disederhanakan menjadi cukup

font: 12px/20px sans-serif;

padding: 5px 10px 15px;

3. Gunakan selector equivalen yang terpendek yang paling mungkin

Ada banyak cara untuk menunjukkan sebuah elemen, apakah itu melalui id, class, atau attribute. Gunakan mana yang paling pendek diantara kesemuanya. Sebagai contoh misalkan ada sebuah elemen HTML seperti ini

<a id="faisalman" class="anchor" href="#">a link</a>

pada CSS kita dapat menunjukkan elemen ini dengan banyak cara

#faisalman {}
a.anchor {}
a[href="#"] {}
a[customattr="apapunlah"] {}

kita dapat memilih salah satu diantara kesemuanya, meskipun tidak selalu yang terpendek bisa dipilih karena tergantung lingkup selector yang diinginkan juga.

4. Hapus semicolon paling akhir di setiap rule

Titik koma di akhir bersifat optional, sehingga pada contoh di bawah ini

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

kita bisa hilangkan tanda titik koma di ujungnya menjadi

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

5. Hapus whitespace yang tidak perlu

Spasi dianggap sebagai sebuah karakter yang termasuk dalam 1KB, karena itu salah satu cara termudah untuk meminimisasi adalah dengan meminimalkan penggunaan spasi. Sebagai contoh

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

bisa dituliskan menjadi

h1{margin:0 5px;padding:0;border:0;outline:0;background:transparent}

namun perhatikan bahwa ada spasi yang tidak boleh diabaikan karena untuk memisahkan 2 nilai seperti pada property margin di atas.

6. Unit dengan nilai 0 tidak perlu menggunakan satuan px

Sebagai contoh

box-shadow: 0px 0px 1px #000;

cukup dituliskan dengan

box-shadow: 0 0 1px #000;

7. Angka 0 di depan titik boleh tidak dituliskan pada unit bertipe floating point

sebagai contoh

transition: all 0.1s linear;

cukup dituliskan tanpa angka 0

transition: all .1s linear;

8. Gunakan list-style dibandingkan list-style-type jika tidak menggunakan custom image atau posisi pada list

Masih berhubungan dengan CSS shorthand, jika kita hanya menset nilai tipenya

list-style-type: none;

cukup tuliskan shorthandnya saja

list-style: none;

9. Gantikan nilai none dengan 0 dimana bisa

Salah satunya pada property border, dimana kita dapat menggantikan

border: none;

dengan

border: 0;

karena pada property border, masih berhubungan dengan bahasan CSS shorthand, keduanya merujuk pada property yang berbeda, dimana

border: none;

merupakan kependekan dari

border-style: none;

sedangkan

border: 0;

merupakan kependekan dari

border-width: 0;

Namun karena pada akhirnya keduanya menghasilkan efek yang sama, menggunakan 0 jelas lebih singkat dari none bukan?

10. Persingkat nilai hexa warna hingga ke 3 digit terdekat

Untuk menghemat karakter kita bisa melakukan antara lain dengan mengubah ke nilai terdekat yang sama untuk setiap #RRGGBB sehingga cukup dituliskan #RGB, tentu saja dengan kompensasi berupa warna yang tidak sesuai asalnya lagi meskipun mirip. Sebagai contoh

color: #f3e597;

nilai tiap warna terdekatnya bisa kita tuliskan menjadi

color: #ffee99;

sehingga cukup dituliskan nilai ekuivalennya

color: #fe9;

Selain itu, yang menarik ada definisi warna yang cukup singkat yaitu warna merah dimana kita cukup menuliskan

color: red;

lebih singkat penulisannya (3 karakter) dibandingkan jika kita menuliskan nilai hexanya (4 karakter) yaitu

color: #f00;

11. kalau jumlah direct child hanya 2, kita bisa mengganti last-child selector dengan adjacent selector

Misalnya, jika a sebagai child dari li hanya berjumlah 2, maka

li > a:last-child { }

adalah equivalen dengan

li > a+a { }

12. kalau jumlah direct child hanya 1, cukup ganti tipe elemen child tersebut dengan tanda bintang saja

Karena tipe child sudah dapat dipastikan, kita tidak perlu menuliskannya, sehingga

article > section:hover { }

secara pasti bisa kita ganti dengan

article > *:hover { }

13. Dan lain-lain

Masih banyak lagi sebenarnya tips lain yang mungkin belum tercakup disini hanya saja belum kepikiran.. 😛 Akhirul kalam, mohon maaf kalau ada salah-salah kata, dan kalau ada yang ingin berbagi trik-trik lain dalam hal menghemat karakter CSS silakan tambahkan lewat kolom komentar dibawah 😉

Beberapa referensi dan tautan lain yang mungkin berhubungan dengan bahasan ini:
CSS1K @Github
– The 30 CSS Selectors you Must Memorize
– Introduction to CSS Shorthand

Setting Proxy Pada Linux Console


Nyobain yum atau command lainnya yang ngambil data dari internet tetapi selalu gagal karena terhalang proxy? bahkan meskipun di web browsernya sudah disetting dengan akun yang terautentikasi pula? nah itulah yang saya alami… (karena akses internet di kampus mesti make akun AI3 untuk bisa lewat si cumi)… solusinya? Secara umum, dari apa yang saya baca di salah satu thread forum yang membahas ini, akses dari console (command line di linux) memang tidak secara otomatis ikut tersetting. Untuk itu kita perlu menset akses proxy dengan menambahkan environment variable http_proxy pada shell, caranya adalah dengan mengetikkan command pada linux console:

export http_proxy="http://namausernya:passwordnya@alamatproxyservernya:nomerportnya/"
# Contoh:
export http_proxy="http://faisalman:password@cache1.itb.ac.id:8080/"
export ftp_proxy="http://faisalman:password@cache1.itb.ac.id:8080/"
export no_proxy="localhost, 127.0.0.1, .itb.ac.id, 167.205.0.0/16"

Sebaliknya, jika sudah kembali menggunakan akses internet yang direct connection (tidak menggunakan proxy), set ulang dengan command pada linux console:

export http_proxy=""
export ftp_proxy=""
export no_proxy=""

Untuk memeriksa settingan proxy mana yang sedang digunakan kita dapat melihatnya dengan mengetikkan command pada linux console:

echo $http_proxy
echo $ftp_proxy
echo $no_proxy

Alternatif lain, kita dapat mendefinisikan sendiri sebuah fungsi untuk mensetting akun proxy dengan menggunakan shell script sehingga nantinya tinggal mengetikkan nama fungsi pada shell dan mengisi variabel-variabel yang dibutuhkan. Caranya yaitu dengan buat sebuah file shell script di dalam folder /etc/profile.d berekstensi .sh jika menggunakan bash (yang paling umum digunakan di linux) atau .csh untuk c-shell, kita bisa mengecek jenis shell apa yang digunakan ketikkan perintah pada consolenya:

echo $SHELL

Misalkan file shell script yang akan dibuat namanya settinganproxy.sh, maka ketikkan perintah pada linux console:

sudo nano /etc/profile.d/settinganproxy.sh

Berikan baris script berikut pada file shell script tersebut dalam nano[1] text editor:

# Setting akses proxy
function setaksesproxy()
{
  echo -n "proxy: "
  read -e alamatproxy
  echo -n "port: "
  read -e nomerport
  echo -n "username: "
  read -e namauser
  echo -n "password: "
  read -es proxypass
  echo -n "domain tanpa proxy: "
  read -e exclude
  echo ""
  export http_proxy="http://$namauser:$proxypass@$alamatproxy:$nomerport/"
  export ftp_proxy="http://$namauser:$proxypass@$alamatproxy:$nomerport/"
  export no_proxy="localhost, 127.0.0.1, $exclude"
}

# Clear proxy
function setnoproxy()
{
  export http_proxy=""
  export ftp_proxy=""
  export no_proxy=""
}

Sehingga di shell consolenya linux kita tinggal mengetikkan nama fungsinya saja dan mengisi input-inputnya sajah 😀

Konfigurasi di atas menggunakan asumsi bahwa jaringan ber-proxy tidak digunakan setiap saat, atau menggunakan jaringan ber-proxy yang berbeda-beda, atau akun yang digunakan berbeda-beda. Sedangkan jika setting proxy dibutuhkan setiap saat, mungkin perlu juga untuk menyimpan akun dan password proxy pada user tertentu yaitu dengan mengedit file .bash_profile (file gak kelihatan karena hidden) yang terletak di home directory dari user yang diinginkan untuk diberikan autentikasi proxynya, tinggal ketikkan perintah pada linux console:

nano /home/namauseryangdiinginkan/.bash_profile

Berikan baris perintah berikut pada file tersebut:

export http_proxy="http://namausernya:passwordnya@alamatproxynya:nomerportnya/"
export ftp_proxy="http://namausernya:passwordnya@alamatproxynya:nomerportnya/"
export no_proxy="domain-atau-IP-address-tanpa-proxy-misalnya-127.0.0.1"

Footnote:
[1] Nano merupakan program editor pada console linux yang biasanya sudah terinstall secara default, jika tidak ada silakan menggunakan editor favorit lain semisal vim, emacs, dll

Beberapa Masalah Install di Fedora dan Solusinya


Beberapa hari yang lalu saya coba menginstall Fedora (distro linux yang merupakan kelanjutan Redhat versi komunitas dan termasuk salah satu distro yang populer)  lewat flashdisk dengan cara membuat Live USBnya dari file ISO pake UNetbootin[1] (ISO imagenya bisa didapat di http://fedoraproject.org/en/get-fedora-all). ISO yang saya gunakan Fedora-12-x86_64-Live-KDE.iso, kenapa Fedora 12? karena itu versi stable release yang terbaru saat ini (Maret 2010) dengan Fedora 13 yang masih versi beta, x86_64 karena laptop saya yang prosesornya Core2Duo sudah mendukung 64-bit, K desktop environment karena saya suka tampilannya KDE 😀 ..

Lewat installer dengan GUI yang intuitif akhirnya ia berhasil saya install ke laptop dengan cepat dan menyenangkan. Namun.. jreng3x.. setelah selesai menginstall Fedora di laptop, saya menemui beberapa problem.. wah kumaha yeuh? but it’s ok, tinggal lihat panduan dokumentasinya[2] saja kan? atau kalaupun tidak berhasil biasanya solusinya bertebaran di banyak situs[3] dan forum[4], tinggal googling sajah[5]. Kecuali beberapa masalah yang spesifik distro, biasanya untuk distro linux apapun solusi masalahnya hampir sama. Hanya saja, untuk tipe komputer berbeda ada kemungkinan masalah yang timbul berbeda pula karena perbedaan konfigurasi hardware, jadi kadang perlu tau juga hardware yang bermasalah tipenya apa, biar gampang googlingnya.

Berikut list problem setelah saya nginstall Fedora di laptop Axioo saya:

1. Resolusi Layar
Setelah diinstall, resolusi layar di laptop tidak secara otomatis diset ke mode WXGA (1280×800), di System Settings > Display hanya ada 2 pilihan resolusi yaitu 640×480 dan 800×600.. wadduh.
Saya bingung dan cari-cari di google ternyata solusinya mudah, Lanjutkan membaca “Beberapa Masalah Install di Fedora dan Solusinya”

Facebook Chat via Pidgin


Teman sebelah (kalau ada) sedang buka Facebook juga kan? ya ya ya, tidak heran, berdasarkan catatan Alexa [1], Facebook merupakan situs web yang paling populer di Indonesia. Dari sekian banyak fasilitas yang ada, salah satu fitur yang digemari di Facebook adalah kemampuan chat di dalam tampilan webnya langsung, meskipun kadang cukup mengganggu. Nah, bagaimana caranya mengaktifkan Facebook Chat di luar situs webnya?

Mungkin ada 1001 cara supaya bisa menggunakan fitur Facebook Chat di luar situs Facebook lewat aplikasi-aplikasi pihak ketiga apapun itu.  Pada kesempatan ini saya mencoba salah satu IM yang banyak digunakan selain YM (Yahoo! Messenger), yaitu Pidgin (yang dulu namanya GAIM).

Ada banyak cara juga supaya bisa masang Facebook Chat di Pidgin, antara lain:

Cara 1:
Pasang plugin Pidgin-Facebook Chat[2]
Download dan Install sahaja pluginnya di http://code.google.com/p/pidgin-facebookchat/downloads/list

Cara 2:
Menggunakan protokol XMPP (Jabber) [3]
– Buka program Pidgin
– Klik menu “Accounts”
– Pilih menu “Manage Accounts”
– Klik tombol “Add”
– Settingan di bagian tab “Basic”:

* Protocol: XMPP
* Username: <masukin username Facebook>
* Domain: chat.facebook.com
* Resource: Pidgin
* Password: <masukin password Facebook>
* Local alias: <masukin nama Facebook>

– Settingan di bagian tab “Advanced”:

* Connect port: 5222
* Connect server: chat.facebook.com
* Hilangkan ceklis di pilihan “Require SSL/TLS”

Untuk melihat settingan jelasnya, login dulu ke Facebook, buka http://www.facebook.com/sitetour/chat.php kemudian pilih Instant Messengernya, apakah Pidgin, Adium, iChat, dll.

Belum punya Pidgin? unduh sahaja installernya di http://www.pidgin.im/

***

Referensi:
[1] http://www.alexa.com/topsites/countries/ID
[2] http://code.google.com/p/pidgin-facebookchat/
[3] http://www.facebook.com/sitetour/chat.php

1001 Tips & Trik Blog WordPress


Sebagai pengguna WordPress, mungkin pernah suatu ketika kita melihat blog WordPress lain memiliki fitur tertentu yang keren atau justru fitur-fitur dasar hanya kita tidak tahu caranya. Misalkan “gimana cara nyisipin video YouTube di antara posting?” “gimana caranya posting lewat HP? kalau via e-mail gimana?” atau pertanyaan “apa aja sih kode smiley (emoticon) default di WP?” dan semacamnya.

Sebelum masuk ke bahasan selanjutnya, istilah ‘WordPress’ disini perlu diperjelas terlebih dahulu maknanya apakah WordPress sebagai sebuah blog hosting (seperti Blogger, Multiply) atau WordPress sebagai sebuah aplikasi web CMS (seperti Joomla, Drupal). Untuk itu kita perlu membedakan “blog wordpress” yang akan kita oprek termasuk yang mana:

1. Blog pada WordPress.com

2. Blog selain di WordPress.com yang menggunakan WordPress sebagai CMS-nya

Mengapa perlu dibedakan? karena tips dan trik untuk blog-blog tipe pertama memiliki batasan-batasan yang tidak terdapat pada tipe kedua.

Back to topic.

Sedikit perkenalan, WordPress merupakan suatu aplikasi web CMS berbasiskan PHP-MySQL yang dibuat oleh Matt Mullenweg dan kawan-kawan yang tergabung dalam Automattic. Sementara itu sebuah kaidah logis mengatakan bahwasanya yang paling tahu baik seluk beluk suatu ciptaan adalah penciptanya. Maka petunjuk yang resmi dan bisa dijamin kebenarannya tentu adalah petunjuk yang dikeluarkan oleh pencipta dari ciptaan tersebut, dalam hal ini petunjuk berupa official support website. Dari itu kita dapat merujuk ke http://en.support.wordpress.com/ untuk blog-blog yang termasuk tipe pertama pada pembagian di atas,  sedangkan untuk blog-blog yang termasuk tipe kedua dapat melihat petunjuk resminya di http://codex.wordpress.org/Main_Page.

Selamat mengeksplore 1001++ fitur menarik dari sang pemenang The Overall Best Open Source CMS Award 2009 ini. 😉

Wassalam,

F4154LMAN

Load External JPGs dengan Method loadMovie()


Menampilkan file gambar di Flash dapat dilakukan dengan beberapa cara, salah satu diantaranya dengan me-load file-file berupa JPG dari luar SWF menggunakan method loadMovie(a,b) [dengan: a = URL source, b = destination Movieclip]. Cara ini memiliki kelebihan manakala file gambar banyak dan ukuran filenya besar, karena file gambar akan diload sesuai jumlah permintaan sehingga tidak terlalu membebani resources komputer dibandingkan dengan mengimport semua file gambar dalam satu file flash.

Format file gambar yang dapat diload secara dinamis pada flash diantaranya JPG, PNG, dan GIF.  Ketiga format tersebut memiliki kelebihannya masing-masing, mana yang akan kita gunakan disesuaikan dengan kebutuhan.

Sebagai contoh disini saya membuatkan tutorial untuk membuat sebuah galeri sederhana dengan langkah-langkah pembuatannya sebagai berikut:

– Siapkan 4 buah file gambar dengan ukuran 400×250 pixel. Karena pada contoh ini yang digunakan adalah gambar daun dengan format file JPG, maka kita berikan nama “daun1.jpg”, “daun2.jpg”, “daun3.jpg”, “daun4.jpg”.

4 File JPG yg akan diload

– Buat sebuah file Flash baru dengan Lanjutkan membaca “Load External JPGs dengan Method loadMovie()”

Trik Download Halaman dari Google Books


Koleksi buku online yang ada di http://books.google.com mungkin terbilang lengkap, banyak buku-buku textbook tidak hanya tersedia deskripsinya saja tapi juga bisa dibaca gratis lewat situs ini (meski tidak semua halaman bisa dilihat, karena kebanyakan preview halamannya terbatas). Namun sayang konten bukunya tadi tidak akan ikut ke-save jika halaman webnya disave. Terus gimana cara ngesave/ngunduh isinya?

Sederhana saja ternyata caranya..

Requirement yang perlu diinstall:
Mozilla Firefox, sebagai browser yang digunakan untuk membuka halaman
– addon Firefox: Greasemonkey, untuk menjalankan script downloadernya
Google Book Downloader, script untuk download buku yang berjalan dengan greasemonkey
– addon Firefox: FlashGot, memudahkan multiple selection untuk download
FlashGet (optional), sebagai download manager
– Renamer (atau yang semacamnya), untuk mengubah nama2 file dan ekstensinya sekaligus dalam jumlah banyak (sesuai jumlah halaman yang didownload)

Langkah-langkahnya:
– Pastikan semua persyaratan di atas sudah terinstall
– Buka sebuah halaman googlebook, scroll ke bawah sampai beberapa halaman
– Klik tombol bertuliskan “download now” yang ada di samping, script akan men-generate halaman
– Setelah script selesai, seleksi semua halaman yang muncul kemudian klik kanan > ‘FlashGet’ atau Browser built-in (kalau gak nginstall flashget)
– Setelah proses download selesai, ubah ekstensi semua file menjadi .PNG dengan Renamer

Trik ini saya dapatkan dari http://book.huhiho.com/, setelah melakukan googling sebentar lewat http://www.google.com 😀

Tidak semua buku bisa didownload secara full (dapet semua halamannya) ini hanya bisa didapatkan jika buku-buku tersebut status tampilannya utuh, sedangkan untuk buku2 yang pratinjaunya terbatas hanya halaman-halaman tertentu yang bisa dilihat previewnya saja yang bisa didownload.. hmm sayang sekali 😦 mungkin ada yang sudah menemukan trik download full untuk buku2 yang berstatus pratinjau terbatas? silakan share disini..

Buat URL Halaman Profile di Facebook dengan Nama Sendiri


13 Jam yang lalu (eh bener gak ya?), tepatnya tanggal 13 Juni 2009 pukul 00:01 GMT-4, Facebook mulai memperkenankan penggunanya untuk mengganti URL profilenya dengan sebuah nama atw nickname pilihan pribadi sebagai alternatif halaman profil yg biasanya dengan URL berupa nomer id di Facebook.

Misalkan yang halaman profilnya beralamat di

http://www.facebook.com/profile.php?id=123456789

bisa juga diakses lewat usernamenya tersebut

http://www.facebook.com/namasayaygkerenabisgitulho
(ini mah misal, jangan ditiru di rumah ya anak-anak..)

.

“oh gitu ya…
oke, oke, terus caranya gimana?
penasaran gw..”

.

Gampang koq, kalau udah login, kita tinggal masuk ke

http://www.facebook.com/username
kemudian input sebuah nama yang unik (cek dulu availabilitynya).. selesai sudah.

Cuman yang perlu diperhatikan sebelum masukin sebuah nama perlu dipikir dulu masak-masak, soalnya sekali pilih gak bisa ganti atw diubah-ubah lagi tuh URL-name utk halaman profilnya (sama kayak bikin halaman profile Friendster)… dan sistemnya siapa cepat dia dapat, jadi untuk yang namanya pasaran, cepat-cepatlah sebelum namanya diambil orang atau buat aja nickname yang unik.. Terakhir, bagi pengguna Facebook yg daftarnya masih baru-baru (setelah 9 Juni dst)  kayaknya perlu menunggu beberapa hari lg utk bisa mengakses fitur ini..

Trik Posting SourceCode di WordPress


Apakah anda orang yang sedang membuat tutorial pemrograman pada blog anda di WordPress? anda ingin menyertakan script program yang syntaxnya dihighlight secara otomatis pada tulisan anda tapi kebingungan tidak tahu caranya? Jangan khawatir.. kami punya solusinya..

*hehe gaya iklan banget 😀

Caranya adalah dengan menulis script program anda diantara tag
[ sourcecode lang=”abc” ] dan [ /sourcecode ]. Parameter language yg disupport: actionscript3, bash, coldfusion, cpp, csharp, css, delphi, erlang, fsharp, diff, groovy, javascript, java, javafx, matlab (keywords only), objc, perl, php, text, powershell, python, ruby, scala, sql, vb, xml.

Jika bahasa pemrograman yang anda inginkan tidak disupport oleh fitur syntax highlightingnya WordPress, pilih saja diantara bahasa-bahasa tersebut yang paling mirip syntaxnya. Misalnya saya sendiri biasa menulis ActionScript dan menggunakan parameter ‘javascript’ karena syntax ActionScript 2.0 mirip dengan JavaScript.

Contoh sebuah script C++ sebelum dikasih tag “sourcecode”:

#include
#include

int main(int argc, char *argv[])
{
QApplication app (argc, argv);
QLabel *label = new QLabel(“Hello Qt!”, 0);
app.setMainWidget(label);
label->show();
return app.exec();
}

//initulisansengajadibuatpanjangpanjanguntukngetesthorizontalscrollnyajalanapakagakgitulohjadidianggapnyasatubarispenuhgakkepotong

setelah dikasih tag dg lang-param ‘cpp’:

#include <qapplication.h>
#include <qlabel.h>

int main(int argc, char *argv[])
{
QApplication app (argc, argv);
QLabel *label = new QLabel("Hello Qt!", 0);
app.setMainWidget(label);
label->show();
return app.exec();
}

//initulisansengajadibuatpanjangpanjanguntukngetesthorizontalscrollnyajalanapakagakgitulohjadidianggapnyasatubarispenuhgakkepotong

Beberapa error yang biasanya timbul adalah scriptnya gak ke’render’ sebagaimana mestinya. Dari beberapa kejadian yang saya alami, bisa saya ambil kesimpulan ini karena nulis tagnya di tempat lain baru dicopy ke blog.. ternyata tanda apostrof (tanda koma yg suka ada di atas seperti ini -> ‘) di editornya WP dianggap beda dengan symbol apostrof di text editor lain. Jadi solusinya buatlah tag [ sourcecode language=”xyz” ][ /sourcecode ] pada editor blog.. biasanya cara ini ampuh. Error lain yang suka ada misalnya symbol & tiba-tiba jadi & atau simbol < jadi < kalau gini biasanya tinggal diedit saja di editor WYSIWYG-nya WordPress..

Demikianlah kiranya yang dapat saya sampaikan pada kesempatan hari ini, moga-moga trips nan singkat ini bisa dimanfaatkan sebaik-baiknya oleh para penulis blog tutorial,

Wassalam 8)
-F4154LMAN-

Referensi:
http://en.support.wordpress.com/code/posting-source-code/