Membuat Tabel dengan HTML

Tutorial ini akan menjelaskan langkah-langkah singkat mengenai cara membuat tabel dengan HTML. Anda akan diberi beberapa penjelasan mengenai kerangka HTML tabel dari yang paling sederhana hingga menuju langkah-langkah modifikasi tampilan.

Lihat Semua Demo

Lihat demo-demo tabelnya terlebih dahulu:

Lihat Demo

Kerangka Tabel Paling Sederhana

Sebuah tabel sederhana terdiri dari elemen <table> yang diisi dengan beberapa <tr>, dimana setiap <tr> akan berisi beberapa <td>. <table> adalah table, <tr> adalah table row dan <td>adalah table data:

<table>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Header Tabel

Header tabel terbentuk dari elemen <th> (table header). Secara normal, tampilan teks di dalam header tabel akan secara otomatis bercetak tebal dan tersusun rata tengah:

<table>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Menambahkan Border

tambahkan atribut border dengan nilai bukan 0 untuk menampilkan border pada tabel:

<table border="1">
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Atribut ini sebenarnya tidak begitu penting, karena akan lebih efektif jika kita menggunakan CSSuntuk mengeset border pada tabel.

Caption/Judul Tabel

Tambahkan elemen <caption> tepat setelah kode <table> sebagai judul tabel:

<table border="1">
    <caption>Judul Tabel</caption>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Menggabungkan Sel-Sel Tabel (Merge Cell)

Ada dua atribut yang bisa Anda gunakan, yaitu colspan untuk menggabungkan kolom tabel dan rowspan untuk menggabungkan baris tabel. Nilai rowspan dan colspan menunjukkan jumlah sel yang ingin disatukan:

<table border="1">
    <caption>Judul Tabel</caption>
    <tr><th colspan="2">Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Catatan: Karena sel tabel mendapatkan atribut colspan="2", maka dua buah posisi sel akan digabungkan. Jadi, sel di sebelahnya harus dibuang. Ini berlaku juga untuk rowspan, hanya saja penggabungannya secara vertikal:

<table border="1">
    <caption>Judul Tabel</caption>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td rowspan="2">1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Mengubah Tampilan Tabel dengan CSS

Diutamakan untuk border, CSS akan membuat tampilan border pada tabel menjadi lebih baik dan lebih bisa dikendalikan:

table, th, td {
  border:1px solid purple;
}

Namun, karena border tabel secara normal tampak terpisah, kita harus mendeklarasikan border-collapse:collapse untuk merapatkan mereka:

table, th, td {
  border:1px solid purple;
  border-collapse:collapse; /* untuk menghilangkan jarak antar sel */
}

Setelah itu Anda bisa menentukan width, padding, background, font, color dan lain-lain. Beberapa properti CSS seperti vertical-align dan text-align juga nantinya akan dibutuhkan:

table {
  width:100%; /* lebar tabel menjadi sama dengan lebar kontainer */
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse; /* untuk menghilangkan jarak antar sel */
}

table caption {
  padding:.4em 0;
  font-style:italic;
  font-weight:bold;
  text-align:left;
  border-top:2px solid black;
}

table, th, td {
  border:1px solid black;
}

th, td {
  padding:1em 1.4em;
  vertical-align:top; /* membuat semua konten tabel menjadi rata atas */
  text-align:left; /* membuat semua teks di dalam tabel menjadi rata kiri */
}

th {
  background-color:#080;
  color:white;
}

Markup HTML Standar

Markup HTML tabel standar secara garis besar dapat disusun seperti ini:

<table border="1" summary="Tabel ini menjelaskan tentang perkembangan kelangsungan hidup umat manusia di tahun 2013">
    <caption>Tabel Kelangsungan Hidup Manusia</caption>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tbody>
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
    </tbody>
</table>

Setiap kelompok baris yang mengandung elemen <th> akan dibungkus kembali dengan elemen <thead> sementara kelompok baris yang mengandung elemen <td> akan dibungkus dengan elemen <tbody>

Footer Tabel

Anehnya, footer tabel harus diletakkan di sebelah atas, lebih tepatnya sebelum <tbody>. Tapi jangan khawatir, karena hasil akhirnya nanti akan tetap tampil di bagian paling bawah:

<table border="1">
    <caption>Judul Tabel</caption>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tfoot>
        <tr><td>Total</td><td>XXX</td><td>YYY</td></tr>
    </tfoot>
    <tbody>
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
    </tbody>
</table>

Berikut ini adalah salah satu uraian mengenai elemen <tfoot> dari W3:

TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.

Catatan Tambahan

Lawan border-collapse:collapse adalah border-collapse:separate
Tidak semua tabel harus dilengkapi dengan border. Lebih baik set deklarasi border hanya untuk elemen tabel yang memiliki atribut border="1":

table[border=1] {
  border-collapse:collapse;
  background-color:white;
}

table[border=1] th,
table[border=1] td {
  border:1px solid black;
  padding:1em 1.4em;
}

Dulu Saya pernah sekali mencatat beberapa kode CSS untuk HTML tabel. Anda bisa membacanya di sini. Mungkin itu akan berguna sebagai referensi tambahan.

Input Teks dengan Pelengkap Sugesti

Elemen UI ini terinspirasi dari Google, lebih tepatnya pada bagian atas dasbor Forum Blogger(2013). Ini hanyalah penerapan konsep drop-down menu sebagai pelengkap elemen input teks dan sama sekali tidak ada hubungannya dengan cara kerja filter penelusuran/sortir topik pembicaraan seperti pada grup Google.
Elemen ini bisa Anda gunakan untuk memberikan sugesti atau pilihan kata kunci secara tidak langsung tanpa harus repot-repot menuliskan perintah-perintah khusus di sekitar formulir untuk pengguna agar mereka menuliskan kata kunci seperti ini dan itu. Cukup letakkan beberapa sugesti kata kunci pada menu drop-down, maka para pengguna akan segera mengerti gambaran formulir tersebut saat mereka menampilkan menu:

HTML

<div class="input-text-wrap">
    <form action="http://your_site_name.com/search" method="get">
        <input class="text-input" type="text" name="q" autocomplete="off">
        <span class="down-arrow"></span>
        <input class="submit-button" type="submit" value="Search">
        <ul>
            <li>Wallpaper 3D</li>
            <li>Anime</li>
            <li>Manga</li>
            <li>Comics List</li>
            <li>Characters</li>
            <li>Animepedia</li>
        </ul>
    </form>
</div>

CSS

/*
  @credit: http://www.dte.web.id, https://plus.google.com/108949996304093815163/about
  font-family: Segoe,"Segoe UI",Arial,Sans-Serif
  font-size: 12px
  line-height: 30px
  border-color: #8E8E74, black
  color: #333, #666, black
  background-color: white, #FFEAD3, #EDD8BF, #E0CBB2
*/

/* outer */
.input-text-wrap {
  text-align:left;
  display:inline-block;
  background-color:white;
  border:1px solid #8E8E74;
  height:30px;
  position:relative;
  font:normal normal 12px/30px Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
  -webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
}

/* focused `.input-text-wrap` */
.input-text-wrap.focused {
  -webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  border-color:black;
}

/* resets or netralize all element inside */
.input-text-wrap input,
.input-text-wrap form,
.input-text-wrap ul,
.input-text-wrap li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  font:inherit;
  color:inherit;
  vertical-align:top;
}

.input-text-wrap input {display:inline-block}

.input-text-wrap .text-input,
.input-text-wrap .submit-button {
  height:30px;
  line-height:30px;
  font-weight:bold;
  margin:0 20px 0 5px;
  outline:none;
}

/* the text input */
.input-text-wrap .text-input {
  width:160px; /* set the text input width here */
}

/* the submit button */
.input-text-wrap .submit-button {
  width:70px;
  padding:0 0 2px;
  margin:0 0;
  background-color:#FFEAD3;
  border-left:1px solid #8E8E74;
  color:#666;
  cursor:pointer;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.4);
  box-shadow:0 0 2px rgba(0,0,0,.4);
  position:relative;
}

.input-text-wrap .submit-button:hover {
  background-color:#EDD8BF;
  color:black;
}

/* the drop-down menu */
.input-text-wrap ul {
  position:absolute;
  top:100%;
  right:-1px;
  left:-1px;
  z-index:99;
  background-color:white;
  border:1px solid black;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  display:none;
}

/* drop-down menu item */
.input-text-wrap li {
  line-height:26px;
  padding:0 10px;
  cursor:pointer;
}

.input-text-wrap li:hover {
  background-color:#E0CBB2;
  color:black;
}

/* the down arrow before the submit button */
.input-text-wrap .down-arrow {
  display:block;
  width:20px;
  height:30px;
  position:absolute;
  top:0;
  right:70px;
  cursor:pointer;
}

.input-text-wrap .down-arrow:hover,
.input-text-wrap .down-arrow.active {
  background-color:white;
  -webkit-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
  box-shadow:-1px 1px 2px rgba(0,0,0,.4);
  z-index:2;
}

.input-text-wrap .down-arrow:active,
.input-text-wrap .down-arrow.active {
  -webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
  box-shadow:-1px 1px 1px rgba(0,0,0,.2);
}

