Mengatur Hurup dan Warna

Untuk para blogger baru, sobat akan menikmati fasilitas baru dari blogger.com, yaitu sobat bisa mengatur jenis font (hurup) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan).


Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan :
(ini khusus untuk template "minima")

1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang ada di sebelah kanan yang di sukai




2. Text Color --> pengaturan warna hurup dari posting-an




3. Link Color --> pengaturan warna hurup yang di link




4. Blog Title Color --> pengaturan warna hurup judul Blog




5. Blog Description Color --> pengaturan warna hurup deskripsi blog




6. Post Title Color --> pengaturan warna hurup judul posting-an




7. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah




8. Sidebar Title Color --> pengaturan warna hurup judul yang anda di sidebar (kolom samping)




9. Sidebar Title Color --> pengaturan warna hurup yang ada di sidebar(kolom samping)




10. Visited link Color --> pengaturan warna hurup link ketika pengunjung mengarahkannya ke tulisan yang mengandung link




11. Text Font --> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup yang ada di sidebar




12. Sidebar Title Font --> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal postingan




13. Blog Title Font --> pengaturan jenis hurup Judul blog




14. Blog Description Font --> Pengaturan jenis hurup dekripsi blog




15. Post Footer Font --> pengaturan jenis hurup footer (contoh : posted by )




16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai

Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.

Read more »

Cara mengatur menu Setelan di Blogger

Cara mengatur menu Setelan di Blogger – Diawal-awal anda membuat blog, sebaiknya anda melakukan pengaturan yang tepat pada menu Setelan, karena ini akan berpengaruh terhadap banyak hal yang berhubungan dengan blog anda.

Cara mengatur menu Setelan di Blogger

Untuk mengikuti panduan ini, pastikan pilihan bahasa blog anda adalah Bahasa Indonesia agar sesuai dengan apa yang Kang Rohman Tulis.



Berikut adalah cara melakukan pengaturan pada menu Setelan di blogger :



* Silahkan login ke blogger dengan akun anda.

* Klik pada nama blog yang ingin di atur.

* Klik menu Setelan yang berada disebelah kiri monitor.









* Silahkan klik masing-masing sub menu yang ada di bawahnya untuk melakukan pengaturan.

Dasar

• Judul : Klik “Edit” jika anda ingin melakukan perubahan terhadap judul yang ada atau biarkan saja jika judulnya sudah sesuai keinginan.


• Uraian : Klik “Edit”, kemudian isi dengan deskripsi blog yang ingin ditampilkan, sebaiknya ini diisi jangan dikosongkan, lanjutkan dengan klik tombol “Simpan perubahan”.


• Privasi : Sebaiknya biarkan sesuai pengaturan asli, lakukan edit apabila blog anda ingin di jadikan blog private (tertutup bagi umum).


• Alamat Blog : Biarkan apa adanya, kecuali bila anda ingin mengubah alamat blog dengan domain milik sendiri.


• Penulis Blog : Biarkan saja sesuai pengaturan awal.


• Pembaca Blog : Biarkan saja apa adanya jika blog anda ingin di bisa di baca oleh umum, lakukan edit bile blog anda ingin hanya bisa di baca oleh orang-orang tertentu yang anda pilih.

Post dan Komentar

• Tampilkan sebanyak mungkin : ubah angkanya sesuai dengan jumlah posting yang ingin tampil di halaman depan blog anda.


• Templat Entri  : biarkan tidak perlu di edit.


• Tampilkan gambar dengan Lightbox : Boleh pilih “Ya” atau “Tidak”, ini tidak terlalu penting.


• Bagikan ke Google+ : Pilih “Ya” jika nanti setelah posting ingin bisa langsung dibagikan ke layanan Google+, pilih “Tidak” jika sebaliknya.


• Lokasi Komentar : Biarkan terpilih “Tersemat”, agar kotak komentar langsung berada di bawah setiap postingan.


• Siapa yang dapat mengomentari? : Silahkan pilih sesuai keinginan. Pilihan “Semua Orang”, berati semua pengunjung blog anda bisa berkomentar.


• Moderasi Komentar : Pilih “Selalu” bila setiap ada komentar harus melalui persetujuan anda sebelum tampil di blog. Pilih “Tidak Pernah” agar ada yang komentar langsung tampil di blog.


• Tampilkan Tautan Balik : Pilih “Sembunyikan” bila anda tidak ingin menampilkan link siapa saja yang membuat tautan (link)  ke postingan bersangkutan. Pilih “Tampilkan” bila anda ingin menampilkan tautan.


• Pesan Formulir Komentar : Silahkan di isi jika ingin anda pesan diatas kotak komentar nantinya, misal : Silahkan jika anda yang ingin komentar, namun tolong gunakan bahasa yang sopan. Atau di kosongkan  juga tidak ada masalah.


• Mempublikasikan entri menggunakan SMS/MMS : Menu ini berguna apabila nantinya ingin mempublikasikan artikel melalui ponsel, silahkan baca lebih lanjut keterangan yang ada.


• Mempublikasikan entri menggunakan email : Fasilitas ini memungkin anda untuk mengirimkan postingan melalui email. Untuk keterangan lebih lengkap, mungkin akan di bahas pada artikel di masa mendatang.


• Email Pemberitahuan Komentar : isi dengan alamat email yang di inginkan, bila setiap ada komentar pada artikel blog anda akan di beritahukan secara otomatis ke alamat email tersebut. Kosongkan jika tidak menginginkan.

Bahasa dan pemformatan

• Bahasa : Pilih “Indonesia” agar lebih familiar dengan anda.


• Aktifkan transliterasi : Pilih “Dinonaktifkan”


• Zona Waktu : Pilih zona waktu sesuai dengan keinginan. Untuk wilayah Indonesia Barat, anda bisa memilih zona (GMT +7:00) Jakarta.


• Format Header Tanggal : Pilih format tampilan tanggal sesuai keinginan.


• Format Timestamp : Pilih sesuai keinginan.


• Format Stempel Waktu Komentar : Pilih sesuai keinginan.

Lainnya

• Alat Blog : Impor blog, fasilitas untum mengimpor blog, dengan ini anda bisa memindahkan file dari blog lain. Ekspor Blog, fasilitas untuk mengekspor blog, jika anda bermaksud memindahkan isi blog ke blog yang lain. Fasilitas Ekspor blog berguna juga untuk sarana backup data, silahkan lakukan backup data secara rutin agar apabila suatu saat terjadi hal yang tidak di inginkan, anda masih punya data untuk di masukan ke blog baru. Hapus blog, fasilitas untuk menghapus blog, jangan pernah klik ini apabila blog anda tidak ingin terhapus.


• Bolehkan Umpan Blog : Silahkan pilih sesuai keinginan, terkadang ada baiknya anda memilih mode “Penuh” namun terkadang perlu juga untuk di setting ke pilihan lain.


• Posting URL Pengubahan Arah Feed : Untuk tahap awal, ini bisa di kosongkan dulu, kedepannya anda akan mengerti tentang pengalihan alamat feed ini.


• Footer Feed Posting : Boleh di isi boleh di kosongkan, ini kaitannya dengan Feed.


• Aktifkan Tautan Lampiran : Boleh di pilih “Ya” boleh “Tidak”.


• URL OpenID Anda : Biarkan apa adanya.


• Konten Dewasa? : pilih tidak bila isi blog anda bukan berisi konten khusus dewasa.


• ID Properti Web Analytics : ini diisi dengan ID google analytic, bila belum punya bisa di kosongkan saja.

Semoga artikel tentang Cara mengatur menu Setelan di Blogger ini bermanfaat bagi anda yang baru memulai membuat blog di blogger.

Read more »

Performa Widget Random Post

Saya harus mengatakan bahwa widget random post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak:

<script src='/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts'></script>

Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post —termasuk juga widget artikel terkait— tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil (diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).

Mengacak Indeks Permulaan

Saya menyadari terdapat sebuah peluang untuk menciptakan widget random post yang lebih ringan dan cepat dimuat. Dibandingkan memuat semua posting dan memilah beberapa posting secara acak untuk ditampilkan, akan lebih baik jika kita mengacak nilai start-index pada feed sehingga posting yang dimuat bisa dimulai dari urutan sembarang:

function randomPosts(json) {
    // Ubah JSON menjadi HTML...
}

var startIndex = Math.round(Math.random() * 9999); // Membuat angka acak
document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');

