Posting ini mungkin hanya berupa dokumentasi mengenai pemberian markup pada dokumen HTML, termasuk posting blog. Fungsinya ± agar dokumen tampak lebih semantik & aksesibel. Mungkin kita jarang memikirkan — bahkan menggunakan — beberapa tag serta simbol HTML berikut dalam posting. Padahal ini merupakan salah satu poin penting untuk meningkatkan keterbacaan dokumen yang kita ciptakan.
Kita tinggal menyisipkan teks dalam “dot, dot, dot” (…) dalam tag HTML pada tabel di atas. Sedangkan pada figure dapat dimasukkan gambar, audio, video, blok kutipan, dan sebagainya sebagai fungsi lampiran dari suatu dokumen HTML (sebelum figcaption atau deskripsi lampiran).
Kemudian tabel berikut merupakan beberapa pengkodean tanda baca yang sering digunakan dengan menekan tombol tertentu pada papan ketik. Tetapi hal tersebut mungkin bukan aktivitas yang tepat untuk memaknai dokumen HTML, terutama dalam posting blog.
Simbol beberapa tanda baca
Deskripsi
Tanda
Simbol HTML
Numerik
Ampersand
&
&
&
Spasi
 
Lebih kurang
±
±
±
Pecahan ¼
¼
¼
¼
Pecahan ½
½
½
½
Pecahan ¾
¾
¾
¾
Perkalian
×
×
×
Pembagian
÷
÷
÷
Tanda pisah En
–
–
–
Tanda pisah Em
—
—
—
Tanda petik pembuka tunggal
‘
‘
‘
Tanda petik penutup tunggal
’
’
’
Tanda petik pembuka ganda
“
“
“
Tanda petik penutup ganda
”
”
”
Ellipsis
…
…
…
Menit
′
′
′
Detik
″
″
″
Beberapa uraian penjelas tentang penggunaan simbol beberapa tanda baca adalah sebagai berikut:
Perkalian × akan lebih baik daripada menekan tombol X pada papan ketik.
Pembagian ÷ akan lebih baik daripada menekan tombol / pada papan ketik.
Tanda petik, menit, atau detik ‘, ’, “, ”, ′, dan ″ akan lebih baik daripada menekan tombol ' dan " pada papan ketik.
Tanda pisah – dan — akan lebih baik daripada menekan tombol - pada papan ketik.
Penggunaan – yang berarti “sampai dengan”, contoh: 2012 – 2013
Penggunaan — untuk menjelaskan suatu kata atau frase kata di luar bangun kalimat, contoh: Saya pekerja swasta — desain situs web — di salah satu anak perusahaan MiMNeT
—ς∞ς—
Sulit? Tidak ada yang sulit jika kita ingin belajar memulainya. Dulu saya juga tidak memahami pengkodean & kurang begitu tertarik dengan hal tersebut. Namun seiring perkembangan serta pengalaman dalam blogging, ternyata semantik adalah sesuatu hal yang menarik, sehingga menjadi sebuah keharusan ketika ingin membuat dokumen HTML atau XHTML.
Posting ini mungkin hanya berupa dokumentasi mengenai pemberian markup pada dokumen HTML, termasuk posting blog. Fungsinya ± agar dokumen tampak lebih semantik & aksesibel. Mungkin kita jarang memikirkan — bahkan menggunakan — beberapa tag serta simbol HTML berikut dalam posting. Padahal ini merupakan salah satu poin penting untuk meningkatkan keterbacaan dokumen yang kita ciptakan.
Kita tinggal menyisipkan teks dalam “dot, dot, dot” (…) dalam tag HTML pada tabel di atas. Sedangkan pada figure dapat dimasukkan gambar, audio, video, blok kutipan, dan sebagainya sebagai fungsi lampiran dari suatu dokumen HTML (sebelum figcaption atau deskripsi lampiran).
Kemudian tabel berikut merupakan beberapa pengkodean tanda baca yang sering digunakan dengan menekan tombol tertentu pada papan ketik. Tetapi hal tersebut mungkin bukan aktivitas yang tepat untuk memaknai dokumen HTML, terutama dalam posting blog.
Simbol beberapa tanda baca
Deskripsi
Tanda
Simbol HTML
Numerik
Ampersand
&
&
&
Spasi
 