/* create the down-arrow triangle with pseudo-element and border hack */
.input-text-wrap .down-arrow:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:4px solid transparent;
  border-top-color:#666;
  position:absolute;
  top:14px;
  left:50%;
  margin-left:-4px;
}

JQuery

(function($) {

    var $inputWrap = $('.input-text-wrap'),
        $arrow = $inputWrap.find('.down-arrow');

    // Hide the dropdown menu when user click outside the `.input-text-wrap`, anywhere...
    $(document).on("click", function() {
        $inputWrap.find('ul').hide();
        $arrow.removeClass('active');
    });

    $arrow.on("click", function(e) {

        // Remove all the `focused` class and hide all visible drop-down menu
        $inputWrap.removeClass('focused').find('ul:visible').hide();
        // Remove al the `active` down arrow
        $arrow.removeClass('active');

        // Toggle the `.down-arrow` active class
        $(this).toggleClass('active')
            // Add a `focused` class to the `.input-text-wrap`
            .closest('.input-text-wrap').addClass('focused')
                // Show or hide the dropdown `ul`
                .find('ul').toggle()
                    // When we click the `li`...
                    .find('li').on("click", function() {
                        // Set the input text value to the clicked `li`'s text
                        $(this).closest('.input-text-wrap').find('.text-input').val($(this).text())
                            // and trigger the focus event to it
                            .trigger("focus");
                        // After that, hide the visible dropdown menu
                        $(this).parent().hide();
        });

        // Prevent event bubbling!
        e.stopPropagation();

    });

    // When the text input focused...
    $inputWrap.find('.text-input').on("focus", function() {
        // Add a `focused` class to the `.input-text-wrap`
        $(this).closest('.input-text-wrap').addClass('focused');
    // When the text input loses the focus...
    }).on("blur", function(e) {
        // Remove the `focused` class from `.input-text-wrap`
        $(this).closest('.input-text-wrap').removeClass('focused');
    });

})(jQuery);

Demo

Selasa, 29 Januari 2013

Bagaimana Cara Bertanya yang Baik di dalam Sebuah Blog/Forum/Grup/Komunitas?

Terutama komunitas dunia maya. Pada dasarnya ini bisa dijadikan sebagai panduan untuk mendapatkan jawaban yang memuaskan dari seorang administrator blog atau anggota dari blog tersebut atau pengunjung blog tersebut, tapi Saya coba perluas lagi agar artikel ini juga bisa berguna untuk orang-orang yang ingin memulai bergabung dengan sebuah grup atau forum tertentu.
Jika selama ini kamu mengalami masa-masa seperti, menanyakan sesuatu dalam sebuah grup atau forum tetapi tidak pernah mendapatkan tanggapan dari para anggota, atau bahkan ditendang dari forum tersebut, mungkin masalahnya bukan berasal dari dirimu secara pribadi, tetapi berasal dari cara kamu bertanya yang salah. Berikut ini ada beberapa pola pertanyaan atau percobaan pemecahan kasus pribadi yang sebaiknya dihindari:

Hindari Pertanyaan yang Terlalu Miskin/Terlalu Luas

Contoh-contoh pertanyaan yang miskin/terlalu luas adalah seperti ini:

1. “Kenapa tidak berhasil?”
2. “Kok di blog Saya tidak jadi?”
3. “Saya sudah menginstal plugin X tetapi kenapa tidak bekerja?”

Pertanyaan di atas semuanya tidak mungkin bisa dijawab karena kamu tidak memberikan petunjuk-petunjuk yang jelas mengenai masalah yang sedang terjadi. Justru, pertanyaan-pertanyaan di atas hanya akan menimbulkan pertanyaan-pertanyaan baru seperti: “Tidak jadi bagaimana?”, “Tidak berhasil bagaimana?”, “Tidak bekerja bagaimana?”, “Apanya yang tidak berhasil?”, “Di mana masalah itu terjadi?” (atau yang paling buruk ⇒ “???”).
Berikan beberapa petunjuk yang jelas mengenai apa yang terjadi, bukan sekedar kesimpulan kegagalan. Selain itu, pertanyaan-pertanyaan seperti: “Kenapa tidak berhasil?” dan “Kenapa Saya gagal?”, semua itu sebenarnya adalah pertanyaan yang seharusnya ditanyakan kepada diri sendiri, bukan kepada orang lain.

Sesuaikan Tema Pembahasan

Jangan bertanya keluar dari topik pembahasan, meskipun pertanyaamu sangat berkualitas. Masalahnya adalah, sangat disayangkan jika pertanyaanmu bagus tetapi tidak sesuai dengan topik pembicaraan. Pertanyaanmu itu sebenarnya bisa dijawab dan akan sangat berguna untuk orang banyak jika dibagikan. Tetapi kalau pertanyaan tersebut dilontarkan di tempat yang tidak tepat, bagaimana orang lain yang membutuhkan jawaban itu bisa menemukannya?
Pikirkanlah mengenai mesin pencari. Orang-orang yang suka belajar secara mandiri (otodidak) di internet pasti akan menggunakan mesin pencari atau fasilitas pencarian sebuah situs/grup/komunitas untuk mencari jawaban dari masalah yang sedang dialaminya —atau setidaknya mencoba untuk menemukan pembahasan yang sesuai dengan masalah yang sedang dia alami. Kalau sejak awal proses diskusi dilakukan di tempat yang salah, maka diskusi tersebut tidak akan pernah bisa ditemukan. Akibatnya, orang-orang akan menanyakan persoalan yang sama berulang kali hanya dengan alasan bahwa mereka tidak berhasil menemukan jawabannya saat mereka mencarinya. Padahal sebenarnya persoalan tersebut sudah pernah terjawab/terpecahkan sebelumnya.
Jika sejak awal kita sudah melakukan diskusi di tempat yang benar dan dalam topik pembahasan yang tepat, maka orang lain akan dengan mudah menemukan jawaban yang mereka cari suatu saat (Kesimpulannya: Mereka tidak perlu bertanya). Dan jika sewaktu-waktu ada seseorang yang menanyakan kasus yang sama, maka kita cukup mengarahkan mereka saja menuju diskusi yang sudah pernah kita lakukan sebelumnya.

Tanyakan Sesuatu yang Bisa Dijawab, Bukan Diuraikan

Pertanyaan yang baik adalah pertanyaan yang bisa menghasilkan jawaban yang singkat tetapi berguna. Hindari pertanyaan-pertanyaan seperti ini saat kamu mencoba bertanya di dalam sebuah forum/grup:

“Bagaimana cara membuat blog?”

Cobalah lebih spesifik. Misalnya seperti, “Saya ingin membuat blog menggunakan Blogger, cara mendaftarkannya bagaimana?”
Meskipun sebenarnya pertanyaan itu masih bisa dibuat lebih spesifik lagi.

Jangan Membuat Pertanyaan yang Hanya Bisa Dijawab dengan Jawaban “ya” dan “tidak”

Pola-pola pertanyaan semacam ini tidak ideal untuk dituliskan di dalam forum. Pertanyaan semacam ini hanya boleh diterapkan jika situasinya sedang berada dalam keadaan komunikasi yang bersifat obrolan. Membuat pertanyaan yang hanya akan menimbulkan jawaban “ya” dan “tidak” hanya akan memaksa para pembaca lain untuk mengetahui suatu fakta yang terlalu sederhana dan belum tentu mereka butuhkan. Pertanyaan semacam ini juga bisa membuang-buang waktu. Beberapa contoh pola pertanyaan yang termasuk ke dalam kategori ini:

1. “Apakah widget ini akan membuat blog Saya menjadi lebih lambat?”
2. “Apakah ini bisa diterapkan pada blog Saya?”
3. “Apakah jika Saya memberikan warna seperti ini akan merusak penampilan?”
4. “Apakah jika Saya menggabungkan widget ini dengan plugin itu masih bisa tetap bekerja?”

Semua pertanyaan di atas pada dasarnya sama persis, dan bisa dengan mudah dijawab dengan ini:

“Masalah ya dan tidak Saya tidak tahu. Cobalah sendiri dan lihat hasilnya. Apakah sesuai dengan dugaanmu atau tidak? Jika sesuai, itu berarti ya jika sebaliknya berarti tidak. Titik”.

Gunakan Istilah-Istilah Sesuai dengan Kemampuan

Jangan mencoba-coba untuk menggunakan istilah yang sulit saat bertanya, bisa-bisa kamu malah akan ditertawakan atau diabaikan karena orang-orang berpikir kamu menanyakan sesuatu yang bahkan kamu sendiri belum menguasai tema pembahasan tersebut. Dikhawatirkan, dalam pikiran orang-orang akan muncul kata-kata seperti ini: “Kalopun gue jawab kamu juga ga bakalan ngerti!”

Gunakan Bahasa Mayoritas Komunitas