Ada satu masalah kecil yang mungkin akan mengganggu. Jika angka acak yang tercipta nilainya lebih besar dari total posting blog Anda saat ini, maka widget random post ini tidak akan bekerja. Oleh karena itu kita harus membatasi angka acak yang tercipta, yaitu tidak boleh kurang dari 1 dan tidak boleh lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.

Untuk mendapatkan jumlah posting secara keseluruhan kita bisa mengambilnya melalui objek json.feed.openSearch$totalResults.$t:

// Konfigurasi
var homePage = 'http://nama_blog.blogspot.com',
    maxResults = 7;

// Fungsi untuk menggenerasikan angka acak dengan batasan minimal dan maksimal
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Mendapatkan indeks pemulai yang aman untuk memanggil feed utama
function createRandomPostsStartIndex(json) {
    // Buat angka acak dengan nilai tidak boleh kurang dari `1` dan tidak boleh lebih dari `total posting - posting yang ingin ditampilkan`
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // Tampilkan pesan log
    console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');

Muat ulang widget Anda berkali-kali. Seharusnya Anda akan melihat pesan log indeks pemanggilan posting yang berubah-ubah seperti ini:

Angka acak yang Saya tandai akan kita manfaatkan untuk memanggil indeks feed secara acak.

Kita akan menggunakan angka acak itu sebagai angka pemulai pada parameter start-index seperti ini:

function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

Pada bagian akhir URL feed terdapat parameter callback=randomPosts. randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah JSON Blogger menjadi widget:

function randomPosts(json) {
    var link, ct = document.getElementById('random-post-container'),
        entry = json.feed.entry,
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}

Sentuhan akhir, acak urutan posting yang ditampilkan menggunakan fungsi ini sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:

// Fungsi untuk mengacak array
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}

// Widget
function randomPosts(json) {
    var link, ct = document.getElementById('random-post-container'),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}

---

Hasil Akhir

<div id='random-post-container'>Memuat...</div>

<script>
//<![CDATA[
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
    maxResults = 7,
    containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

Lihat Demo Demo dengan Thumbnail dan Deskripsi

Ketika Posting Acak Dikirim Secara Langsung oleh Server

Dalam sebuah forum Saya pernah menemukan seseorang yang mencoba menyarankan Blogger untuk menyertakakan parameter orderby baru berupa random dan popular. Saya pikir ini adalah ide yang bagus. Karena berdasarkan dokumentasi, kalau tidak salah hanya ada dua macam nilai untuk parameter orderby, yaitu published dan updated:

http://nama_blog.blogspot.com/feeds/posts/summary?orderby=published
http://nama_blog.blogspot.com/feeds/posts/summary?orderby=updated

Jika suatu saat Blogger merealisasikan masukan dari pengguna ini, maka kita tidak perlu lagi menerapkan hack semacam ini. Cukup dengan membuat widget recent post biasa, kita bisa mengubah parameter URL feed dari orderby=published menjadi orderby=random untuk menciptakan widget random post. Tapi kasus ini masih dalam tahap “seandainya”.

Read more »

Menggenerasikan Angka Acak dengan Batasan Minimal dan Maksimal yang Telah Ditentukan

Fungsi ini digunakan untuk menghasilkan angka acak dalam range atau batasan minimal dan maksimal yang telah ditentukan:

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Penggunaan

Buat angka acak dengan batasan tidak boleh kurang dari 5 dan tidak boleh lebih dari 17:

document.write(getRandomInt(5, 17));

Read more »

JavaScript Pengacak Array

Fungsi ini digunakan untuk mengacak array:

function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j]; 
        arr[j] = temp;
    }
    return arr;
}

Penggunaan

var myArray = shuffleArray(["Aku", "Cinta", "Kamu"]);
document.write(myArray.join(' '));

Hasil keluaran nantinya akan menghasilkan teks Aku Cinta Kamu atau Kamu Cinta Aku atau Cinta Aku Kamu atau Cinta Kamu Aku atau Kamu Aku Cinta atau blablabla...

Read more »

Aksesibilitas pada Soal Pilihan Ganda Online

Berbicara mengenai elemen formulir, umumnya elemen radio dan checkbox akan menjadi jenis elemen yang cukup sulit untuk ditangani oleh pihak pengguna karena ukurannya yang sangat kecil. Contoh sederhana:

<input type="radio" name="o"> Pilihan 1
<br>
<input type="radio" name="o"> Pilihan 2

Formulir di atas memang bekerja, tetapi tidak cukup nyaman untuk digunakan. Area yang bisa diklik hanya terfokus pada elemen radio saja yang ukurannya sangat kecil:

Area pengecekan hanya terbatas pada elemen radio yang berukuran sangat kecil.

Mungkin tidak masalah jika orang yang mengisi formulir tersebut adalah orang-orang yang masih muda. Tetapi bagaimana jika yang mengisi formulir tersebut adalah para orangtua dan lanjut usia? Karena bagi mereka, mengarahkan mouse saja sudah kewalahan, apalagi mengeklik elemen radio yang ukurannya kecil seperti itu!

Selalu Ingat untuk Menambahkan Elemen Label

Untuk memperluas area pengecekan, kita bisa membungkus setiap opsi formulir dengan elemen label seperti ini:

<label><input type="radio" name="o"> Pilihan 1</label>
<br>
<label><input type="radio" name="o"> Pilihan 2</label>

Cara ini memungkinkan teks (atau elemen apa saja) yang berada di dalam elemen label tersebut untuk bisa bekerja sebagai pemicu perubahan kondisi radio yang merupakan anak dari label tersebut:

Area pengecekan menjadi lebih luas, meliputi radio dan teks di sampingnya.

Kursor

Berikan elemen label dan semua jenis tombol dengan kursor jari telunjuk untuk meningkatkan kenyamanan:

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
label {cursor:pointer}

Efek Timbal Balik

Perubahan warna saat opsi disentuh dan saat opsi terseleksi, semua itu akan memberikan rasa keyakinan kepada setiap pengguna yang sedang mengisi formulir Anda:

label:hover {background-color:whitesmoke}
label:active {background:none}
label.selected {background-color:forestgreen} /* Kelas `.selected` akan diciptakan oleh JavaScript */

Demonstrasi

Berikut ini adalah sebuah demonstrasi soal pilihan ganda online dengan akses jawaban yang mudah untuk kenyamanan pengguna:

HTML

<form class="qa-form" id="qa-form" action="...">
    <ol>
        <li>
            <p>Uraian pertanyaan di sini ...</p>
            <label><input type="radio" name="a-1"> Jawaban 1</label>
            <label><input type="radio" name="a-1"> Jawaban 2</label>
            <label><input type="radio" name="a-1"> Jawaban 3</label>
            ...
        </li>
        <li> ... </li>
    </ol>
</form>

CSS

.qa-form {padding:1em 1em 2em}

.qa-form ol,
.qa-form li,
.qa-form p,
.qa-form input,
.qa-form label {
  margin:0;
  padding:0;
}

.qa-form ol {
  list-style:decimal outside;
  margin:0 0 2em 3em;
}

.qa-form p {
  margin:1em 0;
  clear:both;
}

.qa-form label {
  display:block;
  width:300px;
  cursor:pointer;
  overflow:hidden;
  padding:5px 10px 5px 6px;
  margin:0 0 2px;
  line-height:100%;
  border-radius:20px;
}

.qa-form label input {
  outline:none;
  vertical-align:top;
  cursor:inherit;
}

.qa-form button {cursor:pointer}
.qa-form label:hover {background-color:whitesmoke}
.qa-form label:active {background:none}

.qa-form label.selected {
  background-color:forestgreen;
  color:white;
}

JQuery

// Fungsi ini digunakan untuk menambahkan/menyingkirkan
// kelas `.selected` pada elemen `<label>`
// berdasarkan kondisi radio di dalamnya
$(document).ready(function() {
    $('#qa-form :radio').on("change", function() {
        $(this).parent()[this.checked ? "addClass" : "removeClass"]('selected').siblings().removeClass('selected');
    });
    $('#qa-form :reset').on("click", function() {
        $(this).closest('form').find('label').removeClass('selected').children().prop('checked', false);
    });
});

Lihat Demo

Kesimpulan

Selalu pastikan bahwa pengguna bisa merasa nyaman dengan apa yang Anda berikan untuk mereka gunakan. Berikan efek timbal balik yang tegas kepada pengguna agar mereka yakin dengan apa yang telah mereka putuskan, sehingga hal-hal seperti kegagalan tes karena kesalahan antarmuka pengguna tidak akan terjadi.