Lebih kurang
±
±
±
Pecahan ¼
¼
¼
¼
Pecahan ½
½
½
½
Pecahan ¾
¾
¾
¾
Perkalian
×
×
×
Pembagian
÷
÷
÷
Tanda pisah En
–
–
–
Tanda pisah Em
—
—
—
Tanda petik pembuka tunggal
‘
‘
‘
Tanda petik penutup tunggal
’
’
’
Tanda petik pembuka ganda
“
“
“
Tanda petik penutup ganda
”
”
”
Ellipsis
…
…
…
Menit
′
′
′
Detik
″
″
″
Beberapa uraian penjelas tentang penggunaan simbol beberapa tanda baca adalah sebagai berikut:
Perkalian × akan lebih baik daripada menekan tombol X pada papan ketik.
Pembagian ÷ akan lebih baik daripada menekan tombol / pada papan ketik.
Tanda petik, menit, atau detik ‘, ’, “, ”, ′, dan ″ akan lebih baik daripada menekan tombol ' dan " pada papan ketik.
Tanda pisah – dan — akan lebih baik daripada menekan tombol - pada papan ketik.
Penggunaan – yang berarti “sampai dengan”, contoh: 2012 – 2013
Penggunaan — untuk menjelaskan suatu kata atau frase kata di luar bangun kalimat, contoh: Saya pekerja swasta — desain situs web — di salah satu anak perusahaan MiMNeT
—ς∞ς—
Sulit? Tidak ada yang sulit jika kita ingin belajar memulainya. Dulu saya juga tidak memahami pengkodean & kurang begitu tertarik dengan hal tersebut. Namun seiring perkembangan serta pengalaman dalam blogging, ternyata semantik adalah sesuatu hal yang menarik, sehingga menjadi sebuah keharusan ketika ingin membuat dokumen HTML atau XHTML.
Biasanya Anda membuat posting dengan cara yang bagaimana? HTML atau Compose. Apabila Compose, maka akan sulit untuk membuat susunan teks dalam postingan menjadi semantik. Pada Blogger™ ketika kita telah menggunakan struktur teks blok paragraf <p> dalam posting dengan menggunakan HTML, namun akan hilang jika kita mengedit atau membuka kembali posting tersebut dengan menggunakan metode Compose. Sangat disarankan agar kita selalu melakukan edit posting dengan menggunakan metode HTML.
<p>Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>
Sekarang salin & tempel penggalan teks “lorem ipsum” di atas pada editor posting (entri/post baru) dengan menggunakan HTML. Jika dilakukan pratinjau, maka ia akan membentuk dua blok paragraf, tentu saja tanpa menggunakan tombol papan ketik Enter. Dimana contoh pengkodean blok paragraf pada CSS template adalah sebagai berikut:
p { font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; }
Sebagai bahan uji coba — dengan catatan tag p telah dimasukkan dalam pengkodean template, seperti pada contoh di atas — tambahkan baris kode CSS pada akhir postingan.
Pengkodean di atas akan membuat huruf awal di setiap blok paragraf menjadi lebih besar (drop caps). Apabila hanya ingin diterapkan pada paragraf tertentu, sebaiknya menggunakan class yang ditargetkan dalam paragraf tersebut.
<p class="first-letter">Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>
Sebaiknya setelah merasa pengkodean sudah tepat, kita dapat menambahkannya pada CSS template. Jangan lupa, tanpa memakai markah <style type="text/css"> dan </style>.
Demonstrasi penggunaan markah di atas dapat dilihat dalam paragraf ini, dimana huruf awal akan menjadi drop caps. Selanjutnya kita pun dapat membuat baris pertama dalam paragraf menjorok ke dalam atau biasanya pada waktu mengetik di aplikasi “word”, tidak jarang kita menggunakan tombol papan ketik Tab.
p:first-line { text-indent: 2.25em; }
Paragraf ini akan menjadi demonstrasi dari pengkodean di atas. Seperti biasa, tentu kita tidak terpaku pada penerapan markah yang telah disebutkan dalam paragraf-paragraf sebelumnya. Kita dapat menambah, mengurangi, bahkan memodifikasi sehingga tampilan blok paragraf akan sesuai dengan keinginan kita masong-masing. Anda tentu ingat fungsi “Inspect Elements”, silakan periksa halaman posting ini & struktur pengkodean didalamnya. :)
Biasanya Anda membuat posting dengan cara yang bagaimana? HTML atau Compose. Apabila Compose, maka akan sulit untuk membuat susunan teks dalam postingan menjadi semantik. Pada Blogger™ ketika kita telah menggunakan struktur teks blok paragraf <p> dalam posting dengan menggunakan HTML, namun akan hilang jika kita mengedit atau membuka kembali posting tersebut dengan menggunakan metode Compose. Sangat disarankan agar kita selalu melakukan edit posting dengan menggunakan metode HTML.
<p>Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>
Sekarang salin & tempel penggalan teks “lorem ipsum” di atas pada editor posting (entri/post baru) dengan menggunakan HTML. Jika dilakukan pratinjau, maka ia akan membentuk dua blok paragraf, tentu saja tanpa menggunakan tombol papan ketik Enter. Dimana contoh pengkodean blok paragraf pada CSS template adalah sebagai berikut:
p { font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; }
Sebagai bahan uji coba — dengan catatan tag p telah dimasukkan dalam pengkodean template, seperti pada contoh di atas — tambahkan baris kode CSS pada akhir postingan.
Pengkodean di atas akan membuat huruf awal di setiap blok paragraf menjadi lebih besar (drop caps). Apabila hanya ingin diterapkan pada paragraf tertentu, sebaiknya menggunakan class yang ditargetkan dalam paragraf tersebut.
<p class="first-letter">Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>
Sebaiknya setelah merasa pengkodean sudah tepat, kita dapat menambahkannya pada CSS template. Jangan lupa, tanpa memakai markah <style type="text/css"> dan </style>.
Demonstrasi penggunaan markah di atas dapat dilihat dalam paragraf ini, dimana huruf awal akan menjadi drop caps. Selanjutnya kita pun dapat membuat baris pertama dalam paragraf menjorok ke dalam atau biasanya pada waktu mengetik di aplikasi “word”, tidak jarang kita menggunakan tombol papan ketik Tab.
p:first-line { text-indent: 2.25em; }
Paragraf ini akan menjadi demonstrasi dari pengkodean di atas. Seperti biasa, tentu kita tidak terpaku pada penerapan markah yang telah disebutkan dalam paragraf-paragraf sebelumnya. Kita dapat menambah, mengurangi, bahkan memodifikasi sehingga tampilan blok paragraf akan sesuai dengan keinginan kita masong-masing. Anda tentu ingat fungsi “Inspect Elements”, silakan periksa halaman posting ini & struktur pengkodean didalamnya. :)
Tidak jarang waktu dapat merubah pengalaman pengguna dalam melakukan eksplorasi terhadap eksistensi berbagai aktivitasnya, terutama berhubungan dengan blogging. Sadar atau tidak sadar pemahaman kita akan terus bertambah, oleh karena sebuah sangkar emas tidak akan mampu memenjarakan lautan rasa yang merindukan arti kebebasan. Ekspresi, semantik, emosi, dan aksesibilitas adalah berlian pengalaman yang tanpa sengaja tertuang dalam bentuk sebuah karya. Unique blogging.
Betul sekali. Pengkodean posting ini menggunakan grid dengan kustomisasi manual & masih dengan menggunakan template yang sama. Dua cara yang mudah untuk konfigurasi pengkodean unik ini. Pertama, dengan memasukkan markup CSS <style type="text/css"> … </style> pada akhir postingan. Kedua, meletakkan CSS kondisional pada struktur pengkodean template dengan kriteria:
<b:if cond='data:blog.url == " …URL… "'> <style> … /* kumpulan kode CSS */ </style> </b:if>
Sederhananya letakkan saja sesudah ]]></b:skin>.
Sedangkan pada posting ini, saya lebih suka menggunakan cara yang kedua, namun terlebih dulu mengkustomisasinya memanfaatkan cara yang pertama sampai posting diterbitkan, sehingga diperoleh alamat permalink.
Metode editor posting harus dengan menggunakan HTML & bukan “Compose” [WYSIWYG (What You See Is What You Get)].
Hasilnya, dokumen akan terlihat lebih semantik, karena penggunaan tanda-tanda yang sesuai dengan markup yang disematkan, seperti blok paragraf, daftar urut, heading, blockquote, kode dan blok kode, serta yang pasti kita akan jarang menemui tag break (<br>). Tidak kalah penting irama vertikal (vertical rhythm) akan tetap terjaga dengan baik hingga dokumen ini selesai dibuat.
Ekspresi
Kode bukanlah sesuatu yang sulit untuk diterapkan, namun ia meliputi segala struktur yang mampu menciptakan harmoni dalam suatu konten. Dan tidaklah berlebihan ketika tanpa sengaja indera penglihat menyimak sebuah kalimat, kode adalah puisi (code is poetry).
Semantik
Tanda mampu memberikan makna tersendiri, sehingga pengguna dapat memahami apa yang terkandung di dalam sebuah dokumen tanpa harus menafsirkannya dengan berbagai sudut pandang yang berbeda. Ini adalah paragraf, ini adalah tanda baca, dan sebagainya — optimalisasi konten.
Emosi
Nafsu tidak hanya terbatas pada amarah, tidak jarang juga behubungan dengan pengendalian. Membuat posting tanpa makna berarti kita mengecilkan arti eksistensi dari sebuah informasi, dimana ia patut dinikmati, dihargai, menyegarkan, dan mempunyai kualitas hak cipta.
Aksesibilitas
Indahnya sebuah informasi adalah ketika dia menciptakan kondisi yang mudah bagi navigasi pengguna (pengunjung), baik diakses melalui berbagai alat, jenis peramban, keterbacaan, dan sebagainya. Suasana seperti itu tidak akan ada, terkecuali Anda (pengelola blog) mengkondisikan agar informasi tersebut memang memberi kemudahan bagi pengguna.
Tidak jarang waktu dapat merubah pengalaman pengguna dalam melakukan eksplorasi terhadap eksistensi berbagai aktivitasnya, terutama berhubungan dengan blogging. Sadar atau tidak sadar pemahaman kita akan terus bertambah, oleh karena sebuah sangkar emas tidak akan mampu memenjarakan lautan rasa yang merindukan arti kebebasan. Ekspresi, semantik, emosi, dan aksesibilitas adalah berlian pengalaman yang tanpa sengaja tertuang dalam bentuk sebuah karya. Unique blogging.
Betul sekali. Pengkodean posting ini menggunakan grid dengan kustomisasi manual & masih dengan menggunakan template yang sama. Dua cara yang mudah untuk konfigurasi pengkodean unik ini. Pertama, dengan memasukkan markup CSS <style type="text/css"> … </style> pada akhir postingan. Kedua, meletakkan CSS kondisional pada struktur pengkodean template dengan kriteria:
<b:if cond='data:blog.url == " …URL… "'> <style> … /* kumpulan kode CSS */ </style> </b:if>
Sederhananya letakkan saja sesudah ]]></b:skin>.
Sedangkan pada posting ini, saya lebih suka menggunakan cara yang kedua, namun terlebih dulu mengkustomisasinya memanfaatkan cara yang pertama sampai posting diterbitkan, sehingga diperoleh alamat permalink.
Metode editor posting harus dengan menggunakan HTML & bukan “Compose” [WYSIWYG (What You See Is What You Get)].
Hasilnya, dokumen akan terlihat lebih semantik, karena penggunaan tanda-tanda yang sesuai dengan markup yang disematkan, seperti blok paragraf, daftar urut, heading, blockquote, kode dan blok kode, serta yang pasti kita akan jarang menemui tag break (<br>). Tidak kalah penting irama vertikal (vertical rhythm) akan tetap terjaga dengan baik hingga dokumen ini selesai dibuat.
Ekspresi
Kode bukanlah sesuatu yang sulit untuk diterapkan, namun ia meliputi segala struktur yang mampu menciptakan harmoni dalam suatu konten. Dan tidaklah berlebihan ketika tanpa sengaja indera penglihat menyimak sebuah kalimat, kode adalah puisi (code is poetry).
Semantik
Tanda mampu memberikan makna tersendiri, sehingga pengguna dapat memahami apa yang terkandung di dalam sebuah dokumen tanpa harus menafsirkannya dengan berbagai sudut pandang yang berbeda. Ini adalah paragraf, ini adalah tanda baca, dan sebagainya — optimalisasi konten.
Emosi
Nafsu tidak hanya terbatas pada amarah, tidak jarang juga behubungan dengan pengendalian. Membuat posting tanpa makna berarti kita mengecilkan arti eksistensi dari sebuah informasi, dimana ia patut dinikmati, dihargai, menyegarkan, dan mempunyai kualitas hak cipta.
Aksesibilitas
Indahnya sebuah informasi adalah ketika dia menciptakan kondisi yang mudah bagi navigasi pengguna (pengunjung), baik diakses melalui berbagai alat, jenis peramban, keterbacaan, dan sebagainya. Suasana seperti itu tidak akan ada, terkecuali Anda (pengelola blog) mengkondisikan agar informasi tersebut memang memberi kemudahan bagi pengguna.
Ketika membuka blog pada layar yang berbeda, mungkin kita akan menemukan satu hal yang unik. Tampilan blog tidak berubah seperti aslinya, terutama bagi blog yang struktur pengkodean menggunakan fixed layout. Tidak jarang kita menggeser ke kanan & ke kiri — lama-lama jari jadi lentik— untuk membaca artikel atau beberapa widget pada sidebar. Idealnya, tampilan yang baik adalah menggeser ke atas & ke bawah.
Sebuah hal yang menarik ketika Blogger™ menambahkan fitur ini dalam kapabilitas tampilan blog pada versi mobile. Namun yang menjadi kendala adalah ketika kita telah menerapkan beberapa conditional tags dalam sebuah pengkodean atau widget, maka hal itu akan menjadi kompleks. Meskipun dalam penerapan untuk versi mobile sudah dapat dikustomisasi menurut keinginan pengelola, seperti menambahkan mobile='yes', mobile='no', dan mobile='only' pada widget ataupun penggunaan conditional tags berikut.
<b:if cond='data:blog.isMobile'>
Sebagai alternatif kita dapat menerapkan desain yang responsif pada blog dengan menggunakan media queries. Bukankah antara perangkat komputer &mobile berbeda dari sisi kekuatan memuat suatu halaman situs web atau blog? Benar sekali, jika ditampilkan dalam default, besar kemungkinan waktu memuat pada mobile akan lebih singkat. Tetapi apabila kita melakukan kustomisasi — pada tampilan mobile — hingga hampir mirip dengan tampilan di perangkat komputer, tentu akan menambah beban juga bukan? Yah, terutama di Blogger™. Berikut contoh sederhana penerapan media queries dalam CSS template — Optimasi Blog menggunakan cara ini.
@media screen and (max-width:800px) { … CSS untuk media screen dengan lebar maksimal 800px … <!-- contoh CSS: body { font-size: .875em; line-height: 1.7143em; } --> }
@media screen and (max-width:600px) { … CSS untuk media screen dengan lebar maksimal 600px … }
Atau dengan menggunakan penggabungan media queries (min & max)
@media screen and (min-width:600px) and (max-width:800px) { … CSS untuk media screen dengan lebar minimal 600px dan maksimal 800px … }
Catatan: kode yang berwarna merah merupakan lebar layar, kita dapat menambah variabel lebar yang lain (1024px, 800px, 600px, 480px, 320px, dan sebagainya) di dalamnya. Dan masih banyak lagi metode media queries lain yang mungkin tidak hanya terbatas pada lebar layar, seperti lebar device (device-width). Kita dapat menelusurinya melalui media queries — W3C (World Wide Web Consortium).
Dengan menggunakan media queries, diharapkan tampilan blog akan sesuai dengan beberapa ukuran lebar layar yang berbeda. Tentunya harus disesuaikan pula dengan pengkodean template pada masing-masing blog. Kemudian akses URL yang dilakukan pengguna mungkin tidak akan bervariasi, seperti penambahan ?m=0 atau ?m=1 di belakang permalink. Hal inilah yang menjadi dasar mengapa saya mencoret “Lihat versi mobile” pada kaki blog ini, namun akan menjadi alternatif apabila akses sedang ‘lemot’ pada pengguna mobile.
Ketika membuka blog pada layar yang berbeda, mungkin kita akan menemukan satu hal yang unik. Tampilan blog tidak berubah seperti aslinya, terutama bagi blog yang struktur pengkodean menggunakan fixed layout. Tidak jarang kita menggeser ke kanan & ke kiri — lama-lama jari jadi lentik— untuk membaca artikel atau beberapa widget pada sidebar. Idealnya, tampilan yang baik adalah menggeser ke atas & ke bawah.
Sebuah hal yang menarik ketika Blogger™ menambahkan fitur ini dalam kapabilitas tampilan blog pada versi mobile. Namun yang menjadi kendala adalah ketika kita telah menerapkan beberapa conditional tags dalam sebuah pengkodean atau widget, maka hal itu akan menjadi kompleks. Meskipun dalam penerapan untuk versi mobile sudah dapat dikustomisasi menurut keinginan pengelola, seperti menambahkan mobile='yes', mobile='no', dan mobile='only' pada widget ataupun penggunaan conditional tags berikut.
<b:if cond='data:blog.isMobile'>
Sebagai alternatif kita dapat menerapkan desain yang responsif pada blog dengan menggunakan media queries. Bukankah antara perangkat komputer &mobile berbeda dari sisi kekuatan memuat suatu halaman situs web atau blog? Benar sekali, jika ditampilkan dalam default, besar kemungkinan waktu memuat pada mobile akan lebih singkat. Tetapi apabila kita melakukan kustomisasi — pada tampilan mobile — hingga hampir mirip dengan tampilan di perangkat komputer, tentu akan menambah beban juga bukan? Yah, terutama di Blogger™. Berikut contoh sederhana penerapan media queries dalam CSS template — Optimasi Blog menggunakan cara ini.
@media screen and (max-width:800px) { … CSS untuk media screen dengan lebar maksimal 800px … <!-- contoh CSS: body { font-size: .875em; line-height: 1.7143em; } --> }
@media screen and (max-width:600px) { … CSS untuk media screen dengan lebar maksimal 600px … }
Atau dengan menggunakan penggabungan media queries (min & max)
@media screen and (min-width:600px) and (max-width:800px) { … CSS untuk media screen dengan lebar minimal 600px dan maksimal 800px … }
Catatan: kode yang berwarna merah merupakan lebar layar, kita dapat menambah variabel lebar yang lain (1024px, 800px, 600px, 480px, 320px, dan sebagainya) di dalamnya. Dan masih banyak lagi metode media queries lain yang mungkin tidak hanya terbatas pada lebar layar, seperti lebar device (device-width). Kita dapat menelusurinya melalui media queries — W3C (World Wide Web Consortium).
Dengan menggunakan media queries, diharapkan tampilan blog akan sesuai dengan beberapa ukuran lebar layar yang berbeda. Tentunya harus disesuaikan pula dengan pengkodean template pada masing-masing blog. Kemudian akses URL yang dilakukan pengguna mungkin tidak akan bervariasi, seperti penambahan ?m=0 atau ?m=1 di belakang permalink. Hal inilah yang menjadi dasar mengapa saya mencoret “Lihat versi mobile” pada kaki blog ini, namun akan menjadi alternatif apabila akses sedang ‘lemot’ pada pengguna mobile.
Sekedar kilas balik bahwa postingan ini tetap mengacu pada panduan umum Search Engine Optimization (SEO)& merupakan kelanjutan dari beberapa posting sebelumnya tentang judul dan deskripsi blog serta memperbaiki struktur blog. Hal ini kami lakukan agar informasi yang pengguna dapatkan tidak sepotong-sepotong, melainkan satu kesatuan posting yang tidak terpisahkan satu dengan lain.
Konten secara umum merupakan informasi yang tersedia melalui media dalam berbagai format. Apabila kita kaitkan dengan sebuah blog, maka ia meliputi semua isi yang terkandung dalam struktur markah pada suatu blog, baik dari kepala hingga kaki. Sedangkan penyempitan makna konten itu sendiri lebih tertuju pada aktivitas blogging, yakni posting. Hal itu tidaklah menjadi keliru sebab posting merupakan bagian dari isi konten utama dalam sebuah blog. Namun pada uraian ini, kita akan membicarakan konten dalam pengertian yang menyeluruh & tidak terbatas pada posting saja. Bagaimana konten yang dapat dikategorikan berteman dengan SEO (Search Engine Optimization)? Penting ditekankan bahwa konten Anda untuk pengguna, sedangkan faktor lain merupakan dampak yang dihasilkan.
Kualitas & Layanan Konten
Apa yang terpikirkan dari sub judul di atas? Ketika sebuah blog memiliki karakter unik, kesamaan topik dari awal sampai akhir maka ia akan mendapat pengakuan dari pembacanya. Selanjutnya tidak jarang akan menjadikan rekomendasi, apalagi jika posting yang diterbitkan merupakan sebuah informasi segar & menarik. Ilustrarsi singkat, pengguna ingin membaca tentang tips blogging. Ketika ia menemukan sebuah blog yang menyajikan informasi tersebut, ia akan mulai memindai apa saja isi yang terkandung di dalamnya, mungkin judul posting lain yang terdapat dalam widget, tata bahasa, markah, dan sebagainya. Disaat mata & pikiran pengguna telah menerima bentuk tampilan pada layar peramban, pada saat itu pula mereka mulai membacanya. Apabila antar posting memiliki keterkaitan dengan topik yang dibacanya, bukan mustahil pengguna akan ‘mengacak-acak’ seluruh konten serta akan menanti pembaharuan di blog tersebut. Dan ini boleh kita namakan sebagai kata kunci tertarget.
Kemudian perhatikan pula tata bahasa yang digunakan, oleh karena tidak semua pengguna berasal dari daerah atau negara kita, kecuali jika memang blog ditarget untuk pembaca tertentu. Dan bukan itu saja, pemahaman antar pengguna satu dengan lain mungkin akan berbeda pula. Coba teliti tentang pemahaman “markah” & “kode”. Satu pengguna mungkin akan mengetikkan “markah HTML”, sedangkan pengguna lain mengetik “kode HTML”. Meskipun informasi yang dimaksudkan sama, tetapi hasil yang didapatkan akan berbeda dalam mesin penelusur. Akan lebih baik jika kita memadukan frase tersebut, sehingga mengantisipasi perbedaan pemahaman pengguna. Hal ini integral dengan pemanfaatan ungkapan bahasa yang baik & benar dalam isi konten. Siapa yang menduga — walaupun ditarget untuk pembaca tertentu — pengguna lain dari berbagai daerah atau negara akan mengunjungi blog kita, sehingga merupakan upaya logis untuk mendukung sebuah konten agar dapat diterjemahkan dengan benar (hampir benar). Intinya maksud yang disampaikan oleh author serupa/sama dengan penerimaan yang didapat oleh pengguna.
Konten yang original, segar, & menarik tanpa memperhatikan tanda-tanda di dalamnya mungkin akan menimbulkan kesalah-pahaman bagi pembacanya. Untuk mengurangi hal itu kita dapat belajar menerapkan kode & markah yang semantik. Saya tidak menjelaskan detail tentang semantik, namun jika ingin mempelajari lebih lanjut, Anda dapat membaca pada tautan berikut:
Bagaimana menerapkan semantik dalam konten blog? Mungkin kita telah mengenal CSS dan struktur HTML, tetapi dalam posting jarang kita perhatikan. Sedikit tips untuk penerapan semantik dalam posting, saya biasa merangkum beberapa markah umum sebelum menulis dan menggunakan metode post editor “HTML” (bukan “Compose”).
Teks jangkar tidak selalu berhubungan dengan kata kunci (keywords), ia merupakan sekumpulan teks atau kata yang mendeskripsikan sesuatu sehingga menjadi jelas seperti URL (Uniform Resource Locator), singkatan, gambar (detail pada sub judul “Optimalisasi Penggunaan Gambar”), dan sebagainya.
Demi sebuah kata kunci, saya rasa tidak perlu selalu ditunjukkan dengan memperinci kata kunci dalam berbagai gaya (style) seperti teks tebal, miring, pewarnaan dan lain-lain. Bahkan tidak jarang ditemui sejumlah kata kunci yang dicoret atau menggunakan garis bawah. Apa tujuannya? Agar perayap akan tersendat ketika melakukan pengindeksan pada kata kunci tersebut. Lalu bagaimana dari sisi pengguna? Apakah akan terasa nyaman membaca jika sebuah konten terlalu banyak kata kunci yang dihiasi dengan berbagai gaya atau bahkan tidak jarang menimbulkan kesalah-pahaman? Telah dijelaskan pada sub judul sebelumnya bahwa berusaha membuat sebuah konten untuk semantik akan mengantisipasi kesalah-pahaman, begitu pula dengan memberikan tanda-tanda tertentu pada suatu teks (tanda baca). Isi konten yang baik adalah yang mudah dimengerti & dipahami oleh pengguna, bukan sebaliknya. Apabila tidak, maka resiko pentalan akan semakin tinggi.
Teks jangkar pada tautan pun semestinya mendeskripsikan apa yang ia tautkan, sehingga tautan yang kita masukkan benar-benar berkualitas. Hindari penulisan teks jangkar pada tautan secara generik yang mengandung arti kurang jelas seperti halaman ini, artikel ini, klik di sini, dan sejenisnya. Dari sisi pengguna, tautan seharusnya mudah dibedakan dengan teks biasa, kerena nilai dari sebuah konten akan memudar jika pengguna tidak dapat membedakan itu atau pengelola mengkondisikan agar tautan tidak sengaja diklik oleh pengguna. Bahkan mungkin tanpa disadari, kita telah menciptakan tautan yang sebenarnya tidak perlu dimasukkan (dipaksa untuk bertaut) dalam sebuah konten.
Optimalisasi Penggunaan Gambar
Saya rasa untuk optimalisasi penggunaan gambar, para blogger pasti telah mengetahui pentingnya atribut alt. Atribut itu berfungsi sebagai ‘pembaca gambar’. Tinggal upaya kita untuk membuatnya lebih deskriptif & lebih bermakna bagi pembacanya. Jangan pula kita memasukkan deskripsi yang terlalu panjang atau hanya mengeksplorasi kata kunci dalam gambar. Gambar merupakan salah satu alat bantu untuk memberikan kemudahan bagi pengguna agar lebih memahami isi konten. Tetapi hal itu bukan berarti bahwa kita selalu menggunakan tautan gambar untuk navigasi di blog yang kita kelola.
Pergunakan Tag Heading dengan Tepat
Tag heading dimanfaatkan untuk menyajikan struktur pada halaman kepada pengguna, dimana ia tersusun mulai <h1> sampai dengan <h6>. Karena tag heading biasanya membuat teks yang terkandung di dalamnya lebih besar dari teks biasa pada suatu halaman, maka ini adalah isyarat visual kepada pengguna bahwa teks tersebut penting & bisa membantu mereka memahami sesuatu tentang jenis konten di bawah teks judul. Beberapa ukuran heading yang dapat digunakan dalam rangka menciptakan struktur hirarkis untuk konten blog, sehingga memudahkan pengguna untuk menavigasi isi dari konten tersebut.
Patut dijadikan catatan bahwa tidak semua teks dapat dikategorikan sebagai tag heading, adakalanya teks tebal atau miring lebih bermakna bagi teks tersebut. Kemudian jika sebuah teks kurang/tidak membantu dalam menentukan struktur halaman, sebaiknya tidak terlalu memaksakan memberi ‘label’ tag heading. Salah satu cara untuk menentukan sebuah struktur halaman dalam blog adalah menulis & berpikir secara outline. Yah, mungkin pengertian sederhananya adalah metode membuat kerangka karangan.
Judul sebuah posting seharusnya singkat dan deskriptif. Bukankah judul yang panjang lebih baik & menimbulkan daya tarik tersendiri? Mungkin dalam sedikit kasus, penekanan teks tertentu yang ditambahkan dapat berguna bagi pembaca. Tetapi jika judul posting yang singkat telah mampu mendeskripsikan isi yang terkandung dalam posting, mengapa kita berpikir untuk membuatnya menjadi panjang.
Simpulan
Berdasarkan dari uraian di atas maka dapat kita ambil generalisasi dengan detail sebagai berikut:
Konten seharusnya unik, nyaman dibaca, & mudah dipahami oleh pengguna untuk mengantisipasi atau mengurangi celah kesalah-pahaman.
Ketika kita telah memilih sebuah topik, tetapkan pengorganisasian isi konten agar selalu terkait dengan topik tersebut. Dan jangan lupa memprioritaskan untuk kemudahan pengguna, bukan untuk indeks mesin penelusur.
Teks jangkar yang singkat, tepat, dan deskriptif akan memberikan pengalaman yang positif bagi pengguna serta indeks yang baik bagi mesin penelusur untuk menyampaikan isi terkait. Begitu pula apabila kita dapat memberikan pembeda yang jelas antara teks biasa & tautan teks, sehingga hal-hal yang kurang/tidak diinginkan dapat diminimalisasi.
Lengkapi dengan atribut alt, apabila menggunakan media gambar sebagai tautan dan/atau isi konten dalam tubuh HTML (Hypertext Markup Language). Ini tidak termasuk gambar yang dikonfigurasi sebagai nilai dari suatu properti pada CSS (Cascading Style Sheets).
Pergunakan tag heading secara tepat untuk menekankan bahwa teks adalah benar-benar penting dan merepresentasikan struktur halaman.
“Menulis” ternyata tidak sekedar “menulis”, tetapi memiliki kedalaman makna yang terkandung di dalamnya. Standar merupakan impian bagi para blogger — termasuk saya — dan boleh jadi SEO turut sebagai pengiring. Tetapi hal tersebut mungkin tidak berarti tanpa memberikan tanda-tanda tertentu (semantik) dalam mengoptimalkan konten pada blog yang kita kelola dan yang terpenting adalah bagaimana informasi disampaikan dengan baik serta terstruktur, sehingga dapat diterima secara positif oleh pengguna.
Sekedar kilas balik bahwa postingan ini tetap mengacu pada panduan umum Search Engine Optimization (SEO)& merupakan kelanjutan dari beberapa posting sebelumnya tentang judul dan deskripsi blog serta memperbaiki struktur blog. Hal ini kami lakukan agar informasi yang pengguna dapatkan tidak sepotong-sepotong, melainkan satu kesatuan posting yang tidak terpisahkan satu dengan lain.
Konten secara umum merupakan informasi yang tersedia melalui media dalam berbagai format. Apabila kita kaitkan dengan sebuah blog, maka ia meliputi semua isi yang terkandung dalam struktur markah pada suatu blog, baik dari kepala hingga kaki. Sedangkan penyempitan makna konten itu sendiri lebih tertuju pada aktivitas blogging, yakni posting. Hal itu tidaklah menjadi keliru sebab posting merupakan bagian dari isi konten utama dalam sebuah blog. Namun pada uraian ini, kita akan membicarakan konten dalam pengertian yang menyeluruh & tidak terbatas pada posting saja. Bagaimana konten yang dapat dikategorikan berteman dengan SEO (Search Engine Optimization)? Penting ditekankan bahwa konten Anda untuk pengguna, sedangkan faktor lain merupakan dampak yang dihasilkan.
Kualitas & Layanan Konten
Apa yang terpikirkan dari sub judul di atas? Ketika sebuah blog memiliki karakter unik, kesamaan topik dari awal sampai akhir maka ia akan mendapat pengakuan dari pembacanya. Selanjutnya tidak jarang akan menjadikan rekomendasi, apalagi jika posting yang diterbitkan merupakan sebuah informasi segar & menarik. Ilustrarsi singkat, pengguna ingin membaca tentang tips blogging. Ketika ia menemukan sebuah blog yang menyajikan informasi tersebut, ia akan mulai memindai apa saja isi yang terkandung di dalamnya, mungkin judul posting lain yang terdapat dalam widget, tata bahasa, markah, dan sebagainya. Disaat mata & pikiran pengguna telah menerima bentuk tampilan pada layar peramban, pada saat itu pula mereka mulai membacanya. Apabila antar posting memiliki keterkaitan dengan topik yang dibacanya, bukan mustahil pengguna akan ‘mengacak-acak’ seluruh konten serta akan menanti pembaharuan di blog tersebut. Dan ini boleh kita namakan sebagai kata kunci tertarget.
Kemudian perhatikan pula tata bahasa yang digunakan, oleh karena tidak semua pengguna berasal dari daerah atau negara kita, kecuali jika memang blog ditarget untuk pembaca tertentu. Dan bukan itu saja, pemahaman antar pengguna satu dengan lain mungkin akan berbeda pula. Coba teliti tentang pemahaman “markah” & “kode”. Satu pengguna mungkin akan mengetikkan “markah HTML”, sedangkan pengguna lain mengetik “kode HTML”. Meskipun informasi yang dimaksudkan sama, tetapi hasil yang didapatkan akan berbeda dalam mesin penelusur. Akan lebih baik jika kita memadukan frase tersebut, sehingga mengantisipasi perbedaan pemahaman pengguna. Hal ini integral dengan pemanfaatan ungkapan bahasa yang baik & benar dalam isi konten. Siapa yang menduga — walaupun ditarget untuk pembaca tertentu — pengguna lain dari berbagai daerah atau negara akan mengunjungi blog kita, sehingga merupakan upaya logis untuk mendukung sebuah konten agar dapat diterjemahkan dengan benar (hampir benar). Intinya maksud yang disampaikan oleh author serupa/sama dengan penerimaan yang didapat oleh pengguna.
Konten yang original, segar, & menarik tanpa memperhatikan tanda-tanda di dalamnya mungkin akan menimbulkan kesalah-pahaman bagi pembacanya. Untuk mengurangi hal itu kita dapat belajar menerapkan kode & markah yang semantik. Saya tidak menjelaskan detail tentang semantik, namun jika ingin mempelajari lebih lanjut, Anda dapat membaca pada tautan berikut:
Bagaimana menerapkan semantik dalam konten blog? Mungkin kita telah mengenal CSS dan struktur HTML, tetapi dalam posting jarang kita perhatikan. Sedikit tips untuk penerapan semantik dalam posting, saya biasa merangkum beberapa markah umum sebelum menulis dan menggunakan metode post editor “HTML” (bukan “Compose”).
Teks jangkar tidak selalu berhubungan dengan kata kunci (keywords), ia merupakan sekumpulan teks atau kata yang mendeskripsikan sesuatu sehingga menjadi jelas seperti URL (Uniform Resource Locator), singkatan, gambar (detail pada sub judul “Optimalisasi Penggunaan Gambar”), dan sebagainya.
Demi sebuah kata kunci, saya rasa tidak perlu selalu ditunjukkan dengan memperinci kata kunci dalam berbagai gaya (style) seperti teks tebal, miring, pewarnaan dan lain-lain. Bahkan tidak jarang ditemui sejumlah kata kunci yang dicoret atau menggunakan garis bawah. Apa tujuannya? Agar perayap akan tersendat ketika melakukan pengindeksan pada kata kunci tersebut. Lalu bagaimana dari sisi pengguna? Apakah akan terasa nyaman membaca jika sebuah konten terlalu banyak kata kunci yang dihiasi dengan berbagai gaya atau bahkan tidak jarang menimbulkan kesalah-pahaman? Telah dijelaskan pada sub judul sebelumnya bahwa berusaha membuat sebuah konten untuk semantik akan mengantisipasi kesalah-pahaman, begitu pula dengan memberikan tanda-tanda tertentu pada suatu teks (tanda baca). Isi konten yang baik adalah yang mudah dimengerti & dipahami oleh pengguna, bukan sebaliknya. Apabila tidak, maka resiko pentalan akan semakin tinggi.
Teks jangkar pada tautan pun semestinya mendeskripsikan apa yang ia tautkan, sehingga tautan yang kita masukkan benar-benar berkualitas. Hindari penulisan teks jangkar pada tautan secara generik yang mengandung arti kurang jelas seperti halaman ini, artikel ini, klik di sini, dan sejenisnya. Dari sisi pengguna, tautan seharusnya mudah dibedakan dengan teks biasa, kerena nilai dari sebuah konten akan memudar jika pengguna tidak dapat membedakan itu atau pengelola mengkondisikan agar tautan tidak sengaja diklik oleh pengguna. Bahkan mungkin tanpa disadari, kita telah menciptakan tautan yang sebenarnya tidak perlu dimasukkan (dipaksa untuk bertaut) dalam sebuah konten.
Optimalisasi Penggunaan Gambar
Saya rasa untuk optimalisasi penggunaan gambar, para blogger pasti telah mengetahui pentingnya atribut alt. Atribut itu berfungsi sebagai ‘pembaca gambar’. Tinggal upaya kita untuk membuatnya lebih deskriptif & lebih bermakna bagi pembacanya. Jangan pula kita memasukkan deskripsi yang terlalu panjang atau hanya mengeksplorasi kata kunci dalam gambar. Gambar merupakan salah satu alat bantu untuk memberikan kemudahan bagi pengguna agar lebih memahami isi konten. Tetapi hal itu bukan berarti bahwa kita selalu menggunakan tautan gambar untuk navigasi di blog yang kita kelola.
Pergunakan Tag Heading dengan Tepat
Tag heading dimanfaatkan untuk menyajikan struktur pada halaman kepada pengguna, dimana ia tersusun mulai <h1> sampai dengan <h6>. Karena tag heading biasanya membuat teks yang terkandung di dalamnya lebih besar dari teks biasa pada suatu halaman, maka ini adalah isyarat visual kepada pengguna bahwa teks tersebut penting & bisa membantu mereka memahami sesuatu tentang jenis konten di bawah teks judul. Beberapa ukuran heading yang dapat digunakan dalam rangka menciptakan struktur hirarkis untuk konten blog, sehingga memudahkan pengguna untuk menavigasi isi dari konten tersebut.
Patut dijadikan catatan bahwa tidak semua teks dapat dikategorikan sebagai tag heading, adakalanya teks tebal atau miring lebih bermakna bagi teks tersebut. Kemudian jika sebuah teks kurang/tidak membantu dalam menentukan struktur halaman, sebaiknya tidak terlalu memaksakan memberi ‘label’ tag heading. Salah satu cara untuk menentukan sebuah struktur halaman dalam blog adalah menulis & berpikir secara outline. Yah, mungkin pengertian sederhananya adalah metode membuat kerangka karangan.
Judul sebuah posting seharusnya singkat dan deskriptif. Bukankah judul yang panjang lebih baik & menimbulkan daya tarik tersendiri? Mungkin dalam sedikit kasus, penekanan teks tertentu yang ditambahkan dapat berguna bagi pembaca. Tetapi jika judul posting yang singkat telah mampu mendeskripsikan isi yang terkandung dalam posting, mengapa kita berpikir untuk membuatnya menjadi panjang.
Simpulan
Berdasarkan dari uraian di atas maka dapat kita ambil generalisasi dengan detail sebagai berikut:
Konten seharusnya unik, nyaman dibaca, & mudah dipahami oleh pengguna untuk mengantisipasi atau mengurangi celah kesalah-pahaman.
Ketika kita telah memilih sebuah topik, tetapkan pengorganisasian isi konten agar selalu terkait dengan topik tersebut. Dan jangan lupa memprioritaskan untuk kemudahan pengguna, bukan untuk indeks mesin penelusur.
Teks jangkar yang singkat, tepat, dan deskriptif akan memberikan pengalaman yang positif bagi pengguna serta indeks yang baik bagi mesin penelusur untuk menyampaikan isi terkait. Begitu pula apabila kita dapat memberikan pembeda yang jelas antara teks biasa & tautan teks, sehingga hal-hal yang kurang/tidak diinginkan dapat diminimalisasi.
Lengkapi dengan atribut alt, apabila menggunakan media gambar sebagai tautan dan/atau isi konten dalam tubuh HTML (Hypertext Markup Language). Ini tidak termasuk gambar yang dikonfigurasi sebagai nilai dari suatu properti pada CSS (Cascading Style Sheets).
Pergunakan tag heading secara tepat untuk menekankan bahwa teks adalah benar-benar penting dan merepresentasikan struktur halaman.
“Menulis” ternyata tidak sekedar “menulis”, tetapi memiliki kedalaman makna yang terkandung di dalamnya. Standar merupakan impian bagi para blogger — termasuk saya — dan boleh jadi SEO turut sebagai pengiring. Tetapi hal tersebut mungkin tidak berarti tanpa memberikan tanda-tanda tertentu (semantik) dalam mengoptimalkan konten pada blog yang kita kelola dan yang terpenting adalah bagaimana informasi disampaikan dengan baik serta terstruktur, sehingga dapat diterima secara positif oleh pengguna.
Para blogger tentu sudah tidak asing lagi dengan yang namanya “Formulir Kontak”. Formulir kontak berguna sebagai media interaksi pengunjung agar terhubung langsung ke email pengelola blog. Formulir ini berbeda dengan meninggalkan komentar & memiliki skala yang lebih luas, contoh: memberikan saran berkenaan dengan blog atau permintaan posting, bertanya tentang suatu topik posting ketika komentar pada posting tersebut telah ditutup, dan sebagainya
Banyak layanan pihak ketiga yang menyediakan fasilitas ini, antara lain: EmailMeForm, Kontactr, Foxyform & FreeContactForm. Nah, sekarang bagaimana jika kita ingin membuat formulir kontak sendiri? Salah satu alternatifnya adalah dengan menggunakan PHP (Hypertext Preprocessor), seperti yang akan Optimasi Blog deskripsikan berikut.
Web Hosting
Langkah awal, kita harus memiliki hosting. Mungkin salah satu situs web yang menyediakannya secara gratis adalah 000webhost.com (jika tidak berkeberatan, taut tersebut merupakan afiliasi Optimasi Blog di 000webhost) atau dapat menggunakan hosting lain. Kemudian buat satu subdomain gratis yang disediakan oleh layanan tersebut. Silakan buka akun email sesuai dengan email yang didaftarkan pada 000webhost untuk melihat konfirmasi akun. Jika sudah, kembali ke 000webhost & beranjak ke Cpanel. Klik icon “File Manager” dan masukkan kata sandi sesuai dengan waktu pendaftaran atau ganti kata sandi berbeda (baru) dengan melakukan akses ke “View FTP Detail”. Sekarang kita berada dalam File Manager, buka berkas public_html. Hapus file “default.php”, kemudian buat file baru bernama “index.php” yang berisi Silence is golden.
<?php // Silence is golden. ?>
Nah, sekarang subdomain gratis telah dapat kita pergunakan untuk menyimpan berbagai berkas. Selanjutnya masih di dalam berkas public_html, kita membuat file PHP yang nantinya akan dimunculkan sebagai formulir isian kontak.
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler"); } else { ob_start(); } ?> <?php error_reporting( 0 );?> <?php //Memperbaiki kesalahan pemberitahuan pada debug $nameError = ''; $emailError = ''; $commentError = ''; //Mengecek apakah isi form sudah dikirim if(isset($_POST['submitted'])) { //Mengecek apakah chaptcha rahasia terisi if(trim($_POST['checking']) !== '') { $captchaError = true; } else { //Mengecek apakah kolom nama sudah diisi if(trim($_POST['contactName']) === '') { $nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong $hasError = true; } else { $name = trim($_POST['contactName']); } //Mengecek apakah kolom alamat email sudah diisi dan valid if(trim($_POST['email']) === '') { $emailError = 'Anda lupa untuk memasukkan alamat email';//Pesan error jika kolom email kosong $hasError = true; } else if (!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", trim($_POST['email']))) { $emailError = 'Alamat email yang Anda masukkan tidak valid';//Pesan error jika alamat email tidak valid $hasError = true; } else { $email = trim($_POST['email']); } //Mengecek apakah kolom isi pesan sudah disi if(trim($_POST['comments']) === '') { $commentError = 'Apakah Anda ingin mengirim pesan kosong? Silakan isi pesan Anda';//Pesan error jika kolom pesan masih kosong $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['comments'])); } else { $comments = trim($_POST['comments']); } } //Mengirimkan pesan, jika semua kolom telah diisi dengan valid if(!isset($hasError)) { $emailTo = 'email@example.com';//Alamat email tujuan, ganti dengan email anda $subject = 'Pesan via formulir kontak dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak $sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim $body = "Nama: $name \n\nEmail: $email \n\nIsi Pesan: $comments";//Isi Email $headers = 'From: Optimasi Blog <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email mail($emailTo, $subject, $body, $headers); if($sendCopy == true) { $subject = 'Pesan Anda dari nama blog Anda';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang $headers = 'From: admin blog <email@example.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya mail($email, $subject, $body, $headers); } $emailSent = true; } } } ?> <!DOCTYPE html> <html> <head> <title>Formulir Kontak</title> <link rel="stylesheet" href="/css/style.css.php"/> </head> <body> <?php if(isset($emailSent) && $emailSent == true) { ?> <h3>Terima kasih, <?=$name;?></h3> <p>Pesan Anda telah dikirim, kami akan segera membalas secepat mungkin.</p> <?php } else { ?> <?php if(isset($hasError) || isset($captchaError)) { ?> <p class="error">Maaf, tampaknya ada masalah dalam pengiriman pesan Anda, silakan coba lagi :)<p> <?php } ?> <form action="contact-form.php" id="contactForm" method="post"> <p class="contact-form-author"> <label for="contactName">Nama <small>*</small></label> <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="30" tabindex="1" class="requiredField" /> <?php if($nameError != '') { ?> <span class="error"><?=$nameError;?></span> <?php } ?> </p> <p class="contact-form-email"> <label for="email">Email <small>*</small></label> <input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" size="30" tabindex="2" class="requiredField email" /> <?php if($emailError != '') { ?> <span class="error"><?=$emailError;?></span> <?php } ?> </p> <p class="contact-form-message"> <label for="commentsText">Pesan <small>*</small></label> <textarea name="comments" id="commentsText" cols="45" rows="8" tabindex="3" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> <?php if($commentError != '') { ?> <span class="error"><?=$commentError;?></span> <?php } ?> </p> <p class="inline"> <input type="checkbox" name="sendCopy" id="sendCopy" tabindex="4" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda.</label> </p> <p class="screenReader"> <label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" size="10" tabindex="5" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /> </p><!--Chaptca rahasia--> <p class="contact-form-submitted"> <input name="submitted" type="submit" id="submitted" tabindex="6" value="Kirim Pesan" /> </p> </form><!-- #contactForm --> <?php } ?> </body> </html>
Untuk kode yang berwarna merah merupakan kompres file dengan menggunakan gzip & warna biru diisi dengan email serta nama blog, sesuaikan dengan keterangan yang diberi warna hijau. Beri nama file di atas menjadi “contact-form.php” (tanpa tanda petik). Adapun <link rel="stylesheet" href="/css/style.css.php"/> akan kita buat terpisah dari file induk (contact-form.php)
Buat direktori baru dengan nama “css” (tanpa tanda petik). Masuk ke dalam direktori css, kemudian tambahkan file baru dengan nama “style.css” (tanpa tanda petik) yang isinya lebih kurang sebagai berikut.
Silakan Anda kustomisasi pengkodean CSS (Cascading Style Sheets) di atas, sehingga sesuai dengan keinginan dan/atau template Anda. Jangan lupa membuat satu file baru (dalam folder css) lagi untuk mengompresi CSS tersebut & beri nama “style.css.php” (tanpa tanda petik).
<?php ob_start("ob_gzhandler"); ob_start("compress"); // required header info and character set header("Content-type: text/css; charset: UTF-8"); // duration of cached content (Cache for 1 weeks) $offset = 60 * 60 * 24 * 7; $ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; // cache control to process header ('Cache-Control: max-age=' . $offset . ', must-revalidate'); //set etag-header header('ETag: "'.md5($ts).'"'); // expiration header format $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT"; // send cache expiration header to browser header($ExpStr); // initialize compress function for white-space removal ob_start("compress"); // Begin function compress function compress($buffer) { // remove comments $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); // remove tabs, spaces, new lines, etc. $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer); // remove unnecessary spaces $buffer = str_replace('{ ', '{', $buffer); $buffer = str_replace(' }', '}', $buffer); $buffer = str_replace('; ', ';', $buffer); $buffer = str_replace(', ', ',', $buffer); $buffer = str_replace(' {', '{', $buffer); $buffer = str_replace('} ', '}', $buffer); $buffer = str_replace(': ', ':', $buffer); $buffer = str_replace(' ,', ',', $buffer); $buffer = str_replace(' ;', ';', $buffer); return $buffer;} require_once('style.css'); ob_end_flush(); ?>
Dua file dalam direktori css, yakni style.css dan style.css.php dengan pemanggilan <link rel="stylesheet" href="/css/style.css.php"/> pada file contact-form.php
Sekarang formulir kontak telah siap dimanfaatkan serta diletakkan pada blog, biasanya dalam halaman kontak. Sebelumnya — mungkin ini sifatnya opsional (tambahan) — menambah beberapa pengaturan pada .htaccess agar lebih maksimal. Baris pertama umumnya telah otomatis ditambahkan, tinggal melakukan konfigurasi untuk baris-baris selanjutnya. Taut kredit khusus untuk Mutohar Alwi dalam posting Cara Setting Expired Header.
# Do not remove this line, otherwise mod_rewrite rules will stop working <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
# Prevents directory listing IndexIgnore *
# Strong HTACCESS Protection <Files ~ "^.*\.([Hh][Tt][Aa])"> order allow,deny deny from all satisfy all </Files>
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Isi keseluruhan public_html (subdomain) yang terdiri dari satu folder css dan tiga buah file (.htaccess, index.php, dan contact-form.php).
Implementasi Formulir Kontak dalam Blog
Setelah melakukan beberapa langkah-langkah di atas pada hosting kita untuk mendukung fasilitas kontak. Sekarang bagaimana cara melakukan konfigurasi formulir kontak tersebut dalam blog? Cukup ringkas, buat halaman statis baru (contoh: h**p://namablog.blogspot.com/p/kontak.html) dengan beberapa kalimat sebagai pembuka. Kemudian tambahkan markah berikut di bawah kalimat pembuka.
Perhatikan namasubdomain (warna merah) harus sesuai dengan yang kita daftarkan, contoh: optimasi.netai.net, optimasi.site90.com, dan sebagainya. Kemudian tambahkan CSS berikut pada template untuk mengatur markah object& letakkan di bawah ]]></b:skin>.
Kemungkinan yang banyak diutak-atik adalah CSS object pada properti height agar formulir kontak tampil penuh, ketika memunculkan pesan error pada saat mengklik tombol “Kirim Pesan”. Taut demonstrasi dapat dilihat pada halaman Kontak Optimasi Blog. Berikut beberapa penampakkan hasil uji coba formulir komentar pada akun email pengelola blog.
Bosan membacanya? Oleh karena terlalu panjang, meskipun sebenarnya dapat dikustomisasi lebih singkat. Posting membuat formulir kontak ini merupakan bahan dokumentasi penulis serta sedikit menambah wawasan kita tentang ‘dunia’ hosting & bagaimana melakukan optimalisasi terhadap sejumlah file didalamnya. Tidak menutup kemungkinan terdapat kekeliruan dalam penyampaian atau pengkodean di atas, sehingga dibutuhkan kritik serta saran agar dapat memperbaiki posting ini.
Para blogger tentu sudah tidak asing lagi dengan yang namanya “Formulir Kontak”. Formulir kontak berguna sebagai media interaksi pengunjung agar terhubung langsung ke email pengelola blog. Formulir ini berbeda dengan meninggalkan komentar & memiliki skala yang lebih luas, contoh: memberikan saran berkenaan dengan blog atau permintaan posting, bertanya tentang suatu topik posting ketika komentar pada posting tersebut telah ditutup, dan sebagainya
Banyak layanan pihak ketiga yang menyediakan fasilitas ini, antara lain: EmailMeForm, Kontactr, Foxyform & FreeContactForm. Nah, sekarang bagaimana jika kita ingin membuat formulir kontak sendiri? Salah satu alternatifnya adalah dengan menggunakan PHP (Hypertext Preprocessor), seperti yang akan Optimasi Blog deskripsikan berikut.
Web Hosting
Langkah awal, kita harus memiliki hosting. Mungkin salah satu situs web yang menyediakannya secara gratis adalah 000webhost.com (jika tidak berkeberatan, taut tersebut merupakan afiliasi Optimasi Blog di 000webhost) atau dapat menggunakan hosting lain. Kemudian buat satu subdomain gratis yang disediakan oleh layanan tersebut. Silakan buka akun email sesuai dengan email yang didaftarkan pada 000webhost untuk melihat konfirmasi akun. Jika sudah, kembali ke 000webhost & beranjak ke Cpanel. Klik icon “File Manager” dan masukkan kata sandi sesuai dengan waktu pendaftaran atau ganti kata sandi berbeda (baru) dengan melakukan akses ke “View FTP Detail”. Sekarang kita berada dalam File Manager, buka berkas public_html. Hapus file “default.php”, kemudian buat file baru bernama “index.php” yang berisi Silence is golden.
<?php // Silence is golden. ?>
Nah, sekarang subdomain gratis telah dapat kita pergunakan untuk menyimpan berbagai berkas. Selanjutnya masih di dalam berkas public_html, kita membuat file PHP yang nantinya akan dimunculkan sebagai formulir isian kontak.
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler"); } else { ob_start(); } ?> <?php error_reporting( 0 );?> <?php //Memperbaiki kesalahan pemberitahuan pada debug $nameError = ''; $emailError = ''; $commentError = ''; //Mengecek apakah isi form sudah dikirim if(isset($_POST['submitted'])) { //Mengecek apakah chaptcha rahasia terisi if(trim($_POST['checking']) !== '') { $captchaError = true; } else { //Mengecek apakah kolom nama sudah diisi if(trim($_POST['contactName']) === '') { $nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong $hasError = true; } else { $name = trim($_POST['contactName']); } //Mengecek apakah kolom alamat email sudah diisi dan valid if(trim($_POST['email']) === '') { $emailError = 'Anda lupa untuk memasukkan alamat email';//Pesan error jika kolom email kosong $hasError = true; } else if (!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", trim($_POST['email']))) { $emailError = 'Alamat email yang Anda masukkan tidak valid';//Pesan error jika alamat email tidak valid $hasError = true; } else { $email = trim($_POST['email']); } //Mengecek apakah kolom isi pesan sudah disi if(trim($_POST['comments']) === '') { $commentError = 'Apakah Anda ingin mengirim pesan kosong? Silakan isi pesan Anda';//Pesan error jika kolom pesan masih kosong $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['comments'])); } else { $comments = trim($_POST['comments']); } } //Mengirimkan pesan, jika semua kolom telah diisi dengan valid if(!isset($hasError)) { $emailTo = 'email@example.com';//Alamat email tujuan, ganti dengan email anda $subject = 'Pesan via formulir kontak dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak $sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim $body = "Nama: $name \n\nEmail: $email \n\nIsi Pesan: $comments";//Isi Email $headers = 'From: Optimasi Blog <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email mail($emailTo, $subject, $body, $headers); if($sendCopy == true) { $subject = 'Pesan Anda dari nama blog Anda';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang $headers = 'From: admin blog <email@example.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya mail($email, $subject, $body, $headers); } $emailSent = true; } } } ?> <!DOCTYPE html> <html> <head> <title>Formulir Kontak</title> <link rel="stylesheet" href="/css/style.css.php"/> </head> <body> <?php if(isset($emailSent) && $emailSent == true) { ?> <h3>Terima kasih, <?=$name;?></h3> <p>Pesan Anda telah dikirim, kami akan segera membalas secepat mungkin.</p> <?php } else { ?> <?php if(isset($hasError) || isset($captchaError)) { ?> <p class="error">Maaf, tampaknya ada masalah dalam pengiriman pesan Anda, silakan coba lagi :)<p> <?php } ?> <form action="contact-form.php" id="contactForm" method="post"> <p class="contact-form-author"> <label for="contactName">Nama <small>*</small></label> <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="30" tabindex="1" class="requiredField" /> <?php if($nameError != '') { ?> <span class="error"><?=$nameError;?></span> <?php } ?> </p> <p class="contact-form-email"> <label for="email">Email <small>*</small></label> <input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" size="30" tabindex="2" class="requiredField email" /> <?php if($emailError != '') { ?> <span class="error"><?=$emailError;?></span> <?php } ?> </p> <p class="contact-form-message"> <label for="commentsText">Pesan <small>*</small></label> <textarea name="comments" id="commentsText" cols="45" rows="8" tabindex="3" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> <?php if($commentError != '') { ?> <span class="error"><?=$commentError;?></span> <?php } ?> </p> <p class="inline"> <input type="checkbox" name="sendCopy" id="sendCopy" tabindex="4" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda.</label> </p> <p class="screenReader"> <label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" size="10" tabindex="5" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /> </p><!--Chaptca rahasia--> <p class="contact-form-submitted"> <input name="submitted" type="submit" id="submitted" tabindex="6" value="Kirim Pesan" /> </p> </form><!-- #contactForm --> <?php } ?> </body> </html>
Untuk kode yang berwarna merah merupakan kompres file dengan menggunakan gzip & warna biru diisi dengan email serta nama blog, sesuaikan dengan keterangan yang diberi warna hijau. Beri nama file di atas menjadi “contact-form.php” (tanpa tanda petik). Adapun <link rel="stylesheet" href="/css/style.css.php"/> akan kita buat terpisah dari file induk (contact-form.php)
Buat direktori baru dengan nama “css” (tanpa tanda petik). Masuk ke dalam direktori css, kemudian tambahkan file baru dengan nama “style.css” (tanpa tanda petik) yang isinya lebih kurang sebagai berikut.
Silakan Anda kustomisasi pengkodean CSS (Cascading Style Sheets) di atas, sehingga sesuai dengan keinginan dan/atau template Anda. Jangan lupa membuat satu file baru (dalam folder css) lagi untuk mengompresi CSS tersebut & beri nama “style.css.php” (tanpa tanda petik).
<?php ob_start("ob_gzhandler"); ob_start("compress"); // required header info and character set header("Content-type: text/css; charset: UTF-8"); // duration of cached content (Cache for 1 weeks) $offset = 60 * 60 * 24 * 7; $ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; // cache control to process header ('Cache-Control: max-age=' . $offset . ', must-revalidate'); //set etag-header header('ETag: "'.md5($ts).'"'); // expiration header format $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT"; // send cache expiration header to browser header($ExpStr); // initialize compress function for white-space removal ob_start("compress"); // Begin function compress function compress($buffer) { // remove comments $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); // remove tabs, spaces, new lines, etc. $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer); // remove unnecessary spaces $buffer = str_replace('{ ', '{', $buffer); $buffer = str_replace(' }', '}', $buffer); $buffer = str_replace('; ', ';', $buffer); $buffer = str_replace(', ', ',', $buffer); $buffer = str_replace(' {', '{', $buffer); $buffer = str_replace('} ', '}', $buffer); $buffer = str_replace(': ', ':', $buffer); $buffer = str_replace(' ,', ',', $buffer); $buffer = str_replace(' ;', ';', $buffer); return $buffer;} require_once('style.css'); ob_end_flush(); ?>
Dua file dalam direktori css, yakni style.css dan style.css.php dengan pemanggilan <link rel="stylesheet" href="/css/style.css.php"/> pada file contact-form.php
Sekarang formulir kontak telah siap dimanfaatkan serta diletakkan pada blog, biasanya dalam halaman kontak. Sebelumnya — mungkin ini sifatnya opsional (tambahan) — menambah beberapa pengaturan pada .htaccess agar lebih maksimal. Baris pertama umumnya telah otomatis ditambahkan, tinggal melakukan konfigurasi untuk baris-baris selanjutnya. Taut kredit khusus untuk Mutohar Alwi dalam posting Cara Setting Expired Header.
# Do not remove this line, otherwise mod_rewrite rules will stop working <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
# Prevents directory listing IndexIgnore *
# Strong HTACCESS Protection <Files ~ "^.*\.([Hh][Tt][Aa])"> order allow,deny deny from all satisfy all </Files>
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Isi keseluruhan public_html (subdomain) yang terdiri dari satu folder css dan tiga buah file (.htaccess, index.php, dan contact-form.php).
Implementasi Formulir Kontak dalam Blog
Setelah melakukan beberapa langkah-langkah di atas pada hosting kita untuk mendukung fasilitas kontak. Sekarang bagaimana cara melakukan konfigurasi formulir kontak tersebut dalam blog? Cukup ringkas, buat halaman statis baru (contoh: h**p://namablog.blogspot.com/p/kontak.html) dengan beberapa kalimat sebagai pembuka. Kemudian tambahkan markah berikut di bawah kalimat pembuka.
Perhatikan namasubdomain (warna merah) harus sesuai dengan yang kita daftarkan, contoh: optimasi.netai.net, optimasi.site90.com, dan sebagainya. Kemudian tambahkan CSS berikut pada template untuk mengatur markah object& letakkan di bawah ]]></b:skin>.
Kemungkinan yang banyak diutak-atik adalah CSS object pada properti height agar formulir kontak tampil penuh, ketika memunculkan pesan error pada saat mengklik tombol “Kirim Pesan”. Taut demonstrasi dapat dilihat pada halaman Kontak Optimasi Blog. Berikut beberapa penampakkan hasil uji coba formulir komentar pada akun email pengelola blog.
Bosan membacanya? Oleh karena terlalu panjang, meskipun sebenarnya dapat dikustomisasi lebih singkat. Posting membuat formulir kontak ini merupakan bahan dokumentasi penulis serta sedikit menambah wawasan kita tentang ‘dunia’ hosting & bagaimana melakukan optimalisasi terhadap sejumlah file didalamnya. Tidak menutup kemungkinan terdapat kekeliruan dalam penyampaian atau pengkodean di atas, sehingga dibutuhkan kritik serta saran agar dapat memperbaiki posting ini.
Struktur blog bukan hanya berkenaan dengan pengkodean template, namun harus dipandang sebagai keseluruhan sistem yang terintegrasi di dalam blog itu sendiri, seperti pengaturan, semantik, dan sebagainya. Ketika kita terfokus bahwa struktur blog merupakan sebuah pengkodean semata, maka jangan heran jika upaya keras yang kita lakukan hanya berkisar antara utak-atik untuk mendapatkan peringkat utama dalam hasil organik (baca kembali posting tentang pemahaman yang saklak tentang SEO).
Apakah Optimasi Blog mengada-ada, dengan selalu menghubungkan sesuatu dengan SEO? Saya tidak mengada-ada & ini mempunyai dasar sesuai dengan panduan umum Search Engine Optimization (SEO), dimana struktur blog adalah salah satu item yang mesti diperhatikan. Item dasar telah diterbitkan sebelumnya pada posting judul dan deskripsi dalam blog.
Untuk URL (Uniform Resource Locator) saya rasa semua blogger sudah mengenal & paham. Jika judul posting dikustomisasi dengan baik, maka alamat posting (permalink) yang terbentuk akan baik pula. Hindari bagi sejumlah permalink yang memasukkan kata kunci berulang-ulang (ditandai dengan URL berwarna merah) dan sama serta serupa pada sub domain atau root direktori yang berbeda (warna hijau).
Membuat sebuah blog mudah untuk dinavigasi bukan berarti blog harus tampil minimalis. Selama pengguna & mesin penelusur dapat membaca dengan baik, maka blog tersebut dapat dikategorikan mudah untuk dinavigasi. Pemanfaatan beberapa elemen untuk membuat menu utama dan pengarsipan mempunyai nilai tersendiri untuk membantu pengguna menjelajahi konten. Bredcrumbs pun tidak jarang sebagai tolak ukur kemudahan bagi pengguna untuk menavigasi isi suatu halaman, terutama pada halaman yang kompleks. Mudah dinavigasi juga bermakna bahwa tautan-tautan — menu utama, arsip, bredcrumbs— tersebut aksesibel jika diklik (clickable). Ia akan mengarahkan pada halaman yang sesuai & tepat. Bagaimana jika alamat taut yang diklik tersebut tidak ada atau telah dihapus? Tempatnya adalah di halaman tidak ditemukan atau istilah kerennya “error404”.
Keberadaan peta situs (sitemap) sederhana yang merujuk ke semua halaman atau halaman yang penting (jika kita memiliki ratusan bahkan ribuan) di dalam blog dapat berguna. Hal ini akan sangat membantu pelacakan agar mesin penelusur menemukan halaman yang relevan. Silakan baca kembali posting tentang cara submit sitemap.
h**p://namablog.blogspot.com/sitemap.xml
Berikan kemudahan bagi pengguna untuk memindai & menjelajahi blog kita, jangan abaikan apa yang menjadi kebutuhan mereka. Sedangkan mesin pencari telah mendapat bagian tertentu — apa yang harus dan tidak boleh diindeks — dengan bantuan peta situs (sitemap).
Struktur blog bukan hanya berkenaan dengan pengkodean template, namun harus dipandang sebagai keseluruhan sistem yang terintegrasi di dalam blog itu sendiri, seperti pengaturan, semantik, dan sebagainya. Ketika kita terfokus bahwa struktur blog merupakan sebuah pengkodean semata, maka jangan heran jika upaya keras yang kita lakukan hanya berkisar antara utak-atik untuk mendapatkan peringkat utama dalam hasil organik (baca kembali posting tentang pemahaman yang saklak tentang SEO).
Apakah Optimasi Blog mengada-ada, dengan selalu menghubungkan sesuatu dengan SEO? Saya tidak mengada-ada & ini mempunyai dasar sesuai dengan panduan umum Search Engine Optimization (SEO), dimana struktur blog adalah salah satu item yang mesti diperhatikan. Item dasar telah diterbitkan sebelumnya pada posting judul dan deskripsi dalam blog.
Untuk URL (Uniform Resource Locator) saya rasa semua blogger sudah mengenal & paham. Jika judul posting dikustomisasi dengan baik, maka alamat posting (permalink) yang terbentuk akan baik pula. Hindari bagi sejumlah permalink yang memasukkan kata kunci berulang-ulang (ditandai dengan URL berwarna merah) dan sama serta serupa pada sub domain atau root direktori yang berbeda (warna hijau).
Membuat sebuah blog mudah untuk dinavigasi bukan berarti blog harus tampil minimalis. Selama pengguna & mesin penelusur dapat membaca dengan baik, maka blog tersebut dapat dikategorikan mudah untuk dinavigasi. Pemanfaatan beberapa elemen untuk membuat menu utama dan pengarsipan mempunyai nilai tersendiri untuk membantu pengguna menjelajahi konten. Bredcrumbs pun tidak jarang sebagai tolak ukur kemudahan bagi pengguna untuk menavigasi isi suatu halaman, terutama pada halaman yang kompleks. Mudah dinavigasi juga bermakna bahwa tautan-tautan — menu utama, arsip, bredcrumbs— tersebut aksesibel jika diklik (clickable). Ia akan mengarahkan pada halaman yang sesuai & tepat. Bagaimana jika alamat taut yang diklik tersebut tidak ada atau telah dihapus? Tempatnya adalah di halaman tidak ditemukan atau istilah kerennya “error404”.
Keberadaan peta situs (sitemap) sederhana yang merujuk ke semua halaman atau halaman yang penting (jika kita memiliki ratusan bahkan ribuan) di dalam blog dapat berguna. Hal ini akan sangat membantu pelacakan agar mesin penelusur menemukan halaman yang relevan. Silakan baca kembali posting tentang cara submit sitemap.
h**p://namablog.blogspot.com/sitemap.xml
Berikan kemudahan bagi pengguna untuk memindai & menjelajahi blog kita, jangan abaikan apa yang menjadi kebutuhan mereka. Sedangkan mesin pencari telah mendapat bagian tertentu — apa yang harus dan tidak boleh diindeks — dengan bantuan peta situs (sitemap).
Kita pasti sering menggunakan mesin penelusur untuk mencari sesuatu yang dibutuhkan. Khusus untuk informasi posting, biasanya hasil pencarian akan menunjukkan judul, URL (Uniform Resource Locator), dan deskripsi. Opsional, jika kata kunci yang diketik oleh pengguna mempunyai kesesuaian yang sangat nyata dengan judul & deskripsi blog serta posting didalamnya, maka pada baris bagian bawah akan muncul rekomendasi beberapa tautan yang mengarah pada alamat blog tersebut atau lebih dikenal dengan sebutan sitelink.
Dari paragraf di atas, judul & deskripsi dalam blog merupakan unsur dasar dalam SEO yang meliputi dua elemen penting, yakni blog dan halaman blog. Setiap Judul haruslah unik dan akurat. Unik karena format struktur yang tidak mempunyai persamaan identik dengan judul lain dan akurat karena menggambarkan isi konten atau posting dalam sebuah blog. Sedangkan deskripsi merupakan ringkasan yang dapat didefinisikan untuk setiap halaman, mungkin berisi satu atau dua kalimat atau paragraf pendek.
Judul
Judul akan ditampilkan dalam hasil pencarian & ketika membuka halaman pada hasil penelusuran, maka judul akan tampil pada tab peramban. Begitu pula ketika pengguna mengetikkan kata kunci lebih spesifik, maka hasil pencarian akan menampilkan sesuai dengan kata kunci tersebut. Biasanya judul diindasikan dengan menggunakan title tag yang berada antara <head> … </head>, seperti yang telah diulas dalam Tips Search Engine Optimization (SEO) pada Blogger.com.
Berikut beberapa hal yang perlu kita lakukan dalam membuat judul:
Memilih judul yang secara efektif mengkomunikasikan topik dari konten halaman. Ini akan membantu mesin penelusur untuk menemukan obyek yang tepat, ketika pengguna mengetikkan kata kunci tertentu. Hindari penggunaan judul yang tidak ada hubungannnya dengan isi blog & menggunakan judul secara tersamar, seperti: “Tanpa Judul”, “Halaman Baru”.
Menggunakan judul yang unik di setiap halaman. Setiap halaman blog idealnya harus memiliki tag judul yang unik, sehingga mesin penelusur mengetahui bagaimana halaman tersebut berbeda dari yang lain.
Menggunakan judul yang singkat tapi deskriptif. Judul semestinya dapat dipersingkat & informatif, karena judul yang panjang mungkin tidak akan banyak membantu pengguna. Apalagi ketika sebuah judul dimasukkan kata-kata kunci yang tidak dibutuhkan serta berlebihan.
Deskripsi
Deskripsi dalam blog diwujudkan dalam description meta tags, dimana khusus untuk Blogger™ default akan berada pada markah <b:include data='blog' name='all-head-content'/>. Bagaimana jika tidak ada, mungkin karena modifikasi atau kustomisasi tiap template, maka kita dapat menambahkan secara manual.
Deskripsi blog dapat kita kostumisasi melalui pengaturan pada dashboard Blogger™, seperti yang telah ditulis dalam posting Kustomisasi Setelan pada Preferensi Penelusuran. Sedangkan untuk halaman posting & statis, berada pada menu pengaturan sebelah kanan editor posting.
Meta tag deskripsi berguna sebagai ringkasan dari keseluruhan isi blog dan “mungkin” mesin penelusur akan menampilkan deskripsi tersebut — jika benar-benar relevan — sesuai & cocok dengan permintaan pengguna. Berikut beberapa hal yang perlu kita lakukan dalam membuat deskripsi:
Tulis desktipsi yang menginformasikan & demi kepentingan pengguna jika mereka melihat deskripsi tersebut sebagai potongan dalam hasil pencarian. Hindari menulis meta tag deskripsi yang tidak ada hubungannya dengan isi dari halaman, menggunakan deskripsi yang umum seperti “Ini adalah halaman web” atau “Halaman tentang blog”, mengisi deskripsi hanya dengan kata kunci, serta menyalin & menyisipkan seluruh isi dokumen ke dalam meta tag deskripsi.
Menggunakan deskripsi yang unik untuk setiap halaman, sehingga membantu mesin penelusur & pengguna untuk menemukan ringkasan yang jelas tentang apa isi halaman blog tersebut. Oleh karena halaman sebuah blog adalah unik, maka hindari penggunaan deskripsi tunggal untuk setiap halaman.
Kita pasti sering menggunakan mesin penelusur untuk mencari sesuatu yang dibutuhkan. Khusus untuk informasi posting, biasanya hasil pencarian akan menunjukkan judul, URL (Uniform Resource Locator), dan deskripsi. Opsional, jika kata kunci yang diketik oleh pengguna mempunyai kesesuaian yang sangat nyata dengan judul & deskripsi blog serta posting didalamnya, maka pada baris bagian bawah akan muncul rekomendasi beberapa tautan yang mengarah pada alamat blog tersebut atau lebih dikenal dengan sebutan sitelink.
Dari paragraf di atas, judul & deskripsi dalam blog merupakan unsur dasar dalam SEO yang meliputi dua elemen penting, yakni blog dan halaman blog. Setiap Judul haruslah unik dan akurat. Unik karena format struktur yang tidak mempunyai persamaan identik dengan judul lain dan akurat karena menggambarkan isi konten atau posting dalam sebuah blog. Sedangkan deskripsi merupakan ringkasan yang dapat didefinisikan untuk setiap halaman, mungkin berisi satu atau dua kalimat atau paragraf pendek.
Judul
Judul akan ditampilkan dalam hasil pencarian & ketika membuka halaman pada hasil penelusuran, maka judul akan tampil pada tab peramban. Begitu pula ketika pengguna mengetikkan kata kunci lebih spesifik, maka hasil pencarian akan menampilkan sesuai dengan kata kunci tersebut. Biasanya judul diindasikan dengan menggunakan title tag yang berada antara <head> … </head>, seperti yang telah diulas dalam Tips Search Engine Optimization (SEO) pada Blogger.com.
Berikut beberapa hal yang perlu kita lakukan dalam membuat judul:
Memilih judul yang secara efektif mengkomunikasikan topik dari konten halaman. Ini akan membantu mesin penelusur untuk menemukan obyek yang tepat, ketika pengguna mengetikkan kata kunci tertentu. Hindari penggunaan judul yang tidak ada hubungannnya dengan isi blog & menggunakan judul secara tersamar, seperti: “Tanpa Judul”, “Halaman Baru”.
Menggunakan judul yang unik di setiap halaman. Setiap halaman blog idealnya harus memiliki tag judul yang unik, sehingga mesin penelusur mengetahui bagaimana halaman tersebut berbeda dari yang lain.
Menggunakan judul yang singkat tapi deskriptif. Judul semestinya dapat dipersingkat & informatif, karena judul yang panjang mungkin tidak akan banyak membantu pengguna. Apalagi ketika sebuah judul dimasukkan kata-kata kunci yang tidak dibutuhkan serta berlebihan.
Deskripsi
Deskripsi dalam blog diwujudkan dalam description meta tags, dimana khusus untuk Blogger™ default akan berada pada markah <b:include data='blog' name='all-head-content'/>. Bagaimana jika tidak ada, mungkin karena modifikasi atau kustomisasi tiap template, maka kita dapat menambahkan secara manual.
Deskripsi blog dapat kita kostumisasi melalui pengaturan pada dashboard Blogger™, seperti yang telah ditulis dalam posting Kustomisasi Setelan pada Preferensi Penelusuran. Sedangkan untuk halaman posting & statis, berada pada menu pengaturan sebelah kanan editor posting.
Meta tag deskripsi berguna sebagai ringkasan dari keseluruhan isi blog dan “mungkin” mesin penelusur akan menampilkan deskripsi tersebut — jika benar-benar relevan — sesuai & cocok dengan permintaan pengguna. Berikut beberapa hal yang perlu kita lakukan dalam membuat deskripsi:
Tulis desktipsi yang menginformasikan & demi kepentingan pengguna jika mereka melihat deskripsi tersebut sebagai potongan dalam hasil pencarian. Hindari menulis meta tag deskripsi yang tidak ada hubungannya dengan isi dari halaman, menggunakan deskripsi yang umum seperti “Ini adalah halaman web” atau “Halaman tentang blog”, mengisi deskripsi hanya dengan kata kunci, serta menyalin & menyisipkan seluruh isi dokumen ke dalam meta tag deskripsi.
Menggunakan deskripsi yang unik untuk setiap halaman, sehingga membantu mesin penelusur & pengguna untuk menemukan ringkasan yang jelas tentang apa isi halaman blog tersebut. Oleh karena halaman sebuah blog adalah unik, maka hindari penggunaan deskripsi tunggal untuk setiap halaman.
Kita mempunyai suatu branding dan — tidak munafik — ingin dikenal. Bagaimana caranya agar dikenal? Yah, diberitahukan kepada orang-orang bahwa, ini adalah branding saya. Bagaimana orang itu tahu, kalau orang-orang sudah kenal dengan branding-nya — sebuah generalisasi sederhana — cari di mesin penelusur.
Umumnya SEO (Search Engine Optimization) merupakan usaha optimalisasi situs web atau blog agar mendapat perhatian dari mesin penelusur, sehingga ketika pengguna mengetikkan kata kunci tertentu, diharapkan halaman situs web atau blog tersebut akan muncul pada hasil pencarian. Apabila kita hanya terfokus pada frase kata mesin pencari, maka akan terjebak dengan pemikiran yang saklak tentang pemahaman makna sebenarnya yang terkandung dalam SEO itu sendiri. Sangat dimungkinkan timbul beberapa paradigma yang berpendapat bahwa SEO itu rumit, SEO itu perlu sekolah, & sebagainya. Kembali pada ilustrasi di atas, apakah hal tersebut akan menafikan proses SEO dalam aktivitas blogging Anda? Ya, tentu saja tidak. Terkecuali Anda adalah seseorang yang populer, memiliki banyak partner&follower atau hal-hal lain di luar kebiasaan.
Mungkin Anda adalah pembaca setia “Optimasi Blog”, kemudian pernah membaca beberapa posting tentang tips SEO. Mari kita kesampingkan dulu posting-posting itu & mulai dengan dua posting terakhir dengan label SEO, yakni Tips Search Engine Optimization (SEO) pada Blogger.com dan Tips SEO pada Blogger.com Bagian Kedua. Adakah hal-hal rumit tentang SEO? Apakah kita perlu menghitung jumlah kata dalam sebuah posting? Apakah satu atau lebih kata kunci harus ditekan secara berulang-ulang? Apakah dengan memberi tanda-tanda tertentu pada kata kunci akan meningkatkan peringkat pencarian?
Ketika kita mulai berpikir tentang pertanyaan-pertanyaan itu, maka kita pun akan terjatuh pada penilaian yang saklak akan makna sebenarnya dari SEO. Bukankah terdapat keterkaitan dengan “selalu dihubungkan dengan mesin pencari”? Antara keduanya memiliki keterkaitan yang jelas, namun dalam ruang lingkup yang berbeda. Daerah yang satu menggambarkan lingkup dalam sebuah branding, sedangkan yang lain diluar lingkup branding.
Ketika kita telah memutuskan tentang apa yang akan & patut dijadikan produk, sangat dimungkinkan pula kita telah menemukan merek yang tepat untuk produk tersebut. Jika dihubungkan dengan aktivitas blogging, produk yang dimaksud adalah berupa kumpulan catatan posting atau artikel. Selanjutnya, secara rutin posting — yang diterbitkan — diupayakan tidak terlepas dengan merek yang telah kita tetapkan. Satu keunikkan dari situs web atau blog telah muncul, yaitu merek & produk saling terkait. Ini adalah branding Anda.
Pengguna yang membutuhkan suatu informasi tertentu akan mencari pada mesin telusur dengan kata kunci yang ia butuhkan. Mungkin halaman situs web atau blog Anda akan muncul pada hasil pencarian & pengguna pun mengunjunginya. Ternyata halaman itu memang berisi informasi yang mereka butuhkan. Penyajian yang segar serta tersusun dengan bahasa yang baik, ia pun betah membacanya. Tidak menutup kemungkinan, pengguna akan membaca posting lain karena informasi yang dibutuhkannya memiliki keterkaitan.
Simpulan
Secara sadar atau tidak sadar, dimulai dari rancangan sebuah situs web atau blog sampai dengan pembaharuan posting yang sesuai serta terkait dengan tema, kita telah masuk ke dalam SEO. Oleh karena ia bukan hasil dari pemikiran yang saklak, harus mesin pencari atau sejumlah usaha keras utak-atik untuk mendapatkan peringkat dalam hasil organik. Tetapi lebih kepada target kebutuhan pengguna yang menjadi konsumen utama kita. Ketika blog ini berbicara tentang “SEO”, mungkin akan sesuai dengan pindaian Anda bahwa temanya adalah “Optimasi Blog”. Bagaimana jika menerbitkan tentang kisah “Selebritis”? Anda juga yang akan menilai.
Kita mempunyai suatu branding dan — tidak munafik — ingin dikenal. Bagaimana caranya agar dikenal? Yah, diberitahukan kepada orang-orang bahwa, ini adalah branding saya. Bagaimana orang itu tahu, kalau orang-orang sudah kenal dengan branding-nya — sebuah generalisasi sederhana — cari di mesin penelusur.
Umumnya SEO (Search Engine Optimization) merupakan usaha optimalisasi situs web atau blog agar mendapat perhatian dari mesin penelusur, sehingga ketika pengguna mengetikkan kata kunci tertentu, diharapkan halaman situs web atau blog tersebut akan muncul pada hasil pencarian. Apabila kita hanya terfokus pada frase kata mesin pencari, maka akan terjebak dengan pemikiran yang saklak tentang pemahaman makna sebenarnya yang terkandung dalam SEO itu sendiri. Sangat dimungkinkan timbul beberapa paradigma yang berpendapat bahwa SEO itu rumit, SEO itu perlu sekolah, & sebagainya. Kembali pada ilustrasi di atas, apakah hal tersebut akan menafikan proses SEO dalam aktivitas blogging Anda? Ya, tentu saja tidak. Terkecuali Anda adalah seseorang yang populer, memiliki banyak partner&follower atau hal-hal lain di luar kebiasaan.
Mungkin Anda adalah pembaca setia “Optimasi Blog”, kemudian pernah membaca beberapa posting tentang tips SEO. Mari kita kesampingkan dulu posting-posting itu & mulai dengan dua posting terakhir dengan label SEO, yakni Tips Search Engine Optimization (SEO) pada Blogger.com dan Tips SEO pada Blogger.com Bagian Kedua. Adakah hal-hal rumit tentang SEO? Apakah kita perlu menghitung jumlah kata dalam sebuah posting? Apakah satu atau lebih kata kunci harus ditekan secara berulang-ulang? Apakah dengan memberi tanda-tanda tertentu pada kata kunci akan meningkatkan peringkat pencarian?
Ketika kita mulai berpikir tentang pertanyaan-pertanyaan itu, maka kita pun akan terjatuh pada penilaian yang saklak akan makna sebenarnya dari SEO. Bukankah terdapat keterkaitan dengan “selalu dihubungkan dengan mesin pencari”? Antara keduanya memiliki keterkaitan yang jelas, namun dalam ruang lingkup yang berbeda. Daerah yang satu menggambarkan lingkup dalam sebuah branding, sedangkan yang lain diluar lingkup branding.
Ketika kita telah memutuskan tentang apa yang akan & patut dijadikan produk, sangat dimungkinkan pula kita telah menemukan merek yang tepat untuk produk tersebut. Jika dihubungkan dengan aktivitas blogging, produk yang dimaksud adalah berupa kumpulan catatan posting atau artikel. Selanjutnya, secara rutin posting — yang diterbitkan — diupayakan tidak terlepas dengan merek yang telah kita tetapkan. Satu keunikkan dari situs web atau blog telah muncul, yaitu merek & produk saling terkait. Ini adalah branding Anda.
Pengguna yang membutuhkan suatu informasi tertentu akan mencari pada mesin telusur dengan kata kunci yang ia butuhkan. Mungkin halaman situs web atau blog Anda akan muncul pada hasil pencarian & pengguna pun mengunjunginya. Ternyata halaman itu memang berisi informasi yang mereka butuhkan. Penyajian yang segar serta tersusun dengan bahasa yang baik, ia pun betah membacanya. Tidak menutup kemungkinan, pengguna akan membaca posting lain karena informasi yang dibutuhkannya memiliki keterkaitan.
Simpulan
Secara sadar atau tidak sadar, dimulai dari rancangan sebuah situs web atau blog sampai dengan pembaharuan posting yang sesuai serta terkait dengan tema, kita telah masuk ke dalam SEO. Oleh karena ia bukan hasil dari pemikiran yang saklak, harus mesin pencari atau sejumlah usaha keras utak-atik untuk mendapatkan peringkat dalam hasil organik. Tetapi lebih kepada target kebutuhan pengguna yang menjadi konsumen utama kita. Ketika blog ini berbicara tentang “SEO”, mungkin akan sesuai dengan pindaian Anda bahwa temanya adalah “Optimasi Blog”. Bagaimana jika menerbitkan tentang kisah “Selebritis”? Anda juga yang akan menilai.
Ketika berbicara tentang desain, umumnya kerap dihubungkan dengan desain antarmuka (front-end). Yah, sebuah tampilan dari baris markah yang dipertunjukkan oleh layar peramban, sehingga tidak lebih dari sekedar tampilan grafis yang dimaknai dengan sekumpulan kode-kode. Apabila hal ini berkelanjutan — mungkin menjadi sebuah #trending topics — maka jangan terkejut, jika kelak desain yang diartikan seperti tersebut di atas akan tidak bisa diakses oleh suatu peralatan tertentu.
Blog merupakan catatan di web yang tersusun oleh posting/artikel, biasa diurut berdasarkan akhir sampai awal penerbitan. Umumnya sebuah blog merupakan media berbagi, dimana pengelola, penulis, & pengunjung saling berinteraksi. Mungkin pula interaksi tersebut berjalan satu arah, penulis menerbitkan posting/artikel, sedangkan pengunjung cuma mencerna isinya, tanpa perlu ada aksi tertentu. Desain blog berisi karakter unik — HTML, XHTML, CSS, JS, PHP, dan sebagainya — tergantung pada mesin blogger yang mendukungnya.
Ketika kita memandang desain web adalah sebuah sistem, kita tidak dapat melepaskan aksesibilitas (dan usabilitas) di dalamnya. Saya berpendapat bahwa tujuan dari desain antarmuka adalah untuk menunjang aksesibilitas & usabilitas, bukan sebaliknya.
Kembali ke paragraf pertama, Jangan terkejut, jika kelak desain yang diartikan seperti tersebut di atas akan tidak bisa diakses oleh suatu peralatan tertentu. Mungkin sebagian dari kita, lebih mengutamakan tampilan desain yang cool serta elegen. Namun yang pasti, sebuah desain jangan meninggalkan satu poin penting, yakni aksesibilitas. Oleh karena aksesibilitas bukan hanya untuk memfasilitasi penyandang disabilitas, tetapi aksesibilitas itu untuk semua.
Catatan: Posting ini merupakan pembelajaran & dokumentasi penulis tentang aksesibilitas serta usabilitas.
Ketika berbicara tentang desain, umumnya kerap dihubungkan dengan desain antarmuka (front-end). Yah, sebuah tampilan dari baris markah yang dipertunjukkan oleh layar peramban, sehingga tidak lebih dari sekedar tampilan grafis yang dimaknai dengan sekumpulan kode-kode. Apabila hal ini berkelanjutan — mungkin menjadi sebuah #trending topics — maka jangan terkejut, jika kelak desain yang diartikan seperti tersebut di atas akan tidak bisa diakses oleh suatu peralatan tertentu.
Blog merupakan catatan di web yang tersusun oleh posting/artikel, biasa diurut berdasarkan akhir sampai awal penerbitan. Umumnya sebuah blog merupakan media berbagi, dimana pengelola, penulis, & pengunjung saling berinteraksi. Mungkin pula interaksi tersebut berjalan satu arah, penulis menerbitkan posting/artikel, sedangkan pengunjung cuma mencerna isinya, tanpa perlu ada aksi tertentu. Desain blog berisi karakter unik — HTML, XHTML, CSS, JS, PHP, dan sebagainya — tergantung pada mesin blogger yang mendukungnya.
Ketika kita memandang desain web adalah sebuah sistem, kita tidak dapat melepaskan aksesibilitas (dan usabilitas) di dalamnya. Saya berpendapat bahwa tujuan dari desain antarmuka adalah untuk menunjang aksesibilitas & usabilitas, bukan sebaliknya.
Kembali ke paragraf pertama, Jangan terkejut, jika kelak desain yang diartikan seperti tersebut di atas akan tidak bisa diakses oleh suatu peralatan tertentu. Mungkin sebagian dari kita, lebih mengutamakan tampilan desain yang cool serta elegen. Namun yang pasti, sebuah desain jangan meninggalkan satu poin penting, yakni aksesibilitas. Oleh karena aksesibilitas bukan hanya untuk memfasilitasi penyandang disabilitas, tetapi aksesibilitas itu untuk semua.
Catatan: Posting ini merupakan pembelajaran & dokumentasi penulis tentang aksesibilitas serta usabilitas.
Ketika Anda mengunjungi sebuah blog, bukan tidak mungkin menemui satu atau lebih posting yang menarik perhatian. Namun Anda tidak memiliki kapasitas untuk meninggalkan komentar relevan, sebaiknya jangan dipaksakan untuk berkomentar. Oleh karena komentar yang Anda tinggalkan boleh jadi tidak merupakan sebuah asupan yang berarti bagi pengelola blog atau penulis posting atau pengunjung lain, bahkan bagi posting itu sendiri. Sehingga tidak jarang dianggap sebagai — eksplisit — komentar spam.
Hal ini pernah terjadi pada penulis, dimana suatu saat pernah memberikan komentar dengan memasukkan nama sebenarnya & email yang original, namun memberikan tautan (URL) pada posting tertentu dalam blog penulis. Meskipun secara de facto itu sah, tetapi secara etika mungkin keliru. Bagaimana etika yang benar? Cobalah selalu memperhatikan tanda-tanda di sekeliling formulir komentar.
Nama
Apakah Anda memiliki identitas? Ya, tentu. Nama saya “Aris Asmara” — bukan “Botol Kecap No.1” — sehingga ketika seseorang memanggil akan lebih memiliki makna, Hei, Aris Asmara. Bandingkan dengan panggilan berikut, Hei, Botol Kecap. Jadi, isi kolom nama dengan nama & bukan produk atau lainnya.
Email
Dimana rumah Anda? Jika seseorang — sesuatu — ingin mengenal Anda dan dapat mem-validitasi tempat tinggal Anda, maka suatu saat dia akan mudah menghubungi Anda kembali. Rumah merupakan tempat tinggal, sudah barang tentu berisi validitas informasi tentang profil Anda, termasuk nama serta foto. Sayangnya, sistem komentar Blogger™ tidak/belum memasukkan input ini sebagai alternatif, kecuali jika blog hanya dikomentari oleh pengguna yang teregistrasi pada akun Google Mail.
URL
Apa brand Anda? “Fortuner SUV Terbaik” atau “Optimasi Blog”. “Fortuner SUV Terbaik” merupakan hasil produk & “Optimasi Blog” adalah brand. Sebuah etika apabila Anda memasukkan alamat blog, bukan alamat posting (post permalink) pada bilah URL (Uniform Resource Locator).
Komentar
Bagaimana komentar Anda tentang isi posting? Komentar bukan merupakan sebuah reaksi praktis atau pemungutan suara, seperti Posting yang menarik, Terima kasih infonya, Boleh dicoba postingannya, dan sebagainya. Komentar merupakan ide yang muncul karena keingintahuan akan kebenaran dari isi posting, mungkin berisi pertanyaan, tanggapan, masukan, atau sanggahan.
Pertanyaan dalam komentar pun bukan hanya sambil lalu, namun memerlukan tindak lanjut. Jika pertanyaan Anda berkategori sambil lalu, sebaiknya tidak perlu berkomentar. Pengelola blog, penulis, dan pengunjung lain akan mengetahui bahwa Anda hanya menjaring trafik.
Tanggapan dapat berarti memberikan balasan pada suatu komentar. Manfaatkan fasilitas ini jika komentar Anda memiliki keterkaitan dengan induk komentar lain. Jangan membuat topik komentar baru, apabila isi dari komentar tersebut sudah memiliki topik yang sama.
Masukan memiliki arti yang mendalam pada komentar. Ia bisa memberikan perbaikan & pembaharuan, bahkan kesempurnaan bagi posting. Apalagi jika disertai dengan referensi yang jelas dan tepat.
Sanggahan dapat timbul, jika isi posting kurang/tidak sesuai dengan pendapat atau opini komentator. Sama halnya dengan “masukan”, sanggahan yang menjurus pada perbedaan nyata (kontradiksi) seharusnya disertai pula dengan referensi yang jelas dan akurat. Bagaimana jika sanggahan tersebut tidak beralasan sama sekali? Berarti komentator hanya menginginkan trafik dengan cara negatif atau komentar sanggahan yang disampaikan hanya akal-akalan agar pengelola blog, penulis, maupun pengunjung lain tertarik untuk mengunjungi situs web atau blog-nya.
Simpulan
Penulis rasa etika berkomentar bukan merupakan sebuah informasi baru yang patut dijadikan berita hangat, namun lebih kepada kesadaran pribadi akan makna komentar itu sendiri. Berikut beberapa poin yang dapat kita ambil dari uraian posting etika berkomentar di atas.
Anda berkomentar untuk siapa? Anda pribadi karena rasa keingintahuan atau bagi khalayak blogger atau trafik dan backlink untuk kepentingan situs web atau blog Anda. Jika Anda mementingkan trafik dan backlink, sebaiknya jangan berkomentar. Oleh karena isi komentar belum tentu akan berhubungan dengan posting yang Anda komentari. Sebaliknya jika Anda berkomentar karena rasa keingintahuan atau bagi khalayak blogger, berarti Anda telah memberi sebuah arti pada posting & komentar itu sendiri. Secara tidak langsung, trafik dan backlink akan menyusul akibat komentar Anda yang penuh arti.
Perhatikan tanda-tanda yang dapat menjadi acuan dalam memberikan komentar — tanda baca, tag-tag HTML yang diperbolehkan, dan sebagainya — agar mendukung ‘keterbacaan’.
Masukkan nama jelas Anda — bukan yang lain —, email (jika dibutuhkan), URL blog dan bukan URL posting Anda. Apabila hal itu tidak terpenuhi, sangat dimungkinkan pengelola blog, penulis, atau pengunjung lain memberikan ‘cap’ sebagai komentar spam.
Terakhir untuk meluruskan beberapa pemberitaan yang keliru — padahal update telah dilakukan pada beberapa posting sebelumnya — bahwa Optimasi Blog tidak dofollow. Ketika sebuah blog menerapkan sistem komentar bersarang (threaded comments) pada Blogger™, mungkin dapat dipastikan blog tersebut nofollow.
Jadikan diri kita dan situs web atau blog yang kita kelola dapat memberikan makna bagi orang lain. Silakan Anda berkomentar atau tidak perlu berkomentar sama sekali!
Ketika Anda mengunjungi sebuah blog, bukan tidak mungkin menemui satu atau lebih posting yang menarik perhatian. Namun Anda tidak memiliki kapasitas untuk meninggalkan komentar relevan, sebaiknya jangan dipaksakan untuk berkomentar. Oleh karena komentar yang Anda tinggalkan boleh jadi tidak merupakan sebuah asupan yang berarti bagi pengelola blog atau penulis posting atau pengunjung lain, bahkan bagi posting itu sendiri. Sehingga tidak jarang dianggap sebagai — eksplisit — komentar spam.
Hal ini pernah terjadi pada penulis, dimana suatu saat pernah memberikan komentar dengan memasukkan nama sebenarnya & email yang original, namun memberikan tautan (URL) pada posting tertentu dalam blog penulis. Meskipun secara de facto itu sah, tetapi secara etika mungkin keliru. Bagaimana etika yang benar? Cobalah selalu memperhatikan tanda-tanda di sekeliling formulir komentar.
Nama
Apakah Anda memiliki identitas? Ya, tentu. Nama saya “Aris Asmara” — bukan “Botol Kecap No.1” — sehingga ketika seseorang memanggil akan lebih memiliki makna, Hei, Aris Asmara. Bandingkan dengan panggilan berikut, Hei, Botol Kecap. Jadi, isi kolom nama dengan nama & bukan produk atau lainnya.
Email
Dimana rumah Anda? Jika seseorang — sesuatu — ingin mengenal Anda dan dapat mem-validitasi tempat tinggal Anda, maka suatu saat dia akan mudah menghubungi Anda kembali. Rumah merupakan tempat tinggal, sudah barang tentu berisi validitas informasi tentang profil Anda, termasuk nama serta foto. Sayangnya, sistem komentar Blogger™ tidak/belum memasukkan input ini sebagai alternatif, kecuali jika blog hanya dikomentari oleh pengguna yang teregistrasi pada akun Google Mail.
URL
Apa brand Anda? “Fortuner SUV Terbaik” atau “Optimasi Blog”. “Fortuner SUV Terbaik” merupakan hasil produk & “Optimasi Blog” adalah brand. Sebuah etika apabila Anda memasukkan alamat blog, bukan alamat posting (post permalink) pada bilah URL (Uniform Resource Locator).
Komentar
Bagaimana komentar Anda tentang isi posting? Komentar bukan merupakan sebuah reaksi praktis atau pemungutan suara, seperti Posting yang menarik, Terima kasih infonya, Boleh dicoba postingannya, dan sebagainya. Komentar merupakan ide yang muncul karena keingintahuan akan kebenaran dari isi posting, mungkin berisi pertanyaan, tanggapan, masukan, atau sanggahan.
Pertanyaan dalam komentar pun bukan hanya sambil lalu, namun memerlukan tindak lanjut. Jika pertanyaan Anda berkategori sambil lalu, sebaiknya tidak perlu berkomentar. Pengelola blog, penulis, dan pengunjung lain akan mengetahui bahwa Anda hanya menjaring trafik.
Tanggapan dapat berarti memberikan balasan pada suatu komentar. Manfaatkan fasilitas ini jika komentar Anda memiliki keterkaitan dengan induk komentar lain. Jangan membuat topik komentar baru, apabila isi dari komentar tersebut sudah memiliki topik yang sama.
Masukan memiliki arti yang mendalam pada komentar. Ia bisa memberikan perbaikan & pembaharuan, bahkan kesempurnaan bagi posting. Apalagi jika disertai dengan referensi yang jelas dan tepat.
Sanggahan dapat timbul, jika isi posting kurang/tidak sesuai dengan pendapat atau opini komentator. Sama halnya dengan “masukan”, sanggahan yang menjurus pada perbedaan nyata (kontradiksi) seharusnya disertai pula dengan referensi yang jelas dan akurat. Bagaimana jika sanggahan tersebut tidak beralasan sama sekali? Berarti komentator hanya menginginkan trafik dengan cara negatif atau komentar sanggahan yang disampaikan hanya akal-akalan agar pengelola blog, penulis, maupun pengunjung lain tertarik untuk mengunjungi situs web atau blog-nya.
Simpulan
Penulis rasa etika berkomentar bukan merupakan sebuah informasi baru yang patut dijadikan berita hangat, namun lebih kepada kesadaran pribadi akan makna komentar itu sendiri. Berikut beberapa poin yang dapat kita ambil dari uraian posting etika berkomentar di atas.
Anda berkomentar untuk siapa? Anda pribadi karena rasa keingintahuan atau bagi khalayak blogger atau trafik dan backlink untuk kepentingan situs web atau blog Anda. Jika Anda mementingkan trafik dan backlink, sebaiknya jangan berkomentar. Oleh karena isi komentar belum tentu akan berhubungan dengan posting yang Anda komentari. Sebaliknya jika Anda berkomentar karena rasa keingintahuan atau bagi khalayak blogger, berarti Anda telah memberi sebuah arti pada posting & komentar itu sendiri. Secara tidak langsung, trafik dan backlink akan menyusul akibat komentar Anda yang penuh arti.
Perhatikan tanda-tanda yang dapat menjadi acuan dalam memberikan komentar — tanda baca, tag-tag HTML yang diperbolehkan, dan sebagainya — agar mendukung ‘keterbacaan’.
Masukkan nama jelas Anda — bukan yang lain —, email (jika dibutuhkan), URL blog dan bukan URL posting Anda. Apabila hal itu tidak terpenuhi, sangat dimungkinkan pengelola blog, penulis, atau pengunjung lain memberikan ‘cap’ sebagai komentar spam.
Terakhir untuk meluruskan beberapa pemberitaan yang keliru — padahal update telah dilakukan pada beberapa posting sebelumnya — bahwa Optimasi Blog tidak dofollow. Ketika sebuah blog menerapkan sistem komentar bersarang (threaded comments) pada Blogger™, mungkin dapat dipastikan blog tersebut nofollow.
Jadikan diri kita dan situs web atau blog yang kita kelola dapat memberikan makna bagi orang lain. Silakan Anda berkomentar atau tidak perlu berkomentar sama sekali!
Di samping mengandalkan kemampuan & keterampilan sendiri — diperoleh melalui belajar maupun pengalaman — tidak terlepas pula dengan kebutuhan alat bantu untuk mendukung blogging. Dari sekian banyak situs web yang membantu aktivitas blogging, terdapat beberapa yang menyediakan tool secara online. Nah, berikut sedikit deskripsi dari beberapa online tool yang membantu “Optimasi Blog” dalam menghasilkan karya-karyanya.
Tool ini akan membantu untuk menghitung CSS agar memiliki ritme vertikal yang konsisten. Perhitungan menggunakan pixels (px) dan M (em). Cara penggunaannya tidak sulit, kita tinggal memasukkan jenis font, ukuran font dasar, besar line-height, & ukuran font yang ditargetkan dalam skala pixels. Berikut hasil uji coba vertical rhythm berdasarkan font yang berukuran 12px dan 18px, sedangkan font yang saya gunakan adalah Georgia, Times, "Times New Roman", serif berukuran .9375em atau 15px dan line-height: 1.6em; atau 24px. (red: baca kembali posting yang berjudul Sentuhan Magis dalam Blog).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero, sed bibendum quam nunc quis quam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero.
Penggunaan sangat mudah, kita hanya perlu mengklik “Copy to Clipboard”, kemudian tempel pada kertas aplikasi seperti notepad dan sejenisnya. Tersedia pula beberapa pilihan jenis font yang akan/ingin kita gunakan dalam membangun sebuah situs web atau blog.
font-family: Georgia, Times, "Times New Roman", serif;
Sistem variabel grid adalah cara cepat untuk menghasilkan beberapa jaringan (kotak) CSS yang mendasari pembuatan situs web atau blog. File yang dihasilkan CSS didasarkan pada “Sistem Grid 960”. Salah satu manfaat dalam penggunaan tool ini adalah pengguna dapat dengan mudah mengatur responsif desain situs web atau blog-nya. Pun kita dapat melakukan berbagai kustomisasi lebar kolom, jumlah kolom, jarak antar kolom, & lebar konten.
Bagaimana cara kita agar mengetahui desain situs web atau blog responsif? Tool ini dapat menjadi salah satu alternatif untuk mengamati tampilan situs web atau blog pada beberapa layar yang berbeda. Cukup dengan memasukkan alamat situs atau blog, kemudian klik “Go” atau eksekusi dengan menekan tombol Enter pada papan ketik.
Sungguh sesuatu hal yang menyenangkan, ketika kita membuat pengkodean atau menulis posting/artikel dengan menggunakan entitas HTML tertentu. Ingat! Lakukan pembaharuan terhadap peramban kesayangan Anda.
Awas! Jangan menggunakan tips ini, karena mengandung ☢. Anda akan terbius atau ketagihan memakainya, apalagi jika berbintang ♈. “Khusus ♂”, harap menggunakan pengaman. Menurut penelitian, ❷ di antara ➉ peristiwa terjadi disebabkan kelalaian. Ketika ✍ perhatikan selalu tanda baca agar posting Anda tidak ter-✄ oleh pindaian para pengunjung — mendengar ♫ akan menimbulkan perasaan ♡ — gunakan ✉ atau ✆, sehingga tiap ✗ dapat diminimalisasi. Atau blog Anda akan di-asing-kan ke planet ♇.
Online tool ini bermanfaat untuk mengetahui format outline heading pada struktur situs web atau blog dalam HTML5, seperti h1, h2,… ,h6. Alat ini dapat melakukan pengecekan terhadap format outliner, baik melalui berkas file HTML, URL (Uniform Resource Locator), &input kode.
Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.
Untuk proses pemampatan sumber kode, baik CSS maupun JavaScript, tool ini dapat diandalkan. Kita dapat memasukkan text, URL, atau file, kemudian klik “Compress” untuk melihat hasilnya. Terdapat pula beberapa opsi pemampatan yang dapat kita pergunakan, sebelum memperoleh hasil yang diinginkan. Lebih detail tentang online tool ini, silakan baca posting berjudul Kompres Kode CSS dan Javascript.
Smush.it menggunakan teknik optimasi khusus untuk format gambar yang tidak perlu untuk menghapus byte dari file gambar. Ini adalah perangkat “lossless”, yang berarti mengoptimalkan gambar tanpa mengubah tampilan atau kualitas visual. Setelah Smush.it berjalan pada halaman web, akan ada laporan berapa banyak byte akan diselamatkan dengan mengoptimalkan gambar halaman dan menyediakan file zip download dengan file gambar diminimalkan.
Berkas robots.txt (sering keliru disebut robot.txt, dalam bentuk tunggal) yang dibuat oleh webmaster untuk menandai (melarang) file& direktori dari sebuah situs web untuk diakses oleh spider mesin pencari (dan jenis-jenis robot lain). Pengecek robots.txt ini merupakan "validator" yang menganalisis sintaks dari sebuah file robots.txt untuk melihat apakah format berlaku sebagaimana ditetapkan oleh A Standard for Robot Exclusion (silakan baca dokumentasi & tutorial untuk mempelajari dasar-dasar) atau jika mengandung kesalahan dalam pengecekan.
Online tool ini dapat membantu jika kita ingin membuat suatu pengkodean tertentu, dimana disediakan empat kotak dengan input kode tertentu pula, seperti HTML, CSS, JavaScript, dan Result (hasil). Pun terdapat berbagai opsi pada tab di sebelah kiri layar.
Alat Uji Keterbacaan menyediakan cara cepat dan mudah untuk menguji pembacaan pekerjaan kita. Ini adalah perangkat lunak pembacaan yang paling fleksibel untuk menilai formula keterbacaan. Kita dapat menguji semua, atau bagian dari suatu halaman web, atau cukup mengetik teks. Taut langsung dari halaman situs web atau blog, kemudian online tool ini akan menghitung hasil untuk halaman tersebut.
Ketika kita ingin mengecek performa situs web atau blog, perangkat GTmetrix merupakan alternatif yang dapat diandalkan. Selain menilai performa, ia juga memberikan deskripsi tentang cara mengoptimalkan serta beberapa taut rekomendasi yang dapat dimanfaatkan oleh pengguna.
Di antara sekian online tool yang dapat membantu dalam aktivitas blogging di atas, mungkin masih banyak alat atau perangkat lain yang tidak dapat penulis sebutkan. Tinggal bagaimana kita memanfaatkannya, sehingga mampu ‘mendongkrak’ performa situs web atau blog yang kita kelola agar lebih efektif & efesien, berguna, serta memberikan kenyamanan di hati para pembacanya. So, bagaimana dengan Anda?
Di samping mengandalkan kemampuan & keterampilan sendiri — diperoleh melalui belajar maupun pengalaman — tidak terlepas pula dengan kebutuhan alat bantu untuk mendukung blogging. Dari sekian banyak situs web yang membantu aktivitas blogging, terdapat beberapa yang menyediakan tool secara online. Nah, berikut sedikit deskripsi dari beberapa online tool yang membantu “Optimasi Blog” dalam menghasilkan karya-karyanya.
Tool ini akan membantu untuk menghitung CSS agar memiliki ritme vertikal yang konsisten. Perhitungan menggunakan pixels (px) dan M (em). Cara penggunaannya tidak sulit, kita tinggal memasukkan jenis font, ukuran font dasar, besar line-height, & ukuran font yang ditargetkan dalam skala pixels. Berikut hasil uji coba vertical rhythm berdasarkan font yang berukuran 12px dan 18px, sedangkan font yang saya gunakan adalah Georgia, Times, "Times New Roman", serif berukuran .9375em atau 15px dan line-height: 1.6em; atau 24px. (red: baca kembali posting yang berjudul Sentuhan Magis dalam Blog).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero, sed bibendum quam nunc quis quam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero.
Penggunaan sangat mudah, kita hanya perlu mengklik “Copy to Clipboard”, kemudian tempel pada kertas aplikasi seperti notepad dan sejenisnya. Tersedia pula beberapa pilihan jenis font yang akan/ingin kita gunakan dalam membangun sebuah situs web atau blog.
font-family: Georgia, Times, "Times New Roman", serif;
Sistem variabel grid adalah cara cepat untuk menghasilkan beberapa jaringan (kotak) CSS yang mendasari pembuatan situs web atau blog. File yang dihasilkan CSS didasarkan pada “Sistem Grid 960”. Salah satu manfaat dalam penggunaan tool ini adalah pengguna dapat dengan mudah mengatur responsif desain situs web atau blog-nya. Pun kita dapat melakukan berbagai kustomisasi lebar kolom, jumlah kolom, jarak antar kolom, & lebar konten.
Bagaimana cara kita agar mengetahui desain situs web atau blog responsif? Tool ini dapat menjadi salah satu alternatif untuk mengamati tampilan situs web atau blog pada beberapa layar yang berbeda. Cukup dengan memasukkan alamat situs atau blog, kemudian klik “Go” atau eksekusi dengan menekan tombol Enter pada papan ketik.
Sungguh sesuatu hal yang menyenangkan, ketika kita membuat pengkodean atau menulis posting/artikel dengan menggunakan entitas HTML tertentu. Ingat! Lakukan pembaharuan terhadap peramban kesayangan Anda.
Awas! Jangan menggunakan tips ini, karena mengandung ☢. Anda akan terbius atau ketagihan memakainya, apalagi jika berbintang ♈. “Khusus ♂”, harap menggunakan pengaman. Menurut penelitian, ❷ di antara ➉ peristiwa terjadi disebabkan kelalaian. Ketika ✍ perhatikan selalu tanda baca agar posting Anda tidak ter-✄ oleh pindaian para pengunjung — mendengar ♫ akan menimbulkan perasaan ♡ — gunakan ✉ atau ✆, sehingga tiap ✗ dapat diminimalisasi. Atau blog Anda akan di-asing-kan ke planet ♇.
Online tool ini bermanfaat untuk mengetahui format outline heading pada struktur situs web atau blog dalam HTML5, seperti h1, h2,… ,h6. Alat ini dapat melakukan pengecekan terhadap format outliner, baik melalui berkas file HTML, URL (Uniform Resource Locator), &input kode.
Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.
Untuk proses pemampatan sumber kode, baik CSS maupun JavaScript, tool ini dapat diandalkan. Kita dapat memasukkan text, URL, atau file, kemudian klik “Compress” untuk melihat hasilnya. Terdapat pula beberapa opsi pemampatan yang dapat kita pergunakan, sebelum memperoleh hasil yang diinginkan. Lebih detail tentang online tool ini, silakan baca posting berjudul Kompres Kode CSS dan Javascript.
Smush.it menggunakan teknik optimasi khusus untuk format gambar yang tidak perlu untuk menghapus byte dari file gambar. Ini adalah perangkat “lossless”, yang berarti mengoptimalkan gambar tanpa mengubah tampilan atau kualitas visual. Setelah Smush.it berjalan pada halaman web, akan ada laporan berapa banyak byte akan diselamatkan dengan mengoptimalkan gambar halaman dan menyediakan file zip download dengan file gambar diminimalkan.
Berkas robots.txt (sering keliru disebut robot.txt, dalam bentuk tunggal) yang dibuat oleh webmaster untuk menandai (melarang) file& direktori dari sebuah situs web untuk diakses oleh spider mesin pencari (dan jenis-jenis robot lain). Pengecek robots.txt ini merupakan "validator" yang menganalisis sintaks dari sebuah file robots.txt untuk melihat apakah format berlaku sebagaimana ditetapkan oleh A Standard for Robot Exclusion (silakan baca dokumentasi & tutorial untuk mempelajari dasar-dasar) atau jika mengandung kesalahan dalam pengecekan.
Online tool ini dapat membantu jika kita ingin membuat suatu pengkodean tertentu, dimana disediakan empat kotak dengan input kode tertentu pula, seperti HTML, CSS, JavaScript, dan Result (hasil). Pun terdapat berbagai opsi pada tab di sebelah kiri layar.
Alat Uji Keterbacaan menyediakan cara cepat dan mudah untuk menguji pembacaan pekerjaan kita. Ini adalah perangkat lunak pembacaan yang paling fleksibel untuk menilai formula keterbacaan. Kita dapat menguji semua, atau bagian dari suatu halaman web, atau cukup mengetik teks. Taut langsung dari halaman situs web atau blog, kemudian online tool ini akan menghitung hasil untuk halaman tersebut.
Ketika kita ingin mengecek performa situs web atau blog, perangkat GTmetrix merupakan alternatif yang dapat diandalkan. Selain menilai performa, ia juga memberikan deskripsi tentang cara mengoptimalkan serta beberapa taut rekomendasi yang dapat dimanfaatkan oleh pengguna.
Di antara sekian online tool yang dapat membantu dalam aktivitas blogging di atas, mungkin masih banyak alat atau perangkat lain yang tidak dapat penulis sebutkan. Tinggal bagaimana kita memanfaatkannya, sehingga mampu ‘mendongkrak’ performa situs web atau blog yang kita kelola agar lebih efektif & efesien, berguna, serta memberikan kenyamanan di hati para pembacanya. So, bagaimana dengan Anda?