Jika kamu berada di dalam forum orang Indonesia atau forum dengan bahasa mayoritas bahasa Indonesia, jangan sekali-kali menggunakan bahasa Inggris saat bertanya. Mungkin kamu beralasan, “Saya ingin sekalian belajar bahasa Inggris sambil berdiskusi supaya bahasa Inggris Saya lancar”.
Mas, Mbak, Pak, Bu, di sini bukan tempatnya belajar bahasa Inggris. Belajar bahasa Inggris itu sudah ada tempatnya tersendiri. Gunakanlah bahasa sesuai dengan mayoritas bahasa yang digunakan di dalam komunitas tersebut. Jangan kebarat-baratan begitu kalau sedang berbicara dengan orang lokal. Lagipula, kalau memang kamu berniat untuk memperlancar bahasa Inggris kamu, kenapa tidak sekalian saja kamu bergabung dengan komunitas sejenis yang anggotanya terdiri dari orang-orang asing?
Ini berlaku juga untuk blog/forum/komunitas orang Indonesia yang menjadikan bahasa mayoritasnya dengan bahasa asing, misalnya bahasa Inggris. Jangan pernah sekali-kali bertanya atau berkomentar menggunakan bahasa lokal meskipun kamu tahu bahwa administrator blog/anggota komunitas tersebut adalah orang lokal yang berbicara dengan bahasa yang sama denganmu.
Mungkin dia punya tujuan lain, yang membuatnya memutuskan untuk mengubah forum/komunitas/blog mereka menjadi berbahasa asing.

Pengecualian jika komunikasi yang terjadi dilakukan oleh para anggota yang masing-masing tidak mengerti bahasa satu sama lainnya. Jika kasus yang terjadi adalah seperti itu, maka gunakanlah bahasa Inggris.

Jangan Membuat Pertanyaan Baru

Jangan membuat pertanyaan baru setelah pertanyaan sebelumnya sudah terjawab. Itu sama saja mencoba keluar dari topik pembahasan secara halus. Misalnya seperti ini:

“Terima kasih. Sudah berhasil.
Satu lagi pertanyaan: Bagaimana caranya membuat efek animasi seperti di blog ini, soalnya Saya suka banget sama efeknya”.

Kalau kamu ingin memulai pertanyaan baru, buatlah sebuah posting diskusi baru pada kategori diskusi yang tepat atau pisahkan pertanyaan baru tersebut dari posting/komentar/tanggapan yang sudah diterbitkan sebelumnya. Yang penting tetap sesuaikan dengan topik yang sedang dibahas.

Jangan Merendahkan Diri

Yang Saya maksud merendahkan diri di sini adalah mencoba menanyakan sesuatu yang kemudian diikuti dengan kata-kata seperti ini:

1. “Terima kasih master!”
2. “Maaf, Saya masih newbee”
3. “Mohon pencerahannya...”
4. “Mohon bantuannya mastah...”

Jujur, Saya paling risih dengan bumbu-bumbu pertanyaan seperti itu. Jangan merendahkan diri seperti itu! Buktikan bahwa kamu layak untuk menanyakan itu dan buktikan bahwa pertanyaanmu itu bisa menunjukkan seberapa luas ide dan kecerdasan yang kamu punya! Atau kalau perlu, buat para anggota tertegun dan menyerah karena tidak berhasil menjawab pertanyaanmu.

Apa Pertanyaannya/Masalahnya?

Pertanyaan di bawah ini sangat singkat dan padat, bahkan bisa dibilang tidak ada pertanyaannya sama sekali! Orang-orang tidak akan pernah tahu mengenai apa yang sedang coba kamu tanyakan. Biasanya pertanyaan-pertanyaan yang masuk ke dalam kategori ini adalah pertanyaan yang dilengkapi dengan cuplikan gambar (screenshoot) atau URL blog:

Kok jadinya begini?

⇒ Begini apa?? Mati lampu??!

Kok jadinya begini:
http://nama_blog.blogspot.com/p/asdfghjk.html
⇒ ??? Jadi apa?? Yang sebelah mana??!

Jangan Mengulang-Ulang Pertanyaan di Tempat yang Sama

Jangan mengulang-ulang pertanyaan di tempat yang sama. Kalau kamu tetap melakukan itu, orang-orang akan menganggapmu sebagai spammer yang tidak tahu diri/mengganggu. Akibatnya, kamu akan dikeluarkan dari grup atau diabaikan. Kalau memang ingin mengulang pertanyaan, lakukanlah itu pada forum/komunitas yang berbeda (dengan harapan bisa mendapatkan jawaban dengan cepat).

Jangan Berlebihan di dalam Mengucapkan Terima Kasih

Jangan berlebihan di dalam mengucapkan terima kasih, misalnya seperti ini:

“Makasih gan... Berhasil. Agan emang masternya JS dah!”

Menurut Saya pribadi, sebenarnya ucapan terima kasih itu tidak begitu diperlukan di dalam forum/grup. Karena bagi para anggota, berhasil membantu saja sudah merupakan kesenangan yang luar biasa. Jadi, memberikan kabar keberhasilanmu saja sudah cukup. Bisa juga diikuti dengan ucapan terima kasih di bagian akhir. Tapi secukupnya saja:

1. “Oke. Berhasil”.
2. “Sudah bisa. Terima kasih”.

Jadi, Bagaimana Pertanyaan yang Baik?

Sebuah pola pertanyaan yang baik setidaknya terdiri dari kalimat-kalimat yang singkat, namun cukup untuk memberikan informasi mengenai apa masalahnya, apa yang sudah diusahakan untuk memecahkan masalah tersebut dan di mana masalah tersebut terjadi:

“Saya sudah mengikuti langkah-langkah cara memasang plugin slider pada blog sesuai dengan tutorial [ di atas | yang Saya baca di sini {link} ], tetapi slider tersebut tidak bekerja, dan susunan gambarnya menjadi berantakan.
Saya sudah mencoba untuk mengganti versi JQuery dan mengubah letak script slider tersebut tetapi tetap tidak berhasil.
Saya memakai Blogger. Berikut ini adalah halamannya: http://nama_blog.blogspot.com/p/url-menuju-halaman-yang-tepat.html”

Pola pertanyaan di atas seharusnya sudah cukup untuk menghasilkan jawaban yang langsung bisa menyelesaikan masalahmu karena pertanyaan di atas sudah bisa menghasilkan beberapa petunjuk minimal pemecahan masalah yang dibutuhkan:

Apa masalahnya?	Masalahnya adalah slider tidak bekerja dan gambarnya tidak tertata (bukan sekedar “tidak bekerja”).
Apa saja yang sudah kamu coba untuk memecahkan masalah tersebut?	Mengubah versi JQuery dan mengubah posisi script eksekusi slider. Sebagaimana syarat bertanya yang benar, kita seharusnya mencoba segala cara terlebih dahulu sebelum pada akhirnya kita menyerah dan merasa hampir mati karena masalah kita tersebut. Kita ini sudah bukan anak TK lagi, jadi jangan manja. Secara, kita akan mendapatkan bantuan secara gratis, jadi setidaknya berusahalah untuk memecahkan masalah diri sendiri terlebih dahulu sebelum pada akhirnya memutuskan untuk meminta bantuan kepada orang lain. Bertanya itu berbeda dengan menyuruh.
TKP/Tempat Kejadian Perkara?	Para anggota grup/komunitas bukanlah manusia ajaib yang bisa membaca pikiranmu, jadi berikanlah sebuah tempat kejadian yang jelas mengenai masalah yang kamu alami supaya mereka juga bisa melihat dan merasakannya. URL/alamat menuju tempat kejadian juga harus jelas dan langsung menuju tempat terjadinya masalah, bukan cuma alamat utama saja. Agar tidak membingungkan anggota di dalam menemukan letak masalahnya.

Tidak Harus Memakai Bahasa Resmi/Baku

Yang penting jelas, singkat dan seminimal-minimalnya bisa menghasilkan informasi seperti di atas:

“Gan, ane udah pasang tuh slider di blog ane (di sini gan ⇒ {link}) persis, kayak tutorial [ di atas | yang ini nih... {link} ], tapi gagal gan, gak jalan! Gambarnya juga jadi berantakan. Gimana nih??!!! :emoticon-nangis:
Udah tak ganti-ganti juga versi JQuery sama tak otak-atik posisi tagging slider ntuh tapi tetep aja ga jalan. HEUUU
Aku pake Blogger. Nih blog ane: http://nama_blog.blogspot.com/p/url-menuju-halaman-yang-tepat.html”

Sedikit Narsis Tidak Masalah

Sedikit narsis tidak masalah, malah menurut Saya bagus. Karena dengan sedikit narsis, maka saat kamu bertanya kamu akan merasa bahwa orang-orang di luar sana juga akan membaca tulisanmu, sehingga secara tidak langsung, alam bawah sadarmu akan berpikir untuk membuat pertanyaan-pertanyaan yang sekiranya bisa bermanfaat untuk orang-orang yang sedang membaca tulisanmu juga.

Bertanyalah Kepada Sesama Pelajar Otodidak

Bertanyalah kepada orang-orang yang selama ini belajar secara otodidak, bukan kepada orang-orang yang belajar melalui pendidikan formal. Saya mempunyai beberapa alasan mengapa kamu lebih baik tidak bertanya kepada mereka. Tapi mungkin Saya tidak akan menuliskannya di sini. Mungkin di blog lain.