Read more »

B1:A - Template Blogger Minimalis Responsif

B1:A adalah template Blogger responsif minimalis dua kolom. Pemilihan font Saya fokuskan pada Source Sans Pro, Oswald dan font ikon dari Fontawesome.

Lihat Gambar Demo Unduh Template

Gambar demo yang lebih besar seharusnya bisa Anda dapatkan di dalam file unduhan.

Konfigurasi

1. Mengubah Teks “Read More”

Masuk ke halaman Tata Letak, kemudian lihat pada widget Posting Blog. Klik tombol pengeditan yang terletak di sebelah pojok kanan bawah. Teks “Read More” bisa diganti pada bagian ini:

Editor widget posting.

2. Mengubah Teks “Search”

Saat Anda berada di halaman Editor HTML template, pastikan kursor teks sedang aktif di dalam area kode. Tekan CTRL + F lalu ketik class='submit-button. Kode yang Saya beri tanda di bawah ini adalah yang harus diganti:

<button class='submit-button' type='submit'><i class='icon-search'/> Search</button>

3. Memodifikasi Menu Navigasi

Tekan CTRL + F lalu ketik id='site-nav untuk menemukan deret kode seperti ini:

<nav class='nav' id='site-nav'>
  <ul>
    <li><a class='home-menu' expr:href='data:blog.homepageUrl' title='Home'><i class='icon-home icon-2x'/><span class='screen-reader'> Home</span></a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Archive</a></li>
    ...

4. Mematikan Fitur Responsif

Untuk yang tidak suka dengan tema responsif, pada tag <html> terdapat atribut kelas seperti ini:

<html expr:class='data:blog.languageDirection + &quot; no-js rwd&quot;' expr:dir='data:blog.languageDirection'>

Untuk mematikan fitur responsif, buang kode yang Saya beri tanda.

Read more »

Cross Browser Hash Change Event

hashchange adalah event JavaScript yang akan memicu suatu fungsi untuk bekerja setiap kali hash pada address bar berubah. Umumnya terjadi ketika pengguna menekan tombol Back dan/atau Forward pada peramban. Bermanfaat untuk memastikan agar AJAX bisa tetap bekerja ketika pemicu fungsi yang digunakan adalah berupa penekanan tombol Back dan Forward:

// http://stackoverflow.com/questions/9339865/get-the-hashchange-event-to-work-in-all-browsers-including-ie7
(function(w) {
    if ('onhashchange' in w) {
        if (w.addEventListener) {
            w.addHashChange = function(func, before) {
                w.addEventListener('hashchange', func, before);
            };
            w.removeHashChange = function(func) {
                w.removeEventListener('hashchange', func);
            };
            return;
        } else if (w.attachEvent) {
            w.addHashChange = function(func) {
                w.attachEvent('onhashchange', func);
            };
            w.removeHashChange = function(func) {
                w.detachEvent('onhashchange', func);
            };
            return;
        }
    }
    var hashChangeFuncs = [], oldHref = location.href;
    w.addHashChange = function(func, before) {
        if (typeof func === 'function') hashChangeFuncs[before ? 'unshift' : 'push'](func);
    };
    w.removeHashChange = function(func) {
        for (var i = hashChangeFuncs.length-1; i >= 0; i--) {
            if (hashChangeFuncs[i] === func) hashChangeFuncs.splice(i, 1);
        }
    };
    setInterval(function() {
        var newHref = location.href;
        if (oldHref !== newHref) {
            oldHref = newHref;
            for (var i = 0; i < hashChangeFuncs.length; i++) {
                hashChangeFuncs[i].call(w, {
                    'type': 'hashchange',
                    'newURL': newHref,
                    'oldURL': oldHref
                });
            }
        }
    }, 100);
})(window);

Dasar Penggunaan

Fungsi ini akan menampilkan kotak peringatan setiap kali hash berubah. Fungsi ini tidak memerlukan pemicu seperti window.onload, elem.onclick, atau event apapun! Karena pemicu kemunculan kotak pesan berasal dari perubahan hash pada peramban. Untuk mengubah hash pada peramban bisa dilakukan dengan cara mengeklik tautan lokal yang mengandung hash atau menekan tombol Back dan/atau Forward:

addHashChange(function() {
    alert('OK!');
});

Lihat Demo

Sampel Penerapan AJAX

$('.ajax-link').on("click", function() {
    window.location.hash = this.hash;
    return false;
});

// If user opens a URL that already contains a hash...
if (window.location.hash) {
    var theHash = window.location.hash; // Save the hash
    window.location.hash = ''; // Remove the hash, so if the AJAX link is clicked, the `hashchange` event will be triggered.
    $('.ajax-link').filter(function() {
        return this.hash == theHash;
    }).trigger("click"); // Trigger a click event to the AJAX link if it `hash` match with `window.location.hash`
}

// From hash change or history (Back/Forward button)
// Does not require any event. Just place the function like this...
// Because the trigger came from the hash changes in the address bar.
addHashChange(function(e) {
    var url = (e.newURL||location.href).split('#');
    $('#container').load(url[0] + ' #' + url[1]);
});

Read more »

Template Blogazine 21.04.92

Pembaharuan 19 Maret 2013: Memperbaiki framework template dengan menyusun ulang satuan-satuan elemen yang lebih fleksibel + mengaktifkan hack meta deskripsi Blogger. Saya sarankan Anda untuk mengunduh ulang/melihat ulang blog demo framework template Blogazine ini!

Setelah beberapa bulan melakukan penelitian sendiri, merasakan bagaimana sulitnya membuat posting unik dan mengetahui apa yang bisa dipermudah dan apa yang membuat Saya merasa sulit untuk membuatnya, pada akhirnya Saya memutuskan untuk merilis template blogspot khusus Blogazine yang diharapkan bisa menjadi standar:

Lihat Demo Unduh Template

Tampilannya memang sangat sederhana, tapi justru itulah tujuan Saya. Saya membuat halaman muka template ini polos, dan bisa dibilang tidak memiliki unsur desain sama sekali. Saya harap kalian bisa memodifikasi tampilan halaman muka sesuka hati dan menciptakan identitas kalian masing-masing. Sebagai catatan, disarankan untuk tidak menyentuh bagian-bagian kode CSS di dalam <b:skin> karena Saya sudah merancangnya agar bisa mempermudah pembuatan posting unik pada halaman item. Untuk mengedit/mendesain tampilan halaman muka, kalian bisa mencoba berkreasi pada bagian ini:

<!-- MODIFIKASI TAMPILAN HALAMAN MUKA DI SINI! -->
<style type='text/css'>

/* General */
body {}

/* Header */
#headace {
  text-align:right;
  padding:2em 2.5em;
}
#headace h1 {
  margin:0 0;
  font-size:400%;
}
#headace p {
  font-size:120%;
  margin:.5em 0 0;
}

/* Posts */
.post {
  margin:0 0;
  padding:0 0;
}
.post-outer {margin:0 5%}
.post .post-title {
  margin:0 0;
  font-size:120%;
  text-align:left;
}
.post-footer {margin:.5em 0 1.5em}
.date-header {display:none}

</style>

Sistem Grid

Saya menggunakan sistem grid 1140px Grid dari Andy taylor yang juga Saya gunakan dalam blog Blogazine Saya. Dengan sistem grid, kalian tidak perlu lagi membuat peraturan media queries berkali-kali pada setiap posting, karena sistem grid sudah disusun dalam satu paket di dalam template. Berikut ini adalah konsep dasar pembuatan kolom pada posting:

Pertama-tama buat pembungkus luar berupa elemen .row:

<div class="row">
    ...
</div>

Setelah itu kalian tentukan sendiri, akan menggunakan model grid berapa kolom. Dalam sistem grid ini ada setidaknya sebelas macam ukuran. Masing-masing dibagi dalam kelas yang berbeda seperti ini:

1. onecol untuk standar 12 kolom sama lebar
2. twocol untuk standar 6 kolom sama lebar
3. threecol untuk standar 4 kolom sama lebar
4. fourcol untuk standar 3 kolom sama lebar
5. fivecol
6. sixcol untuk standar 2 kolom sama lebar
7. sevencol
8. eightcol
9. ninecol
10. tencol
11. elevencol