Beberapa Hal yang Sebaiknya Dipikirkan Sebelum Bertanya

Orang yang kamu tanyai belum tentu bisa menjawab pertanyaanmu.
Orang yang kamu tanyai sedang sibuk.
Orang yang kamu tanyai sedang tidak ingin menjawab karena pertanyaanmu ternyata tidak sesuai dengan topik pembahasan. Dia ingin menghapus pertanyaanmu, tapi takut kamu salah paham. Kalau dia menjawab pertanyaanmu atau memperingatkanmu untuk tidak menulis pertanyaan/memulai diskusi yang keluar dari topik, maka kamu akan menanggapi tulisan orang tersebut dan akan membuat diskusi OOT semakin panjang.
Kalau seseorang bertanya kepada Saya seperti ini, apakah Saya bisa mengerti dan menjawabnya?
Forum/grup/komunitas adalah milik bersama dan digunakan untuk memecahkan masalah bersama secara bersama-sama.
Pertimbangkanlah untuk tidak bertanya. Ya. Coba pecahkan masalahmu sendiri sekali lagi. Mungkin sekarang akan berhasil.

Cara Mengetahui Bahwa Pertanyaanmu itu Bagus

Pertanyaan yang bagus biasanya akan terjawab hanya dalam sekali jawab. Dalam beberapa forum bahkan terdapat semacam label peringkat yang diberikan kepada anggota bukan hanya berdasarkan kualitas jawaban tetapi juga berdasarkan kualitas pertanyaannya. Semacam up-vote dan down-vote. Orang-orang yang memberikan up-vote terhadap sebuah pertanyaan biasanya adalah orang-orang yang ingin menanyakan hal yang sama.
Diskusi tidak berjalan seperti chatting/mengobrol.
Ada orang yang berkata, “Pertanyaan bagus!”

Senin, 28 Januari 2013

CSS3 Google Chrome Minimalis

Peramban Google Chrome minimalis yang terbuat dari CSS3:

HTML

<div class="chrome-window">
    <h1>Window Title</h1>
    <div class="right-buttons">
        <a title="Minimize" class="minimize-btn" href="#minimize">Minimize</a>
        <a title="Maximize" class="maximize-btn" href="#maximize">Maximize</a>
        <a title="Close" class="close-btn" href="#close">Close</a>
    </div>
    <div class="window-header">
        <input type="text" onfocus="this.select();" spellcheck="false" value="chrome://chrome">
    </div>
    <div class="window-inner">
        Contents...
    </div>
</div>

CSS

/* Window */
.chrome-window {
  background-color:#3B68B5;
  background-image:-webkit-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  background-image:-moz-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  background-image:-ms-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  background-image:-o-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  background-image:linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  width:600px;
  border:1px solid;
  border-color:#595959 #444 #444 #494949;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-300px;
  margin-top:-150px;
  overflow:hidden;
  font:normal normal 12px Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#222;
  z-index:999;
}

/* Window title */
.chrome-window h1 {
  font:inherit;
  font-weight:bold;
  color:white;
  margin:0 0;
  padding:4px 0 4px 10px;
}

/* Window address bar */
.window-header {
  margin:0 2px;
  padding:1px 0;
  border:1px solid #2E518C;
  border-bottom-color:#AAAAAB;
  background-color:white;
  position:relative;
}

.window-header:before {
  content:"";
  display:block;
  width:10px;
  height:13px;
  background-color:#eee;
  border:1px solid #949495;
  border-bottom-color:#838384;
  -webkit-box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  -moz-box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  position:absolute;
  top:6px;
  left:8px;
}

.window-header input {
  width:592px;
  display:block;
  margin:0 auto;
  padding:4px 4px 5px 24px;
  font:inherit;
  color:inherit;
  border:1px solid #B4BCC7;
  outline:none;
  background-color:white;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

/* Window body */
.window-inner {
  height:200px;
  border:1px solid #2E518C;
  border-top:none;
  margin:0 2px 2px;
  background-color:white;
  -webkit-box-shadow:inset 0 0 0 1px #DFDFDF;
  -moz-box-shadow:inset 0 0 0 1px #DFDFDF;
  box-shadow:inset 0 0 0 1px #DFDFDF;
  padding:4px;
  word-wrap:break-word;
  overflow:auto;
  cursor:text;
}

/* Buttons */
.right-buttons {
  position:absolute;
  top:-1px;
  right:4px;
  font:0/0 a;
  text-shadow:none;
}

.right-buttons a {
  display:block;
  float:left;
  margin:0 0 0 -1px;
  width:26px;
  height:16px;
  border:1px solid #345181;
  -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  text-decoration:none;
  position:relative;
  cursor:default;
  -webkit-transition:all .2s ease-out;
  -moz-transition:all .2s ease-out;
  -ms-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  transition:all .2s ease-out;
}

.right-buttons a:after {
  content:"";
  display:block;
  position:absolute;
}

.right-buttons .minimize-btn {
  -webkit-border-radius:0 0 0 3px;
  -moz-border-radius:0 0 0 3px;
  border-radius:0 0 0 3px;
}

.right-buttons .minimize-btn:after {
  right:7px;
  bottom:4px;
  left:7px;
  height:3px;
  background-color:#BCCFEF;
  border:1px solid #233656;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

.right-buttons .maximize-btn:after {
  top:4px;
  right:8px;
  bottom:4px;
  left:8px;
  border:2px solid #BCCFEF;
  -webkit-box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  -moz-box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}

.right-buttons .close-btn {
  -webkit-border-radius:0 0 3px 0;
  -moz-border-radius:0 0 3px 0;
  border-radius:0 0 3px 0;
}

.right-buttons .close-btn {
  width:42px;
}

.right-buttons .close-btn:after {
  content:"x";
  font:normal normal 14px/13px Verdana,Arial,Sans-Serif;
  color:#BCCFEF;
  text-shadow:0 1px #233656,1px 0 #233656,-1px 0 #233656,0 -1px #233656;
  top:0;
  right:0;
  bottom:0;
  left:0;
  text-align:center;
}

.right-buttons a:hover {
  background-color:#8BAEE4;
  -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
  -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);

}

.right-buttons a.close-btn:hover {
  background-color:#DA4D4B;
}

.right-buttons .minimize-btn:hover:after {background-color:white}
.right-buttons .maximize-btn:hover:after {border-color:white}
.right-buttons .close-btn:hover:after {color:white}

Lihat Demo

Minggu, 27 Januari 2013

CSS Posisi Teks di Tengah Secara Vertikal dan Horizontal

CSS

div {
  width:100px; /* dimensi lebar */
  height:100px; /* dimensi tinggi */
  line-height:100px; /* sama dengan tinggi elemen, posisi di tengah secara vertikal */
  text-align:center; /* posisi di tengah secara horizontal */
  background-color:maroon;
  color:white;
}

Markup HTML

<div>ABC</div>

Rabu, 23 Januari 2013

JavaScript Seleksi Teks Otomatis

Membuat fitur seleksi teks otomatis pada elemen-elemen formulir seperti <textarea> atau <input> memang mudah, tetapi membuat fitur seleksi otomatis pada elemen-elemen non formulir seperti <div> dan <pre> membutuhkan sedikit langkah tambahan. Berikut ini adalah fungsinya:

function autoSelect(elem) {
    var selection, range;
    if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(elem);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection) { // IE
        selection = document.selection.createRange().text;
        range = document.body.createTextRange();
        range.moveToElementText(elem);
        range.select();
    }
}

Posting ini juga sekaligus akan Saya jadikan sebagai dokumentasi tambahan untuk memperbaharui posting Saya yang lama mengenai cara membuat fitur seleksi teks otomatis pada tag <pre> di sini. Sejak rilis JQuery 1.9, sepertinya jQuery.browser sudah ditiadakan, jadi posting tersebut sudah tidak berlaku lagi.
Potongan kode di atas lebih baik, dan bisa diaktifkan oleh pengguna JavaScript mentah maupun pengguna JavaScript Library seperti JQuery.

Contoh Penggunaan

Parameter elem akan kita gunakan sebagai referensi menuju elemen yang ingin kita seleksi. Misalnya, kita ingin menyeleksi semua teks di dalam elemen yang memiliki ID foo:

autoSelect(document.getElementById('foo'));

Kode di atas merupakan contoh penerapan JavaScript mentah. Untuk menerapkannya pada JQuery, kita cukup mengganti pola selektornya saja:

autoSelect($('#foo')[0]);

Demo JavaScript Demo JQuery

Contoh Lain: Membuat Fitur Seleksi Otomatis pada Tag PRE

Versi JavaScript Mentah

var pre = document.getElementsByTagName('pre');
for (var i = 0, len = pre.length; i < len; i++) {
    pre[i].onclick = function() {
        autoSelect(this);
    };
}

Lihat Demo

Versi JQuery

$('pre').on("click", function() {
    autoSelect(this);
});

Lihat Demo

Gambar: Google

Selasa, 22 Januari 2013

Mengubah List/Daftar Menjadi Diagram Pohon

HTML

<ul class="tree">
  <li>List item 1</li>
  <li>List item 2
    <ul>
      <li>List item 2.1</li>
      <li>List item 2.2</li>
      <li>List item 2.3</li>
      ...
      ...
    </ul>
  </li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  ...
  ...
</ul>

CSS

ul.tree,
ul.tree ul {
  list-style:none;
  margin:0;
  padding:0;
}

ul.tree ul {
  margin-left:10px;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1ggGExMZBky19AAAAAtJREFUCNdjYMAEAAAUAAHlhrBKAAAAAElFTkSuQmCC') repeat-y 0 100%;
}

ul.tree li {
  margin:0;
  padding:0 12px;
  font-size:14px;
  line-height:20px;
  color:#369;
  font-weight:bold;
}

ul.tree ul li {
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIJYVaFGwAAAARSURBVAjXY2hgQIf/GTDFGgDSkwqATqpCHAAAAABJRU5ErkJggg==') no-repeat 0 0;
}

ul.tree ul li.last,
ul.tree ul li:last-child {
  background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIIhs+gc8AAAAQSURBVAjXY2hgQIf/GbAAAKCTBYBUjWvCAAAAAElFTkSuQmCC') no-repeat 0 100%;
}

Demo

Referensi: Turning List into Trees

Murni CSS/Tanpa Gambar

Berikut ini adalah versi CSS yang Saya buat berdasarkan contoh di atas. Tanpa gambar, hanya menggunakan pseudo element:

CSS

ul.tree,
ul.tree ul {
  list-style:none;
  margin:0;
  padding:0;
}

ul.tree ul {
  margin-left:10px; /* indentation */
  position:relative;
}

ul.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

ul.tree li {
  margin:0;
  padding:0 12px; /* indentation + 2 */
  font-size:14px;
  line-height:20px; /* default list item `line-height` */
  color:#369;
  font-weight:bold;
  position:relative;
}

ul.tree ul li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px solid;
  position:absolute;
  top:10px;
  left:0;
}

ul.tree ul li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:10px; /* (line-height/2) */
  bottom:0;
}

Demo

Minggu, 20 Januari 2013

JQuery Carousel

HTML

<div class="carousel" id="carousel">
    <div class="carousel-inner">
        <img src="img/1.jjpg" alt="">
        <img src="img/2.jjpg" alt="">
        <img src="img/3.jjpg" alt="">
        <img src="img/4.jjpg" alt="">
    </div>
</div>
<nav class="carousel-nav" id="carousel-nav">
    <button data-direction="prev">Prev</button>
    <button data-direction="next">Next</button>
</nav>

CSS

.carousel {
  width:400px;
  overflow:auto;
  margin:0 auto .7em;
}

.carousel,
.carousel-inner {
  height:100px;
}

.carousel img {
  width:100px;
  height:100px;
  background-color:#ccc;
  display:block;
  float:left;
  margin:0 5px;
}

.carousel-nav {
  text-align:center;
}

.carousel-nav button {
  cursor:pointer;
}

JQuery

(function($) {
    var $carousel = $('#carousel'),
        $container = $carousel.find('.carousel-inner'),
        $nav = $('#carousel-nav'),
        $img = $container.find('img'),
        totalWidth = ($img.outerWidth()+parseInt($img.css('margin-left'),10)+parseInt($img.css('margin-right'),10))*$img.length;
    $carousel.css('overflow', 'hidden'); // Singkirkan scroll bar jika JavaScript aktif
    $container.css('width', totalWidth); // Set lebar `.carousel-inner` selebar => [jumlah gambar + lebar gambar + margin kiri dan kanan gambar]
    $nav.find('button').on("click", function() {
        // Animasikan properti `scrollLeft` ke kiri/ke kanan,
        // berdasarkan nilai atribut `data-direction` pada tombol yang diklik
        var dir = $(this).data('direction');
        $carousel.stop().animate({
            scrollLeft: (dir == "next") ? "+=100px" : "-=100px"
        }, 200);
    });
})(jQuery);

Demo

CSS Font Stack - Bagian 2

Serif

Garamond (23.84% on Mac, 86.24% on Windows)

#foo {
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

Lucida Bright (64.90% on Mac, 33.84% on Windows) Huge x-height

#foo {
  font-family: "Lucida Bright", Georgia, serif;
}

Palatino (79.71% on Mac, 98.04% on Windows)

#foo {
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

Big Caslon (85.10% on Mac)

#foo {
  font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}

Didot (87.72% on Mac)

#foo {
  font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
}

Baskerville (88.60% on Mac, 49.10% on Windows)

#foo {
  font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}

Hoefler Text (88.70% on Mac, 1.16% on Windows)

#foo {
  font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
}

Bodoni (47.89% on Windows)

#foo {
  font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
}

Goudy Old Style (51.30% on Windows)

#foo {
  font-family: "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
}

Constantia (53.81% on Windows)

#foo {
  font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}

Cambria (54.51% on Windows)

#foo {
  font-family: Cambria, Georgia, serif;
}

Book Antiqua (86.09% on Mac)

#foo {
  font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}

Sans Serif

Optima (90.14% on Mac)

#foo {
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}

Futura (91.01% on Mac)

#foo {
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

Gill Sans (91.52% on Mac, 51.74% on Windows)

#foo {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}

Trebuchet (94.20% on Mac, 99% on Windows)

#foo {
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

Helvetica Neue (94.74% on Mac)

#foo {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Verdana (96.81% on Mac, 99.40% on Windows)

#foo {
  font-family: Verdana, Geneva, sans-serif;
}

Lucida Grande (99.13% on Mac, 98.25% on Windows)

#foo {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}

Geneva (98.84% on Mac)

#foo {
  font-family: Geneva, Tahoma, Verdana, sans-serif;
}

Segoe (45.04% on Windows)

#foo {
  font-family: Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

Candara (54.31% on Windows)

#foo {
  font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

Calibri (54.76% on Windows)

#foo {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

Franklin Gothic Medium (97.89% on Windows)

#foo {
  font-family: "Franklin Gothic Medium", Arial, sans-serif;
}

Tahoma (99.30% on Windows)

#foo {
  font-family: Tahoma, Geneva, Verdana, sans-serif;
}

Referensi: A Way Back - Revised Font Stack

Lainnya

Century Gothic

#foo {
  font-family: "Century Gothic", "Apple Gothic", "Trebuchet MS", Geneva, Arial, sans-serif;
}

Copperplate Light

#foo {
  font-family: "Copperplate Light", "Copperplate Gothic Light", serif;
}

Imprint MT Shadow

#foo {
  font-family: "Imprint MT Shadow", "Academy Engraved LET", "Colonna MT", "Modern No. 20", "Bodoni MT", Didot, "Didot LT STD", Georgia, serif;
}

Darlin BTN

#foo {
  font-family: "Darlin BTN", "Apple Casual", "Comic Sans", "Comic Sans MS", serif;
}

Brush Script

#foo {
  font-family: "Brush Script", "Brush Script MT", "Comic Sans", "Comic Sans MS", serif;
}

Script MT Bold

#foo {
  font-family: "Script MT Bold", "Brush Script", "Brush Script MT", "Comic Sans", "Comic Sans MS", serif;
}

Webfonts Google Alternatif Bebas Neue

Set font-weight menjadi normal dan text-transform menjadi uppercase:

h1 {
  font-weight:normal;
  text-transform:uppercase;
  font-family:Oswald,"Bebas Neue",Bebas,"Arial Narrow",Sans-Serif;
}

Oswald - Grumpy wizards make toxic brew for the evil Queen and Jack.

Anton - Grumpy wizards make toxic brew for the evil Queen and Jack.

BenchNine - Grumpy wizards make toxic brew for the evil Queen and Jack.

Beberapa Saran Webfonts Google untuk Art Direction Bertema Komik/Koran/Retro

Bangers - Grumpy wizards make toxic brew for the evil Queen and Jack.

Permanent Marker - Grumpy wizards make toxic brew for the evil Queen and Jack.

Jacques Francois Shadow - Grumpy wizards make toxic brew for the evil Queen and Jack.

Ewert - Grumpy wizards make toxic brew for the evil Queen and Jack.

Sancreek - Grumpy wizards make toxic brew for the evil Queen and Jack.

Rye - Grumpy wizards make toxic brew for the evil Queen and Jack.

Graduate - Grumpy wizards make toxic brew for the evil Queen and Jack.

Oswald - Grumpy wizards make toxic brew for the evil Queen and Jack.

Diplomata - Grumpy wizards make toxic brew for the evil Queen and Jack.

Diplomata SC - Grumpy wizards make toxic brew for the evil Queen and Jack.

Special Elite - Grumpy wizards make toxic brew for the evil Queen and Jack.

Holtwood One SC - Grumpy wizards make toxic brew for the evil Queen and Jack.

UnifrakturMaguntia - Grumpy wizards make toxic brew for the evil Queen and Jack.

Sabtu, 19 Januari 2013

Mengimplementasikan AJAX pada Blogspot