fivecol, sevencol, eightcol, ninecol, tencol dan elevencol digunakan untuk layout kolom lanjutan. Misalnya jika kita ingin membuat dua kolom dengan lebar yang berbeda. Contoh sederhana, untuk membuat dua kolom sama lebar, kita bisa menggunakan .sixcol seperti ini:

<div class="row">
    <div class="sixcol">
        ...
    </div>
    <div class="sixcol last">
        ...
    </div>
</div>

Catatan: Jangan lupa untuk menyertakan kelas .last pada setiap akhir kolom. Itu digunakan untuk menghilangkan margin-right yang berlebih pada kolom terakhir.

Gambaran selengkapnya mengenai hasil penerapan kelas-kelas grid di atas bisa kalian lihat di halaman ini:

Lihat Demo

Perataan Gambar dan Teks

Sistem perataan gambar dan teks sudah Saya buat dalam satu paket CSS di dalam template. Tugas kalian hanya tinggal menerapkan kelas-kelasnya saja pada elemen yang dikehendaki:

/* CSS Float */
.clear {clear:both} /* clear float */
.left {float:left} /* left alignment */
.right {float:right} /* right alignment */
.hidden {display:none} /* hidden element */
.visually-hidden {
  position:absolute !important;
  top:-9999px;
  left:-9999px;
} /* accessible hidden element */

/* Text Alignment */
.text-left {text-align:left} /* text-align left */
.text-right {text-align:right} /* text-align right */
.text-center {text-align:center} /* text-align center */

/* Image Alignment */
img.left {margin:0 1em .2em 0} /* left alignment */
img.right {margin:0 0 .2em 1em} /* right alignment */
img.center {margin:0 auto} /* center alignment */

Sebagai contoh, jika kalian ingin menerapkan perataan gambar ke samping kiri, tambahkan kelas left seperti ini:

<img class="left" src="gambar.jpg" alt="" />

Sisanya perataan kanan dan tengah Saya rasa bisa dengan mudah dipahami:

<img class="right" src="gambar.jpg" alt="" />
<img class="center" src="gambar.jpg" alt="" />

Editor Blogger biasanya akan menyisipkan elemen .separator pada setiap gambar yang berhasil diunggah. Jadi, dibandingkan menerapkan kelas pada gambar secara langsung, Saya lebih menyarankan kalian untuk menerapkan kelas perataan pada elemen .separator seperti ini:

<div class="separator center">
    <a href="#"><img src="gambar.jpg" alt="" /></a>
</div>
<div class="separator left">
    <a href="#"><img src="gambar.jpg" alt="" /></a>
</div>
<div class="separator right">
    <a href="#"><img src="gambar.jpg" alt="" /></a>
</div>

Hapus semua inline-style bawaan dari editor Blogger (Misalnya: style="margin-left:1em;margin-right:1em;"). Kita cukup menggunakan kelas perataan pada setiap elemen.

Perataan teks tidak sulit, cukup buat elemen baru kemudian tambahkan kelas perataan, atau tentukan elemen mana yang ingin diberi kelas perataan:

<div class="text-right"> ... </div>

<div class="row">
    <div class="fourcol text-right">
        ...
    </div>
    <div class="fourcol text-center">
        ...
    </div>
    <div class="fourcol last">
        ...
    </div>
</div>

Lihat Demo

Lainnya

Formulir komentar tersembunyi dan fitur thread-commenting bawaan Blogger siap pakai.

Lisensi

http://creativecommons.org/licenses/by/2.5/ - Artinya bahwa Anda boleh mengubah nama pembuat, mengubah identitas template dan footer namun dengan syarat tetap mempertahankan keterangan sumber. Tidak perlu repot-repot membuat tautan aktif yang dipasang di catatan kaki blog, cukup biarkan semua atribusi yang ada di dalam kode. Selebihnya terserah Anda: Tidak ada lisensi/tidak mewajibkan atribusi, kecuali sistem grid, kalau mau.

Unduh Template

Read more »

Framework CSS: Utamakan Konsistensi Tampilan Artikel Sebelum Layout

Yang Saya maksudkan di sini adalah, jadikan tampilan artikel sebagai prioritas utama sebelum memulai pondasi desain/rancangan tema/template. Mengingat kebiasaan buruk yang sering terjadi adalah kita membentuk hasil jadinya terlebih dahulu kemudian baru merancang tampilan-tampilan paragraf, kuota dan blok kode. Padahal, dengan merancang elemen-elemen kecil dan umum tersebut terlebih dahulu, kita bisa memastikan bahwa tampilan akhir nantinya akan menjadi lebih konsisten.

Merancang penampilan secara keseluruhan dan melanjutkannya dengan merancang tampilan elemen artikel hanya akan menambah waktu kerja kita menjadi dua kali lipat lebih lama dan lebih rumit tanpa kita sadari. Sebagai contoh, saat kita merancang tampilan posting, saat itu kita juga akan menentukan tampilan judulnya. Setelah itu kita akan merancang tampilan sidebar dan footer, kemudian juga akan menentukan tampilan judulnya dan seterusnya:

Contoh Buruk

/* posting */
.post {
  font-family:Arial,Sans-Serif;
  font-size:12px;
  color:#333;
}

.post h2 {
  font-size:30px;
  font-weight:bold;
  margin-bottom:15px;
  color:#3399ff;
}

/* sidebar */
.sidebar {
  float:right;
  width:200px;
  overflow:hidden;
  word-wrap:break-word;
  font-family:Arial,Sans-Serif;
  color:#222;
}

.sidebar h2 {
  font-weight:normal;
  font-size:12px;
  text-transform:uppercase;
  margin-bottom:15px;
}

/* footer */
.footer {
  background-color:#2f2f2f;
  font-family:Georgia,Serif;
  font-size:13px;
  color:#666;
}

.footer h2 {
  font-weight:normal;
  font-size:20px;
  color:#f5f5f5;
}

Terlalu banyak pekerjaan hanya untuk membuat beberapa blok area saja. Seharusnya pekerjaan ini bisa menjadi lebih singkat apabila kita merancang framework elemen-elemen artikel terlebih dahulu secara global. Sudah ada beberapa framework yang tersedia untuk mengatasi kebiasaan buruk ini, misalnya Normalize dan HTML5 Boilerplate. Tapi di sini kita akan mencoba untuk membuatnya sendiri. Dimulai dengan CSS reset.

Merancang Framework CSS

CSS Reset

CSS ini akan menormalkan semua tampilan elemen HTML —kecuali elemen-elemen formulir— menjadi seragam/normal. Dimulai dari ukuran, warna, margin, padding, dimensi dan juga ketebalannya. Mengawali rancangan elemen artikel dengan CSS reset akan mempermudah kita dalam merancang tampilan elemen-elemen HTML setelah ini:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
a,abbr,acronym,address,
big,cite,code,del,dfn,
em,img,ins,kbd,q,
s,samp,small,strike,strong,
sub,sup,tt,
var,b,u,i,center,
dl,dt,dd,
ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,
footer,header,hgroup,menu,nav,
output,ruby,
section,summary,
time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,
figcaption,figure,footer,
header,hgroup,menu,nav,section {
  display:block;
}

body {
  line-height:1;
}

ol,ul {
  list-style:none;
}

blockquote,q {
  quotes:none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content:'';
  content:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

Elemen <BODY>

Berikutnya kita atur ukuran huruf, tipe huruf, line-height dan warna huruf secara global pada elemen <body>:

body {
  /* `font-style:normal`,
     `font-weight:normal`,
     `font-size:13px`,
     `line-height:1.4em`,
     `font-family:Arial,Sans-Serif` */
  font:normal normal .8125em/1.4 Arial,Sans-Serif;
  background-color:white; /* warna latar secara global */
  color:#333; /* warna huruf secara global */
}

Huruf Tebal, Huruf Miring dan Elemen-Elemen Kecil Lainnya

Karena tampilan elemen HTML sudah diatur ulang oleh CSS reset, maka kita perlu mengatur beberapa tampilan elemen menjadi seperti semula:

/* huruf tebal */
strong,b {
  font-weight:bold;
}

/* citation & huruf miring (italic + emphasis) */
cite,em,i {
  font-style:italic;
}

/* tautan */
a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

/* Internet Explorer akan menambahkan border pada gambar
   yang diliputi oleh tautan */
a img {
  border:none;
}

/* abbreviation & acronym */
abbr,
acronym {
  border-bottom:1px dotted;
  cursor:help;
}

/* superscript & subscript */
sup,
sub {
  vertical-align:baseline;
  position:relative;
  top:-.4em;
  font-size:86%;
}

sub {
  top:.4em;
}

/* huruf kecil */
small {
  font-size:86%;
}

/* tombol keyboard */
kbd {
  font-size:80%;
  border:1px solid #999;
  padding:2px 5px;
  border-bottom-width:2px;
  border-radius:3px;
}

/* penanda teks */
mark {
  background-color:#ffce00;
  color:black;
}

Margin Paragraf

Paragraf membutuhkan kerenggangan antara teks paragraf yang satu dengan yang lainnya. Begitu pula elemen-elemen lain yang biasa menyertainya seperti kuota, tabel, figur, formulir, daftar dan blok kode:

p,blockquote,pre,
table,figure,hr,form,
ol,ul,dl {
  margin:1.5em 0;
}

Elemen Heading

Atur elemen heading dengan line-height menjadi normal dan huruf menjadi tebal. Tentukan juga margin heading secara global sebelum kemudian kita melanjutkannya dengan menentukan ukuran elemen heading sesuai dengan level/tingkatannya:

h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  line-height:normal;
  margin:1.5em 0 0;
}

h1 {font-size:200%}
h2 {font-size:180%}
h3 {font-size:160%}
h4 {font-size:140%}
h5 {font-size:120%}
h6 {font-size:100%}

Elemen Daftar

Jangan biarkan elemen daftar menjadi terlalu sejajar dengan paragraf karena pada umumnya itu hanya akan membuat mata kita menjadi merasa tidak nyaman dan tertekan. Posisikan elemen daftar menjadi sedikit menjorok ke depan untuk menciptakan kesan istirahat/fokus:

/* ordered, unordered list & description list */
ol,ul,dl {margin-left:3em}

ol {list-style:decimal outside} /* atur ulang `list-style` pada elemen `<ol>` */
ul {list-style:disc outside} /* atur ulang `list-style` pada elemen `<ul>` */
li {margin:.5em 0} /* beri sedikit jarak atas dan bawah pada elemen `<li>` untuk item daftar dengan konten yang panjang */

dt {font-weight:bold}
dd {margin:0 0 .5em 2em}

Elemen Formulir

Biasanya ini tidak terlalu penting. Tetapi setidaknya samakanlah tipe dan ukuran huruf sesuai dengan huruf pada elemen induknya. Mengenai tampilan selanjutnya seperti warna latar dan efek :hover bisa ditentukan nanti setelah framework selesai dibuat:

input,
button,
select,
textarea {
  font:inherit;
  font-size:100%;
  line-height:normal;
  vertical-align:baseline;
}

/* mengeset `box-sizing` menjadi `border-box` pada `<textarea>` untuk mengatasi masalah
   pengguna yang sering kesulitan menentukan lebar akurat
   pada elemen ini menjadi `100%` ketika menggunakan logika box-model yang lama */