Mungkin beberapa dari kalian ada yang pernah memperhatikan/membaca komentar-komentar lama Saya atau perkataan lama Saya yang pernah Saya ucapkan, yang menyatakan bahwa kita tidak bisa mengimplementasikan AJAX pada blogspot. Saya ingin menyangkal semua perkataan Saya itu dan ingin mengatakan bahwa AJAX memungkinkan untuk diimplementasikan pada blogspot!
Untuk membuktikannya, coba Anda klik tombol di bawah ini:

Klik Untuk Memuat Halaman dengan AJAX

Tombol di atas cuma contoh awal, jadi hasil yang termuat jelas akan tampak sangat berantakan. Untuk membaca artikel ini lagi, mohon muat ulang halaman ini setelah Anda melihat efek yang terjadi.

Seperti yang kita semua tahu bahwa AJAX hanya berlaku untuk domain lokal, itu memang benar. Selama ini sepertinya Saya terlalu paranoid atau bahkan skeptis mengenai kekuatan blogspot yang sangat terbatas sehingga Saya tidak menyadari bahwa apapun bentuknya, asalkan URL yang digunakan untuk memuat adalah URL lokal, maka bisa dipastikan kita bisa mengimplementasikan AJAX pada platform tersebut. Karena bisa atau tidaknya kita di dalam mengimplementasikan AJAX sama sekali tidak ditentukan oleh kemampuan ~~CMS~~ Blogger bukan merupakan CMS, melainkan blog service.
Berikut ini adalah kode yang Saya gunakan:

HTML

<div id="loading-text"></div>
<div id="container"></div>
<a id="ajax-button-example" href="/search/label/JQuery?max-results=10">Klik Untuk Memuat Halaman dengan AJAX</a>

JQuery

$('#ajax-button-example').on("click", function() {
    var url = this.href;
    $('#loading-text').html('<span>Memuat halaman...</span>');
    $('#container').load(url, function() {
        $('#loading-text').html('');
    });
    return false;
});

Hanya penerapan JQuery .load() yang sangat mendasar. Jika sebelumnya Anda sudah pernah belajar mengenai seluk-beluk JQuery AJAX pasti Anda akan dengan mudah mengerti mengenai ini.
Ke depannya, mungkin akan ada beberapa tutorial/info mengenai pengimplementasian AJAX pada platform blogspot. Tapi Saya masih butuh waktu untuk memantapkannya. Begitulah.

Jumat, 18 Januari 2013

Efek Animasi Loading dengan Event `beforeunload`

Sebelumnya Saya pernah menuliskan cara membuat efek animasi loading pada saat halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya overlay/tabir animasi saat tautan tersebut diklik. Tapi metode ini memiliki dua kelemahan:
Pertama, menyeleksi semua tautan internal dengan selektor atribut sebenarnya tidak begitu baik karena selektor atribut itu performanya buruk.
Ke dua, jika kita mengeklik tautan internal yang memiliki atribut target='_blank' di dalamnya, tautan tersebut akan terbuka di tab baru. Tapi efek animasi memuat halaman justru terpicu pada halaman sebelumnya, padahal kita tidak menghendaki itu ⇒ #c8644667892985451185. Saya sudah berhasil mengakalinya dengan cara memfilter tautan internal tersebut dengan cara mengecualikan tautan yang memiliki atribut target='_blank' menggunakan JQuery .filter():

$internalLinks.filter(':not([target="_blank"])').click(function() {});

Tapi mulai sekarang lebih baik kita lupakan cara lama tersebut. Kita bisa menciptakan efek animasi perpindahan halaman dengan aman menggunakan event beforeunload.
beforeunload adalah event yang akan terpicu saat sebuah halaman mulai berpindah karena seorang pengguna mengeklik tautan tertentu (atau sekedar memuat ulang halaman dengan cara mengeklik tombol Reload pada peramban) yang memicu mereka untuk keluar dari halaman tersebut:

$(window).on("beforeunload", function() {
    // Menampilkan tabir animasi dengan efek `.fadeIn()`...
});

Kali ini tabir animasi ditampilkan bukan karena terpicu oleh aksi klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang tabir animasi perpindahan halaman dengan cara ini:
Anggaplah JQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTMLtemplate, kemudian letakkan kode CSS ini di atas ]]></b:skin> atau </style>:

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Kemudian sisipkan kode ini di atas </body>:

<script>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Klik Simpan Template.

Demo

Lihat Demo

Minggu, 13 Januari 2013

JSON (JavaScript Object Notation)

JSON merupakan sekumpulan objek JavaScript. Titik.
Pada dasarnya sebuah JSON hanyalah teks biasa yang tertulis dalam pola tertentu, yang kemudian disimpan dengan ekstensi .json, untuk kemudian bisa kita terjemahkan/konversi menjadi data yang terstruktur dan dapat dilihat dalam bentuk-bentuk yang bisa dibaca oleh manusia untuk keperluan interaksi (misalnya dalam bentuk tabel, daftar atau paragraf).
Data JSON berbasis teks, oleh karena itu dia tidak bergantung pada bahasa pemprograman apapun, itulah yang menjadikan JSON ideal sebagai bahasa pertukaran data. Jika Anda melihat footer pada situs JSON, maka Anda akan mendapati begitu banyak tautan yang mengarah pada beberapa bahasa untuk menangani JSON selain dengan JavaScript. Dan semuanya tampak tidak terlalu berbeda dalam hal logika dan penerapannya.
Kali ini Saya hanya akan membicarakan tentang penanganan JSON dengan JavaScript. Sebagai catatan, pada dasarnya format dan pola teks di dalam JSON semuanya sama, hanya cara memparse/menerjemahkan datanya itu yang berbeda-beda.

Sekumpulan Objek

JSON tidak akan jauh-jauh dari array dan object, karena JSON memang merupakan penjabaran dari dua tipe data tersebut. Sebuah JSON paling sederhana dapat dinyatakan sebagai objek tunggal seperti ini:

var memberCard = {
    "nama": "Taufik Nurrohman",
    "memberId": 777,
    "address": "http://nama_situs.com"
};

Sebuah variabel memberCard, secara umum hanya bisa menyimpan satu nilai/data saja. Namun ketika nilai variabel tersebut menjadi objek, maka kemampuan variabel tersebut akan meningkat dan bisa memuat data lebih banyak lagi dan lebih kompleks dibandingkan variabel biasa. Untuk menampilkan nilai objek satu per satu, Anda bisa membaca artikel mengenai JavaScript Arraydan JavaScript Object:

var memberCard = {
    "nama": "Taufik Nurrohman",
    "memberId": 777,
    "address": "http://nama_situs.com"
};

// Menampilkan data JSON sebagai kartu anggota (member card) virtual:
document.write('<div class="member-card">');
document.write('<ol>');
document.write('<li><strong>Nama:</strong> ' + memberCard.nama + '</li>');
document.write('<li><strong>ID Member:</strong> ' + memberCard.memberId + '</li>');
document.write('<li><strong>Alamat Situs:</strong> <a href="' + memberCard.address + '">' + memberCard.address + '</a></li>');
document.write('</ol>');
document.write('</div>');

Lebih Banyak Data

Untuk memasukkan data yang lebih banyak ke dalam JSON, Anda bisa mengelompokkan objek menjadi array. Untuk menciptakan cabang, Anda bisa mengubah nilai properti objek menjadi objek baru.

Sampel Pertama: Daftar Kartu Anggota

Untuk membuat kartu anggota yang berjumlah lebih dari satu, kita bisa menggabungkan beberapa objek kartu anggota menjadi array. Setelah itu, semua data bisa kita akses/panggil menggunakan loop:

var memberCard = [
    {
        "nama": "Taufik Nurrohman",
        "memberId": 777,
        "address": "http://nama_situs.com"
    },
    {
        "nama": "Agus Bolagus",
        "memberId": 778,
        "address": "http://nama_situs_agus.com"
    },
    {
        "nama": "Bejo Subejo",
        "memberId": 230,
        "address": "http://the_bejo_site.com"
    },
    {
        "nama": "Paimin Bin Paimun",
        "memberId": 411,
        "address": "http://blog_paimin.com"
    }
];

// Menampilkan data JSON sebagai deret kartu anggota (member card) virtual:
for (var i = 0; i < memberCard.length; i++) {
    document.write('<div class="member-card">');
    document.write('<ol>');
    document.write('<li><strong>Nama:</strong> ' + memberCard[i].nama + '</li>');
    document.write('<li><strong>ID Member:</strong> ' + memberCard[i].memberId + '</li>');
    document.write('<li><strong>Alamat Situs:</strong> <a href="' + memberCard[i].address + '">' + memberCard[i].address + '</a></li>');
    document.write('</ol>');
    document.write('</div>');
}

Sampel ke Dua: Cabang Baru

Untuk menciptakan cabang baru, kita bisa menyatakan nilai salah satu properti objek menjadi objek baru:

var memberCard = {
    "nama": "Taufik Nurrohman",
    "memberId": 777,
    "address": {
        "address1": "http://nama_situs_pertamax.com",
        "address2": "http://nama_situs_keduax.com",
        "address3": "http://nama_situs_ketigax.com"
    }
};