textarea {
  display:block;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

Blok Kode dan Kuota

<pre> dan <blockquote> biasanya mendapatkan perlakuan khusus mengingat elemen ini biasa kita gunakan untuk menyatakan hal-hal yang penting. Blok kode digunakan untuk menyatakan kode yang perlu dicatat/dipahami dan kuota digunakan untuk menyatakan teks yang perlu diingat atau direnungkan:

pre,
code {
  font-family:"Courier New",Courier,Monospace;
  color:inherit;
}

/* jika perlu tentukan juga warna latar dan huruf */
pre {
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
}

blockquote {
  margin-left:2em;
  margin-right:2em;
  border-left:4px solid #ccc;
  padding-left:1em;
  font-style:italic;
}

Tabel

Seperti yang pernah Saya nyatakan pada tutorial pembuatan tabel dengan HTML, disarankan untuk menentukan border dan padding pada tabel yang memiliki atribut border=1 saja demi keamanan:

table[border="1"] th,
table[border="1"] td,
table[border="1"] caption {
  border:1px solid;
  padding:.5em 1em;
  text-align:left;
  vertical-align:top;
}

th {
  font-weight:bold;
}

table[border="1"] caption {
  border:none;
  font-style:italic;
}

---

Hasil Akhir

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
a,abbr,acronym,address,
big,cite,code,del,dfn,
em,img,ins,kbd,q,
s,samp,small,strike,strong,
sub,sup,tt,
var,b,u,i,center,
dl,dt,dd,
ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,
footer,header,hgroup,menu,nav,
output,ruby,
section,summary,
time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,
figcaption,figure,footer,
header,hgroup,menu,nav,section {
  display:block;
}

body {
  line-height:1;
}

ol,ul {
  list-style:none;
}

blockquote,q {
  quotes:none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content:'';
  content:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* ===============
   FRAMEWORK START
   =============== */
body {
  font:normal normal .8125em/1.4 Arial,Sans-Serif;
  background-color:white;
  color:#333;
}

strong,b {
  font-weight:bold;
}

cite,em,i {
  font-style:italic;
}

a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

a img {
  border:none;
}

abbr,
acronym {
  border-bottom:1px dotted;
  cursor:help;
}

sup,
sub {
  vertical-align:baseline;
  position:relative;
  top:-.4em;
  font-size:86%;
}

sub {
  top:.4em;
}

small {
  font-size:86%;
}

kbd {
  font-size:80%;
  border:1px solid #999;
  padding:2px 5px;
  border-bottom-width:2px;
  border-radius:3px;
}

mark {
  background-color:#ffce00;
  color:black;
}

p,blockquote,pre,
table,figure,hr,form,
ol,ul,dl {
  margin:1.5em 0;
}

hr {
  height:1px;
  border:none;
  background-color:#666;
}

h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  line-height:normal;
  margin:1.5em 0 0;
}

h1 {font-size:200%}
h2 {font-size:180%}
h3 {font-size:160%}
h4 {font-size:140%}
h5 {font-size:120%}
h6 {font-size:100%}

ol,ul,dl {margin-left:3em}
ol {list-style:decimal outside}
ul {list-style:disc outside}
li {margin:.5em 0}

dt {font-weight:bold}
dd {margin:0 0 .5em 2em}

input,
button,
select,
textarea {
  font:inherit;
  font-size:100%;
  line-height:normal;
  vertical-align:baseline;
}

textarea {
  display:block;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

pre,
code {
  font-family:"Courier New",Courier,Monospace;
  color:inherit;
}

pre {
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
}

blockquote {
  margin-left:2em;
  margin-right:2em;
  border-left:4px solid #ccc;
  padding-left:1em;
  font-style:italic;
}

table[border="1"] th,
table[border="1"] td,
table[border="1"] caption {
  border:1px solid;
  padding:.5em 1em;
  text-align:left;
  vertical-align:top;
}

th {
  font-weight:bold;
}

table[border="1"] caption {
  border:none;
  font-style:italic;
}

Sampai di sini Saya rasa sudah cukup untuk dijadikan sebagai dasar. Setelah ini Anda bisa melanjutkan untuk membuat kelas-kelas produktif seperti .hidden, .visually-hidden, .btn dan yang lainnya untuk keperluan rancangan tingkat lanjut:

.hidden,[hidden] {
  display:none;
}

.invisible {
  visibility:hidden;
}

.visually-hidden {
  position:absolute !important;
  overflow:hidden;
  clip:rect(0px 0px 0px 0px);
  clip:rect(0px,0px,0px,0px);
  height:1px;
  width:1px;
  margin:-1px 0 0;
  padding:0;
  border:0;
}

.clear {
  display:block;
  clear:both;
}

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}

.clearfix:after {
  clear:both;
}

.clearfix {
  *zoom:1;
}

.pull-left {
  float:left;
}

.pull-right {
  float:right;
}

.centered {
  clear:both;
  display:block;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

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

.text-left {
  text-align:left;
}

.text-right {
  text-align:right;
}

.text-justify {
  text-align:justify;
}

.btn {
  color:white;
  background-color:black;
  /* ... */
}

.btn:hover {
  /* ... */
}

.btn:active {
  /* ... */
}

Beberapa nama kelas di atas akan sangat mudah Anda temui pada framework HTML5 Boilerplate dan Twitter Bootstrap (Twitter Bootstrap juga memakai HTML5 Boilerplate). Anda akan mengetahui fungsi-fungsi kelas tersebut, mengapa kelas tersebut dibuat dan mengapa kelas-kelas tersebut menjadi semacam “standar” saat Anda mempelajarinya.

Beralih ke Framework Buatan Sendiri

Untuk mempercepat pekerjaan, yang terpenting sebenarnya adalah framework. Namun jika Anda tidak mengerti apa dan bagaimana framework itu dibuat dan digunakan, maka hasil akhirnya akan sama saja. Memulai membuat framework sendiri Saya pikir jauh lebih baik dibandingkan hanya sekedar menyalin dan menempel kode dari framework lain yang sudah ada. Mengikuti dan mempelajari bagaimana mereka menciptakan framework seharusnya lebih diutamakan dibandingkan hanya sekedar memakainya. Karena dengan mempelajari bagaimana sebuah framework terbentuk, maka dari situ Anda bisa lebih cerdas di dalam mencontoh dan menyaring apa-apa saja yang sebenarnya diperlukan dan apa saja yang sebenarnya tidak diperlukan menurut kebutuhan Anda saat itu untuk keperluan yang lebih spesifik dan efisien tentunya:

Lihat Demo

Read more »

Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut

Ada satu hal yang mungkin tidak Anda sadari bahwa ketika Anda menyatakan font-family pada teks, maka peramban akan mencoba untuk menciptakan efek bold dan italic palsu ketika peramban tidak berhasil menemukan file font bold dan italic pada font terkait. Sebagai contoh, Tahoma hanya memiliki dua varian, yaitu regular dan bold, sehingga hasil tampilan teks pada peramban hanya akan terlihat bagus pada model teks biasa dan tebal:

Tahoma

Karena sejak awal varian italic tidak pernah ada pada keluarga font Tahoma, maka peramban mencoba untuk merekayasa dimensi font tersebut menjadi italic. Akan tetapi tetap saja, efek italic yang Anda lihat bukanlah italic yang sesungguhnya. Perbedaan akan terlihat jelas pada jenis-jenis font yang memiliki lebih banyak varian. Misalnya Georgia:

Georgia

Georgia memiliki empat varian, termasuk di dalamnya adalah regular, italic, bold bahkan bold-italic. Hal ini memungkinkan peramban untuk menampilkan dimensi font dalam “porsi” yang tepat pada varian font minimal. Yaitu regular, italic, bold dan bold-italic:

Georgia

Hal Buruk yang Sering Saya Lihat

Hal buruk yang sering Saya lihat adalah bahwa seorang pengguna mencoba untuk menyatakan font-weight:bold atau font-style:italic pada keluarga font yang tidak memiliki varian tersebut atau pada keluarga font yang memiliki varian tersebut, akan tetapi varian selain regular tidak pernah disertakan di dalam deklarasi @font-face:

Gambar 1: Mendeklarasikan ketebalan font heading pada situasi yang salah. Gambar 2: Dimensi font yang sesungguhnya.
Keterangan: Bebas Neue pada judul dan Franklin Gothic Medium pada paragraf.

Pada keadaan normal, elemen heading akan memiliki efek tebal secara otomatis. Jadi, jangan lupa untuk mendeklarasikan font-weight dan font-style dengan nilai normal saat Anda sedang menerapkan font kustom yang tidak memiliki varian lengkap untuk elemen ini:

h1,h2,h3,h4,h5,h6 {
  font-family:"Bebas Neue",Sans-Serif;
  font-style:normal;
  font-weight:normal;
}

Mencari tutorial tentang cara menggunakan @font-face, baca di artikel Menggunakan @font-face

Read more »

Tes Dukungan CSS Transisi pada Peramban

// http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr/13081497#13081497
var supportCSSTransitions = (function() {
    var s = document.createElement('p').style;
    return 'transition' in s ||
           'WebkitTransition' in s ||
           'MozTransition' in s ||
           'msTransition' in s ||
           'OTransition' in s;
})();

Penggunaan

Menambahkan kelas spesifik pada tag <html> berdasarkan dukungan CSS transisi pada peramban yang dipakai:

document.documentElement.className +=
    supportCSSTransitions ? " css-transition" : " no-css-transition";

Menggunakan animasi CSS transisi untuk performa yang lebih baik jika peramban yang dipakai mendukung CSS transisi, dan akan dialihkan ke JQuery .animate() jika peramban yang dipakai tidak mendukung CSS transisi:

if (supportCSSTransitions) {
    $('div').css({
        "top": 50,
        "left": 100
    });
} else {
    $('div').animate({
        "top": 50,
        "left": 100
    }, 1000);
}

Read more »

Jalan Pintas untuk Menangani Perintah-Perintah JQuery di dalam Peraturan Kondisi

Dalam sebuah forum Saya pernah sekali diajari mengenai cara tersingkat untuk menangani perintah-perintah JQuery di dalam peraturan kondisi yang biasa dituliskan seperti ini:

if (statement) {
    $(selector).method1();
} else {
    $(selector).method2();
}

Kode di bawah ini adalah jalan pintas untuk kondisional di atas:

$(selector)[statement ? "method1" : "method2"]();

Pada awalnya Saya merasa bingung dengan sudut pandang yang orang tersebut berikan, sampai kemudian Saya menyadari bahwa pada dasarnya ini hanyalah sebuah jalan pintas peraturan if/else untuk memanggil item objek yang berbeda berdasarkan kondisi tertentu.

JQuery, pada dasarnya hanyalah sekumpulan fungsi yang dinyatakan di dalam objek. Kurang lebihnya seperti ini (memang tidak sama persis seperti ini, tapi setidaknya lumayan mirip):

var foo = {
    addClass: function(param) { ... },
    removeClass: function(param) { ... },
    toggleClass: function(param) { ... },
    hasClass: function(param) { ... }
    ...
}

Sehingga setiap fungsi bisa dipanggil dengan cara seperti ini:

foo.addClass('bar');
foo.removeClass('bar');

Atau seperti ini:

foo["addClass"]('bar');
foo["removeClass"]('bar');

Katakanlah kita ingin memanggil fungsi tertentu di dalam foo hanya jika suatu kondisi terpenuhi. Jika kondisi tidak terpenuhi, maka fungsi cadangan yang lain akan dijalankan:

if (abc === true) {
    foo["removeClass"]('bar');
} else {
    foo["addClass"]('bar');
}

Yang mana jika diubah ke pernyataan kondisional ringkas akan menjadi seperti ini:

var x = (abc === true) ? "removeClass" : "addClass";
foo[x]('bar');

Sehingga kita bisa menyimpulkannya menjadi seperti ini:

foo[abc === true ? "removeClass" : "addClass"]('bar');

Contoh Penerapan

Berikut ini adalah contoh penerapan kondisional jalan pintas untuk menangani perintah .slideDown() dan .fadeOut() berdasarkan visibilitas panel:

Sebelum

$('h2').click(function() {
    $(this).toggleClass('active');
    if ($(this).next().is(':hidden')) {
        $(this).next().slideDown();
    } else {
        $(this).next().fadeOut();
    }
});

Sesudah

$('h2').click(function() {
    $(this).toggleClass('active')
        .next()[$(this).next().is(':hidden') ? "slideDown" : "fadeOut"]();
});

Lihat Demo

Read more »

Mengaktifkan Fitur Komentar Google+ (Untuk yang Gagal)

Baru-baru ini Blogger telah merilis fitur komentar baru yang memungkinkan kita untuk mengintegrasikan komentar Blogger ke Google+. Untuk mengaktifkannya mudah. Masuk saja ke tab Google+ kemudian centang pilihan “Gunakan Google+ Komentar di blog ini”:

Berpindah ke sistem komentar Google+

Jika template blog yang digunakan masih standar, seharusnya area komentar lama akan langsung digantikan dengan komentar baru dari Google+. Tapi jika template yang dipakai sudah tidak standar lagi, kita masih bisa menggunakan cara manual untuk menampilkan komentar Google+. Berikut ini adalah langkah-langkahnya:

Pertama-tama masuk ke halaman editor HTML template kemudian cari kode ini (loncat saja ke widget Blog1, kemudian jabarkan):

<b:includable id='comments' var='post'>

Jangan lupa untuk menyimpan salinan template ke komputer sebelum melakukan modifikasi.

Setelah ditemukan, salin kode di bawah ini kemudian letakkan di atasnya:

<b:includable id='g-comments' var='post'>

  <div id='g-comments-outer'>
    <div class='g-comments' expr:data-href='data:blog.canonicalUrl' data-width='600' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD'>
      <a href='#g-comments-outer' id='g-comments-loader'>Add Comments</a>
    </div>
  </div>

  <!-- For slow connection -->
  <script type='text/javascript'>
  //<![CDATA[
  (function() {
    var btn = document.getElementById('g-comments-loader'),
    showGC = function() {
      var script = document.createElement('script'),
        head = document.getElementsByTagName('head')[0], old;
      script.type = "text/javascript";
      script.id = "g-comments-script";
      script.src = "//apis.google.com/js/plusone.js";
      if (document.getElementById('g-comments-script')) {
        old = document.getElementById('g-comments-script');
        old.parentNode.removeChild(old);
      }
      head.appendChild(script);
    };
    btn.onclick = function() {
      this.innerHTML = "Memuat...";
      showGC();
      return false;
    };
  })();
  //]]>
  </script>

</b:includable>

Kode 600 merupakan variabel untuk menentukan lebar area komentar. Sesuaikan dengan lebar area posting blog Anda. Jika perlu ganti juga label Add Comments dengan kata-kata yang lain.

Setelah itu cari kode ini kemudian jabarkan:

<b:includable id='main' var='top'>

Temukan kode yang kurang lebih tampak seperti ini:

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>

Ganti dengan kode ini:

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <!-- b:include data='post' name='comment_picker'/ -->
  <b:include data='post' name='g-comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- b:include data='post' name='comment_picker'/ -->
  <b:include data='post' name='g-comments'/>
</b:if>

Atau jika tidak ada kode yang tampak seperti di atas, mungkin karena bentuknya masih seperti ini:

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
</b:if>

Ganti dengan kode ini, jika yang ditemukan adalah kode dengan pola yang ke dua:

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <!-- b:include data='post' name='comments'/ -->
  <b:include data='post' name='g-comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- b:include data='post' name='comments'/ -->
  <b:include data='post' name='g-comments'/>
</b:if>

Klik Simpan Template. Seharusnya sekarang komentar Google+ sudah tampil di bawah posting.

Langkah Terakhir

Langkah terakhir adalah menghilangkan tanda centang pada pilihan “Gunakan Google+ Komentar di blog ini” di tab Google+. Mengapa? Karena fitur komentar Google+ yang kita buat sekarang sudah ditampilkan dengan cara manual. Dengan cara menampilkan komentar Google+ secara manual, maka ini memungkinkan kita untuk melakukan modifikasi area komentar dengan lebih leluasa karena markup HTML yang dibuat telah disisipkan secara manual juga. Sehingga —sebenarnya— kita bisa menampilkan komentar Google+ ini di area manapun yang kita suka, yaitu berdasarkan letak elemen #g-comments-outer.

Suatu saat mungkin Anda ingin membuat tampilan komentar ini menjadi berbentuk seperti jendela munculan.

Tapi jujur saja, secara pribadi Saya tidak begitu tertarik untuk mengaktifkan fitur ini, sama halnya dengan ketidaktertarikan Saya untuk menyisipkan komentar Facebook di dalam blog Blogger. Jika Saya bisa menggunakan fitur bawaan yang ada, mengapa Saya harus menggunakan pihak ke tiga? Tapi ini cuma pendapat. Jika Anda berminat untuk berpindah ke sistem komentar Google+, ikuti saja langkah-langkah di atas. Lagipula komentar yang masuk akan terintegrasi secara langsung dengan komentar Blogger, sehingga jika suatu saat Anda ingin kembali untuk menggunakan fitur komentar bawaan dari blog, maka komentar-komentar yang sebelumnya telah terbit ke Google+ akan tampil kembali di komentar Blogger.

Seharusnya sih begitu.

Read more »

Membuat Navigasi Halaman AJAX pada Blogger

Prinsipnya sederhana. Di sini Saya menggunakan navigasi Posting Lebih Lama sebagai navigasi AJAX dan menggunakan JQuery $.get() untuk memanggil URL pada navigasi tersebut:

// Menyingkirkan navigasi posting lebih baru (Navigasi ini tidak diperlukan)
$('#blog-pager').find('#blog-pager-newer-link').remove();

// Dasar AJAX navigasi
$('#blog-pager').on("click", "#blog-pager-older-link a", function() {
    $.get(this.href, {}, function(data) {
        // Proses...
    }, "html");
    return false;
});

Kita akan menggunakan elemen .blog-posts untuk memuat posting-posting baru dari halaman selanjutnya.

Menerapkan AJAX pada Navigasi Halaman

Pastikan JQuery sudah terpasang pada template. Masuk ke editor HTML template, kemudian salin kode ini dan letakkan di atas </body>:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
(function($) {
    var $pager = $('#blog-pager'),
        $posts = $('.blog-posts');
    $pager.find('#blog-pager-newer-link').remove(); // Menyingkirkan navigasi posting lebih baru
    $pager.on("click", "#blog-pager-older-link a", function() {
        $.get(this.href, {}, function(data) {
            var source = $(data).find('.post').length ? $(data) : $('<div></div>');
            $posts.append(source.find('.blog-posts').html()); // Menyisipkan posting
            $pager.html(source.find('#blog-pager-older-link').clone()); // Memperbaharui navigasi
        }, "html");
        $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat saat sedang memuat
        return false;
    });
})(jQuery);
//]]>
</script>
</b:if>
</b:if>

Klik Simpan Template.

Sekarang coba buka halaman blog Anda kemudian klik navigasi Posting Lama atau Older Post. Jika navigasi tersebut berubah menjadi teks bertuliskan “memuat...” seperti ini, maka itu artinya AJAX sedang bekerja:

Indikator sedang memuat

Tunggu sampai posting-posting baru muncul di bawah posting-posting yang sedang terlihat saat ini.

Infinite Scroll (?)

Untuk menciptakan infinite scroll pada sistem navigasi halaman, cukup nyatakan event .scroll() pada $(window) dan cek apakah jarak gulungan layar telah mencapai batas akhir atau belum. Jika ya, picu event .click() pada navigasi AJAX yang telah kita buat sebelumnya.

Dalam kasus ini, Saya menentukan batas akhir gulungan layar bukan berdasarkan tinggi halaman, melainkan berdasarkan posisi navigasi terhadap bagian teratas dari layar:

(function($) {

    var $pager = $('#blog-pager'),
        $posts = $('.blog-posts'),
        loading = false;

    // AJAX
    $pager.find('#blog-pager-newer-link').remove(); // Menyingkirkan navigasi posting lebih baru
    $pager.on("click", "#blog-pager-older-link a", function() {
        $.get(this.href, {}, function(data) {
            var source = $(data).find('.post').length ? $(data) : $('<div></div>');
            $posts.append(source.find('.blog-posts').html());
            $pager.html(source.find('#blog-pager-older-link').clone());
            loading = false;
        }, "html");
        $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat saat sedang memuat
        return false;
    });

    // INFINITE SCROLL
    $(window).on("scroll resize", function() {
        // Jika AJAX sedang tidak memuat dan jika jarak gulungan layar + tinggi layar telah mencapai
        // tinggi yang sama dengan/lebih besar dari offset navigasi halaman terhadap bagian teratas dari layar...
        if (!loading && ($(this).scrollTop() + $(this).height()) >= $pager.offset().top) {
            $pager.find('#blog-pager-older-link a').trigger("click"); // Picu event `.click()` pada navigasi AJAX posting
            loading = true; // Mulai antre pemuatan
        }
    });

})(jQuery);

Catatan: JavaScript Auto Read-More akan tereksekusi saat halaman dimuat dengan cara biasa, sehingga jangan kaget jika posting-posting baru yang dimuat oleh AJAX tidak akan terpotong menjadi ringkasan posting. Saya sarankan Anda untuk menggunakan konsep ringkasan posting tanpa JavaScript yang pernah Saya tuliskan sebelumnya di sini.

Read more »

JavaScript untuk Mendeteksi Font yang Terinstal di Komputer

JavaScript ini digunakan untuk memberitahu para pengguna bahwa font dengan nama tertentu tidak terpasang/terinstal di komputer:

/**
 * JavaScript code to detect available availability of a
 * particular font in a browser using JavaScript and CSS.
 *
 * Author : Lalit Patel
 * Website: http://www.lalit.org/lab/javascript-css-font-detect/
 * License: Apache Software License 2.0
 *          http://www.apache.org/licenses/LICENSE-2.0
 * Version: 0.15 (21 Sep 2009)
 *          Changed comparision font to default from sans-default-default,
 *          as in FF3.0 font of child element didn't fallback
 *          to parent element if the font is missing.
 * Version: 0.2 (04 Mar 2012)
 *          Comparing font against all the 3 generic font families ie,
 *          'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
 *          then that font is 100% not available in the system
 * Version: 0.3 (24 Mar 2012)
 *          Replaced sans with serif in the list of baseFonts
 */

/**
 * Usage: d = new Detector();
 *        d.detect('font name');
 */
var Detector = function() {
    // a font will be compared against all the three default fonts.
    // and if it doesn't match all 3 then that font is not available.
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    //we use m or w because these two characters take up the maximum width.
    // And we use a LLi so that the same matching fonts can get separated
    var testString = "mmmmmmmmmmlli";

    //we test using 72px font size, we may use any size. I guess larger the better.
    var testSize = '72px';

    var h = document.getElementsByTagName("body")[0];

    // create a SPAN in the document to get the width of the text we use to test
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        //get the default width for the three base fonts
        s.style.fontFamily = baseFonts[index];
        h.appendChild(s);
        defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
        defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
        h.removeChild(s);
    }

    function detect(font) {
        var detected = false;
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
            h.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            h.removeChild(s);
            detected = detected || matched;
        }
        return detected;
    }

    this.detect = detect;
};

Penggunaan

Kode eksekusi harus dinyatakan dalam keadaan DOM Content Loaded, atau letakkan saja di area <body>:

var d = new Detector();
// Jika font dengan nama `Lucida Grande` tidak ada di komputer, tampilkan pesan peringatan
if (!d.detect('Lucida Grande')) {
    alert('Lucida Grande is not installed!');
}

Sumber: JavaScript/CSS Font Detector

Read more »

Menggunakan @font-face

Yang dilakukan @font-face kepada file font pada dasarnya hanyalah memanggil file tersebut ke halaman web untuk diberi nama sesuai dengan nama yang ditentukan oleh pengguna agar bisa digunakan di dalam CSS font sebagai font-family:

@font-face {
  font-family:'Nama Font';
  src:url('files/my-font.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

Fungsi masing-masing kode di atas adalah:

1. font-family berfungsi untuk menentukan nama font yang datang dari my-font.woff
2. src digunakan untuk menyatakan di mana font tersebut disimpan
3. format digunakan untuk menentukan format font
4. font-style dan font-weight tidak wajib. Bisa dibuang jika memang tidak diperlukan. Dan akan menjadi wajib untuk alasan yang akan Saya jelaskan nanti.

@font-face lebih baik dinyatakan di bagian paling awal CSS untuk memastikan agar file font bisa diunduh sesegera mungkin. Setelah itu, nama font bisa dinyatakan ke elemen mana saja yang Anda inginkan dengan nama font yang telah dinyatakan pada font-family:

@font-face {
  font-family:'Nama Font';
  src:url('files/my-font.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

body {font-family:"Nama Font"}

Jangan lupa berikan beberapa font fallback dengan nama-nama font yang sudah biasa ada pada komputer Anda untuk berjaga-jaga agar jika font eksternal tersebut gagal dimuat atau terlalu lama dimuat atau belum berhasil dimuat, maka tampilannya tidak akan hanya jatuh ke font Serif. Pastikan tampilan font lokal tersebut mirip dengan font eksternal yang ingin ditampilkan. Inilah fungsi utama dari CSS Font Stack:

body {font-family:"Nama Font","Arial Narrow",Arial,Sans-Serif}

font-style dan font-weight

Bagi para pengguna yang baru pertama kali menggunakan @font-face mungkin akan merasa baik-baik saja dengan tampilan seperti ini. Namun tidak untuk para tipografer dan juga orang-orang yang sudah terbiasa melihat berbagai jenis font:

Font italic tampak terlalu miring.

Font dengan model italic akan tampak terlalu miring. Bahkan dalam beberapa peramban, font dengan gaya bold juga akan tampak terlalu tebal. Ini adalah contoh font Ubuntu Regular yang Saya lihat melalui peramban Safari di Windows:

Ubuntu, Safari Windows.

Menurut Saya tampilan masing-masing gaya font di atas kurang stabil dan tidak menarik. Itu disebabkan karena kita hanya memuat satu model font saja yaitu font regular. Ketika kita hanya memuat satu model font saja, maka model font yang lain seperti bold, italic dan bold-italic akan disesuaikan oleh peramban. Dan hasilnya tentu saja tidak akan sebagus model font asli dari keluarga tersebut. Para pembuat font yang baik setidaknya akan membuat minimal empat model font yaitu regular, italic, bold dan bold-italic. Itulah sebabnya mengapa kita harus menggunakan keempat-empatnya:

Gaya font Ubuntu.

Satu Nama Font dengan Empat Gaya

Memanggil file font dengan jumlah gaya minimal empat buah tentu saja memiliki cara tersendiri. Setiap @font-face harus tetap diberi satu nama font yang sama namun harus tetap bisa menampilkan masing-masing font eksternal dengan benar berdasarkan gayanya. Dan sekarang adalah saatnya kita menggunakan font-style dan font-weight dalam @font-face untuk menangani setiap gaya font.

Pertama-tama, yang terpenting adalah pastikan setiap font disimpan dengan nama yang mudah dan jelas berdasarkan gayanya:

Contoh pemberian nama file pada setiap font berdasarkan gayanya.

Setelah semua file diberi nama dengan baik, maka tugas selanjutnya adalah memanggil font, kemudian memberi masing-masing @font-face dengan font-family yang sama. Perbedaan setiap gaya hanya ditentukan oleh font-style dan font-weight:

/* Regular */
@font-face {
  font-family:'Ubuntu';
  src:url('ubuntu-regular.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

/* Italic */
@font-face {
  font-family:'Ubuntu';
  src:url('ubuntu-italic.woff') format('woff');
  font-style:italic;
  font-weight:normal;
}

/* Bold */
@font-face {
  font-family:'Ubuntu';
  src:url('ubuntu-bold.woff') format('woff');
  font-style:normal;
  font-weight:bold;
}

/* Bold Italic */
@font-face {
  font-family:'Ubuntu';
  src:url('ubuntu-bolditalic.woff') format('woff');
  font-style:italic;
  font-weight:bold;
}

Dan ini adalah tampilan font setelah keempat gaya dimuat:

Tampilan masing-masing gaya font sudah tampak ideal sekarang.

Pengguna Google Fonts

Jika Anda adalah pengguna layanan Google Fonts, pada halaman Quick Use sudah terlihat dengan jelas beberapa pilihan gaya font. Ambil minimal empat gaya seperti ini untuk memastikan agar tampilan teks terlihat ideal satu sama lain:

Pilih gaya normal/regular, italic, bold dan bold-italic (jika ada).

Gunakan @font-face Seperlunya

Font ideal paling minimal setidaknya hanya terdiri dari dua buah tipe font dengan satu gaya pada font pertama untuk tampilan judul dan empat gaya pada font ke dua untuk tampilan teks utama (5 @font-face).

Sintaks Aman @font-face

Fontspring menyarankan kita untuk memuat beberapa font dengan tipe file tertentu secara bersamaan untuk memastikan agar @font-face bisa bekerja pada hampir semua peramban dan perangkat:

@font-face {
  font-family:'MyWebFont';
  src:url('files/my-font.eot'); /* IE9 Compat Modes */
  src:url('files/my-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('files/my-font.woff') format('woff'), /* Modern Browsers */
      url('files/my-font.ttf') format('truetype'), /* Safari, Android, iOS */
      url('files/my-font.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-style:normal;
  font-weight:normal;
}

Meski hasilnya akan lebih stabil, namun tentu saja itu akan membuat file yang dipanggil menjadi bertambah banyak. Jika target pembaca Anda hanya sebatas pada pemakai desktop, maka file font dengan format WOFF saja sudah cukup dan bisa lolos pada semua peramban modern.

Catatan Tambahan

Saat praktek, biasanya Anda akan menemui beberapa masalah seperti ini:

1. CSS @font-face Not Working with Firefox
2. CSS @font-face, Fungsi src:local('#')

Lisensi Font

Font merupakan karya seni dan itu bisa saja masuk ke dalam kategori komersial (seperti halnya komik), atau terlarang untuk ditampilkan ke dalam media berupa web, sehingga kita harus tetap berhati-hati dalam menampilkan font eksternal ke dalam halaman web. Untuk sumber font berlisensi gratis yang bisa digunakan dengan aman baik secara pribadi maupun komersial bisa dengan mudah Anda dapatkan di Google Fonts dan FontSquirrel. Beberapa ada juga yang dibuat di Deviant Art. Mungkin itu font buatan para hobiis.

Read more »