// Menampilkan data JSON sebagai kartu anggota (member card) virtual:
document.write('<div class="member-card">');
document.write('<ol>');
document.write('<li><strong>Nama:</strong> ' + memberCard.nama + '</li>');
document.write('<li><strong>ID Member:</strong> ' + memberCard.memberId + '</li>');
document.write('<li><strong>Alamat Situs:</strong>');
    document.write('<div>1. <a href="' + memberCard.address.address1 + '">' + memberCard.address.address1 + '</a></div>');
    document.write('<div>2. <a href="' + memberCard.address.address2 + '">' + memberCard.address.address2 + '</a></div>');
    document.write('<div>3. <a href="' + memberCard.address.address3 + '">' + memberCard.address.address3 + '</a></div>');
document.write('</li>');
document.write('</ol>');
document.write('</div>');

Membuat Fungsi Untuk Memparse JSON

Jika JSON telah dinyatakan ke dalam variabel, maka kita bisa meletakkan variabel tersebut sebagai bagian dari parameter sebuah fungsi:

var memberCard = {
    "nama": "Taufik Nurrohman",
    "memberId": 777,
    "address": "http://nama_situs.com"
};

function makeCard(json) {
    document.write('<div class="member-card">');
    document.write('<ol>');
    document.write('<li><strong>Nama:</strong> ' + json.nama + '</li>');
    document.write('<li><strong>ID Member:</strong> ' + json.memberId + '</li>');
    document.write('<li><strong>Alamat Situs:</strong> <a href="' + json.address + '">' + json.address + '</a></li>');
    document.write('</ol>');
    document.write('</div>');
}

// Menampilkan data JSON sebagai kartu anggota (member card) virtual...
makeCard(memberCard);

JSON Dalam Dunia Nyata

Dalam dunia nyata, sebuah JSON tidak hanya terdiri dari data sependek itu. Beberapa bisa menampung konten yang lebih besar seperti posting atau identitas anggota yang kompleks. Sebuah JSON eksternal disimpan dengan ekstensi .json
Contoh JSON yang paling mudah kita lihat ada pada feed blog Blogger. Anda bisa melihatnya dengan cara mengakses URL feed blog yang diakhiri dengan parameter ?alt=json:

http://googleblog.blogspot.com/feeds/posts/default?alt=json

Contoh lain: Coba Anda lihat kode sumber halaman blog Anda. Pada bagian paling bawah, seharusnya Anda akan mendapati kode seperti ini. Ini adalah JSON, yang “sedang diterjemahkan” oleh sebuah fungsi bernama _WidgetManager._SetDataContext():

_WidgetManager._SetDataContext([{
  'name': 'blog',
  'data': {
    'blogId': '298900102869691923',
    'bloggerUrl': 'http://www.blogger.com',
    'title': 'DTE :]',
    'pageType': 'item',
    'url': 'http://hompimpaalaihumgambreng.blogspot.com/2013/01/konsep-auto-read-more-dengan-bantuan.html',
    'canonicalUrl': 'http://hompimpaalaihumgambreng.blogspot.com/2013/01/konsep-auto-read-more-dengan-bantuan.html',
    'canonicalHomepageUrl': 'http://hompimpaalaihumgambreng.blogspot.com/',
    'homepageUrl': 'http://hompimpaalaihumgambreng.blogspot.com/',
    'blogspotFaviconUrl': 'http://hompimpaalaihumgambreng.blogspot.com/favicon.ico',
    'enabledCommentProfileImages': true,
    'adultContent': false,
    'disableAdSenseWidget': false,
    'analyticsAccountNumber': 'UA-27593783-1',
    'searchLabel': '',
    'searchQuery': '',
    'pageName': 'Konsep Auto Read-More Baru dengan Bantuan Textarea',
    'pageTitle': 'DTE :]: Konsep Auto Read-More Baru dengan Bantuan Textarea',
    'metaDescription': 'Metode baru untuk mengurangi beban HTML posting yang biasa terjadi pada script auto read-more versi lama dengan memanfaatkan \46lt;textarea\46gt; untuk mencegah peramban memparse kode HTML di dalam posting.',
    'encoding': 'UTF-8',
    'locale': 'in',
    'localeLanguage': 'in',
    'isPrivate': false,
    'isMobile': false,
    'isMobileRequest': false,
    'mobileClass': '',
    'isPrivateBlog': false,
    'languageDirection': 'ltr',
    'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42DTE :] - Atom\42 href\75\42http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42DTE :] - RSS\42 href\75\42http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42DTE :] - Atom\42 href\75\42http://www.blogger.com/feeds/298900102869691923/posts/default\42 /\76\n\74link rel\75\42EditURI\42 type\75\42application/rsd+xml\42 title\75\42RSD\42 href\75\42http://www.blogger.com/rsd.g?blogID\075298900102869691923\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42DTE :] - Atom\42 href\75\42http://hompimpaalaihumgambreng.blogspot.com/feeds/6023732528357300917/comments/default\42 /\76\n',
    'meTag': '',
    'openIdOpTag': '',
    'googleProfileUrl': 'https://plus.google.com/108949996304093815163',
    'postImageThumbnailUrl': 'http://2.bp.blogspot.com/-PLdSyiYy8Os/UOaEAHS8SQI/AAAAAAAAGHE/Q2521ahg5Jk/s72-c/auto-readmore-hack-for-blogger-with-textarea.png',
    'imageSrcTag': '\74link rel\75\42image_src\42 href\75\42http://2.bp.blogspot.com/-PLdSyiYy8Os/UOaEAHS8SQI/AAAAAAAAGHE/Q2521ahg5Jk/s72-c/auto-readmore-hack-for-blogger-with-textarea.png\42 /\76\n',
    'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var a\75window,b\75\42jstiming\42,d\75\42tick\42;var e\75function(c){this.t\75{};this.tick\75function(c,p,h){h\75void 0!\75h?h:(new Date).getTime();this.t[c]\75[h,p]};this[d](\42start\42,null,c)},f\75new e;a.jstiming\75{Timer:e,load:f};if(a.performance\46\46a.performance.timing){var g\75a.performance.timing,j\75a[b].load,k\75g.navigationStart,l\75g.responseStart;0\74k\46\46l\76\75k\46\46(j[d](\42_wtsrt\42,void 0,k),j[d](\42wtsrt_\42,\42_wtsrt\42,l),j[d](\42tbsd_\42,\42wtsrt_\42))}\ntry{var m\75null;a.chrome\46\46a.chrome.csi\46\46(m\75Math.floor(a.chrome.csi().pageT),j\46\0460\74k\46\46(j[d](\42_tbnd\42,void 0,a.chrome.csi().startE),j[d](\42tbnd_\42,\42_tbnd\42,k)));null\75\75m\46\46a.gtbExternal\46\46(m\75a.gtbExternal.pageT());null\75\75m\46\46a.external\46\46(m\75a.external.pageT,j\46\0460\74k\46\46(j[d](\42_tbnd\42,void 0,a.external.startE),j[d](\42tbnd_\42,\42_tbnd\42,k)));m\46\46(a[b].pt\75m)}catch(n){};a.tickAboveFold\75function(c){var i\0750;if(c.offsetParent){do i+\75c.offsetTop;while(c\75c.offsetParent)}c\75i;750\76\75c\46\46a[b].load[d](\42aft\42)};var q\75!1;function r(){q||(q\75!0,a[b].load[d](\42firstScrollTime\42))}a.addEventListener?a.addEventListener(\42scroll\42,r,!1):a.attachEvent(\42onscroll\42,r);\n })();\74/script\076',
    'mobileHeadScript': '',
    'adsenseClientId': 'pub-4884309229437815',
    'view': '',
    'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js',
    'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/20497177ec370ede',
    'plusOneApiSrc': 'https://apis.google.com/js/plusone.js'
  }
}, {
  'name': 'skin',
  'data': {
    'vars': {},
    'override': ''
  }
}, {
  'name': 'view',
  'data': {
    'classic': {
      'name': 'classic',
      'url': '/?view\75classic'
    },
    'flipcard': {
      'name': 'flipcard',
      'url': '/?view\75flipcard'
    },
    'magazine': {
      'name': 'magazine',
      'url': '/?view\75magazine'
    },
    'mosaic': {
      'name': 'mosaic',
      'url': '/?view\75mosaic'
    },
    'sidebar': {
      'name': 'sidebar',
      'url': '/?view\75sidebar'
    },
    'snapshot': {
      'name': 'snapshot',
      'url': '/?view\75snapshot'
    },
    'timeslide': {
      'name': 'timeslide',
      'url': '/?view\75timeslide'
    }
  }
}]);

Referensi Lain:

JavaScript Object

Pada dasarnya tujuan object tidak jauh berbeda dengan array, yaitu berfungsi untuk mengumpulkan beberapa data/nilai variabel menjadi satu kesatuan. Sebuah objek merupakan sekumpulan data yang disatukan menjadi satu kesatuan di dalam braket keriting/kurung kurawal ({}). Setiap objek terdiri dari beberapa properti yang dipisahkan dengan tanda koma, dan setiap properti terdiri dari kunci/key dan nilai yang dipisahkan dengan tanda titik dua:

// var identity = { property1, property2, property3 };
// var identity = { key1: value1, key2: value2, key3: value3 };

var identity = { "nama": "Taufik", "usia": 21, "lajang": true };

Saya mulai dengan array. Saat kita menuliskan array, maka cara kita memanggil anggotanya adalah dengan menuliskan nama variabel yang diikuti oleh indeks anggota tersebut seperti ini:

var text = ["Taufik", 21, true];
document.write(text[0]); // Hasil => `Taufik`

Dalam objek, kita memanggil data tidak melalui indeks, melainkan melalui kunci properti. Pemanggilan dimulai dengan menuliskan nama variabel, kemudian diikuti dengan kunci properti yang diinginkan dengan pemisah berupa tanda titik:

var identity = {
    "nama": "Taufik",
    "usia": 21,
    "lajang": true
};

document.write(identity.nama); // Hasil => `Taufik`
document.write(identity.usia); // Hasil => `21`
document.write(identity.lajang); // Hasil => `true`

Lainnya

Beberapa Cara Penulisan Object

Cara paling ringkas:

var x = { "nama": "Taufik", "usia": 21, "lajang": true };

Mendeklarasikan objek kosong, kemudian menuliskan anggotanya satu per satu:

var x = {};
x["nama"] = "Taufik";
x["usia"] = 21;
x["lajang"] = true;

Metode lama/primitif:

var x = new Object();
x["nama"] = "Taufik";
x["usia"] = 21;
x["lajang"] = true;

Pemanggilan Data seperti halnya Array

Ini adalah cara pemanggilan data yang disarankan:

var identity = {
    "nama": "Taufik",
    "usia": 21,
    "lajang": true
};

document.write(identity.nama); // Hasil => `Taufik`

Namun kita juga bisa menggunakan konsep pemanggilan data seperti halnya penanganan data di dalam array, hanya saja indeks anggota tidak dituliskan sebagai angka melainkan sebagai nama properti:

var identity = {
    "nama": "Taufik",
    "usia": 21,
    "lajang": true
};

document.write(identity["nama"]); // Hasil => `Taufik`

Objek Bertingkat/Beranak/Bercabang

Sebuah objek tidak terbatas pada isi berupa properti. Sebuah objek juga bisa berisi objek lain, fungsi, atau bahkan array seperti ini:

var identity = {
    "nama": "Taufik",
    "usia": 21,
    "lajang": true,
    "hobi": {
        "makan": "roti",
        "menggambar": ["arsitektur", "kartun", "abstrak"],
        "favorit": {
            "makanan": "roti",
            "minuman": "air bening",
        }
    },
    "visi": {},
    "misi": {
        2013: "apa ya?",
        2014: "2013 saja belum apalagi 2014!"
    },
    "fungsi": function() {
        alert("Say no to free sex!");
    }
};

// Contoh-contoh pemanggilan...
document.write(identity.nama);                 // Hasil => `Taufik`
document.write(identity.hobi.makan);           // Hasil => `roti`
document.write(identity.hobi["makan"]);        // Hasil => `roti`
document.write(identity.hobi.favorit.minuman); // Hasil => `air bening`
document.write(identity["hobi"]["favorit"]["minuman"]); // Hasil => `air bening`
document.write(identity.hobi.menggambar[1]);   // Hasil => `kartun`

identity.fungsi(); // Akan memicu tampilnya kotak pesan bertuliskan `Say no to free sex!`

Sebuah objek dengan data yang kompleks seperti contoh di atas bisa kita sebut sebagai JavaScript Object Notation (JSON)

Array merupakan suatu variabel dimana di dalamnya terdapat beberapa anggota yang disatukan menjadi satu kesatuan dalam braket kotak ([]). Setiap data dapat diakses/dipanggil melalui nama variabel yang diikuti dengan indeks anggota. Berikut ini adalah sebuah gambaran bagaimana kita meringkas beberapa nama variabel menjadi satu kelompok array sebuah variabel…
Saya mulai dengan variabel biasa:

var text1 = "Aku";
var text2 = "Cinta";
var text3 = "Kamu";

Variabel di atas dapat dipanggil dengan cara menuliskan namanya satu per satu seperti ini:

document.write(text1 + " " + text2 + " " + text3); // Hasil => `Aku Cinta Kamu`

Dengan array, kita bisa menggabungkan beberapa nilai variabel ke dalam satu nama variabel menggunakan braket kotak:

var text = ["Aku", "Cinta", "Kamu"];

Untuk memanggil data di dalam array, kita tuliskan nama variabel yang kemudian diikuti dengan indeks anggota array tersebut. Indeks anggota dimulai dari 0:

document.write(text[0]); // Hasil => `Aku`
document.write(text[0] + " " + text[1] + " " + text[2]); // Hasil => `Aku Cinta Kamu`
document.write(text[2] + " " + text[1] + " " + text[0]); // Hasil => `Kamu Cinta Aku`
document.write(text[0] + " dan " + text[2]); // Hasil => `Aku dan Kamu`

Lainnya

Beberapa Cara Penulisan Array

Cara paling ringkas:

var x = ["lorem", "ipsum", "dolor", "sit", "amet"];

Mendeklarasikan array kosong, kemudian menuliskan anggotanya satu per satu:

var x = [];
x[0] = "lorem";
x[1] = "ipsum";
x[2] = "dolor";
x[3] = "sit";
x[4] = "amet";

Metode lama/primitif:

var x = new Array("lorem", "ipsum", "dolor", "sit", "amet");

var x = new Array();
x[0] = "lorem";
x[1] = "ipsum";
x[2] = "dolor";
x[3] = "sit";
x[4] = "amet";

Data yang Berbeda

var x = ["lorem", "ipsum", false, null, 0, 30, ""];

Jumat, 29 Maret 2019

Membuat Tabel dengan HTML

Lihat Semua Demo

Kerangka Tabel Paling Sederhana

Header Tabel

Menambahkan Border

Caption/Judul Tabel

Menggabungkan Sel-Sel Tabel (Merge Cell)

Mengubah Tampilan Tabel dengan CSS

Markup HTML Standar

Footer Tabel

Catatan Tambahan

HTML

CSS

JQuery

Demo

Selasa, 29 Januari 2013

Hindari Pertanyaan yang Terlalu Miskin/Terlalu Luas

Sesuaikan Tema Pembahasan

Tanyakan Sesuatu yang Bisa Dijawab, Bukan Diuraikan

Jangan Membuat Pertanyaan yang Hanya Bisa Dijawab dengan Jawaban “ya” dan “tidak”

Gunakan Istilah-Istilah Sesuai dengan Kemampuan

Gunakan Bahasa Mayoritas Komunitas

Jangan Membuat Pertanyaan Baru

Jangan Merendahkan Diri

Apa Pertanyaannya/Masalahnya?

Jangan Mengulang-Ulang Pertanyaan di Tempat yang Sama

Jangan Berlebihan di dalam Mengucapkan Terima Kasih

Jadi, Bagaimana Pertanyaan yang Baik?

Tidak Harus Memakai Bahasa Resmi/Baku

Sedikit Narsis Tidak Masalah

Bertanyalah Kepada Sesama Pelajar Otodidak

Beberapa Hal yang Sebaiknya Dipikirkan Sebelum Bertanya

Cara Mengetahui Bahwa Pertanyaanmu itu Bagus

Senin, 28 Januari 2013

HTML

CSS

Minggu, 27 Januari 2013

CSS

Markup HTML

Rabu, 23 Januari 2013

Contoh Penggunaan

Contoh Lain: Membuat Fitur Seleksi Otomatis pada Tag PRE

Versi JavaScript Mentah

Versi JQuery

Selasa, 22 Januari 2013

HTML

CSS

Demo

Murni CSS/Tanpa Gambar

CSS

Demo

Minggu, 20 Januari 2013

HTML

CSS

JQuery

Demo

Serif

Garamond (23.84% on Mac, 86.24% on Windows)

Lucida Bright (64.90% on Mac, 33.84% on Windows) Huge x-height

Palatino (79.71% on Mac, 98.04% on Windows)

Big Caslon (85.10% on Mac)

Didot (87.72% on Mac)

Baskerville (88.60% on Mac, 49.10% on Windows)

Hoefler Text (88.70% on Mac, 1.16% on Windows)

Bodoni (47.89% on Windows)

Goudy Old Style (51.30% on Windows)

Constantia (53.81% on Windows)

Cambria (54.51% on Windows)

Book Antiqua (86.09% on Mac)

Sans Serif

Optima (90.14% on Mac)

Futura (91.01% on Mac)

Gill Sans (91.52% on Mac, 51.74% on Windows)

Trebuchet (94.20% on Mac, 99% on Windows)

Helvetica Neue (94.74% on Mac)

Verdana (96.81% on Mac, 99.40% on Windows)

Lucida Grande (99.13% on Mac, 98.25% on Windows)

Geneva (98.84% on Mac)

Segoe (45.04% on Windows)