What's New Here?

Showing posts with label Tips Blogging. Show all posts
Showing posts with label Tips Blogging. Show all posts

Tabulasi Pengkodean dalam Blog

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.

DeskrisiTag HTML
Blok paragraf<p>…</p>
Daftar terurut<ol><li>…</li><li>…</li></ol>
Daftar tidak terurut<ul><li>…</li><li>…</li></ul>
Daftar definisi<dl><dt>…</dt><dd>…</dd><dd>…</dd>
<dt>…</dt><dd>…</dd><dd>…</dd></dl>
Kutipan<q>…</q>
Blok kutipan<blockquote><p>…</p></blockquote>
Teks tebal<strong>…</strong>, <b>…</b>
Teks miring<em>…</em>, <i>…</i>
Teks bebas<pre>…</pre>
Blok kode<pre><code>…</code></pre>
Kepanjangan dari<abbr title="">…</abbr>
Teks penting<mark>…</mark>
Teks Kode<code>…</code>
Teks tombol papan ketik<kbd>…</kbd>
Teks dihapus<del>…</del>
Teks superskrip<sup>…</sup>
Teks subskrip<sub>…</sub>
Teks Pranala<a href="" title="">…</a>
Penanda gambar<img src="" alt="" width="" height=""…/>
TabelMenata pembuatan tabel dalam blog
Figure/Lampiran<figure>…<figcaption>…</figcaption></figure>

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
DeskripsiTandaSimbol HTMLNumerik
Ampersand&&amp;&#38;
Spasi &nbsp;&#160;
Lebih kurang±&plusmn;&#177;
Pecahan ¼¼&frac14;&#188;
Pecahan ½½&frac12;&#189;
Pecahan ¾¾&frac34;&#190;
Perkalian×&times;&#215;
Pembagian÷&divide;&#247;
Tanda pisah En&ndash;&#8211;
Tanda pisah Em&mdash;&#8212;
Tanda petik pembuka tunggal&lsquo;&#8216;
Tanda petik penutup tunggal&rsquo;&#8217;
Tanda petik pembuka ganda&ldquo;&#8220;
Tanda petik penutup ganda&rdquo;&#8221;
Ellipsis&hellip;&#8230;
Menit&prime;&#8242;
Detik&Prime;&#8243;

Beberapa uraian penjelas tentang penggunaan simbol beberapa tanda baca adalah sebagai berikut:

  • Perkalian &times; akan lebih baik daripada menekan tombol X pada papan ketik.
  • Pembagian &divide; akan lebih baik daripada menekan tombol / pada papan ketik.
  • Tanda petik, menit, atau detik &lsquo;, &rsquo;, &ldquo;, &rdquo;, &prime;, dan &Prime; akan lebih baik daripada menekan tombol ' dan " pada papan ketik.
  • Tanda pisah &ndash; dan &mdash; akan lebih baik daripada menekan tombol - pada papan ketik.
    • Penggunaan &ndash; yang berarti “sampai dengan”, contoh:
      2012 – 2013
    • Penggunaan &mdash; 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.

Code is poetry
—ς∞ς—

Tabulasi Pengkodean dalam Blog

Posted by rike No comments

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.

DeskrisiTag HTML
Blok paragraf<p>…</p>
Daftar terurut<ol><li>…</li><li>…</li></ol>
Daftar tidak terurut<ul><li>…</li><li>…</li></ul>
Daftar definisi<dl><dt>…</dt><dd>…</dd><dd>…</dd>
<dt>…</dt><dd>…</dd><dd>…</dd></dl>
Kutipan<q>…</q>
Blok kutipan<blockquote><p>…</p></blockquote>
Teks tebal<strong>…</strong>, <b>…</b>
Teks miring<em>…</em>, <i>…</i>
Teks bebas<pre>…</pre>
Blok kode<pre><code>…</code></pre>
Kepanjangan dari<abbr title="">…</abbr>
Teks penting<mark>…</mark>
Teks Kode<code>…</code>
Teks tombol papan ketik<kbd>…</kbd>
Teks dihapus<del>…</del>
Teks superskrip<sup>…</sup>
Teks subskrip<sub>…</sub>
Teks Pranala<a href="" title="">…</a>
Penanda gambar<img src="" alt="" width="" height=""…/>
TabelMenata pembuatan tabel dalam blog
Figure/Lampiran<figure>…<figcaption>…</figcaption></figure>

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
DeskripsiTandaSimbol HTMLNumerik
Ampersand&&amp;&#38;
Spasi &nbsp;&#160;
Lebih kurang±&plusmn;&#177;
Pecahan ¼¼&frac14;&#188;
Pecahan ½½&frac12;&#189;
Pecahan ¾¾&frac34;&#190;
Perkalian×&times;&#215;
Pembagian÷&divide;&#247;
Tanda pisah En&ndash;&#8211;
Tanda pisah Em&mdash;&#8212;
Tanda petik pembuka tunggal&lsquo;&#8216;
Tanda petik penutup tunggal&rsquo;&#8217;
Tanda petik pembuka ganda&ldquo;&#8220;
Tanda petik penutup ganda&rdquo;&#8221;
Ellipsis&hellip;&#8230;
Menit&prime;&#8242;
Detik&Prime;&#8243;

Beberapa uraian penjelas tentang penggunaan simbol beberapa tanda baca adalah sebagai berikut:

  • Perkalian &times; akan lebih baik daripada menekan tombol X pada papan ketik.
  • Pembagian &divide; akan lebih baik daripada menekan tombol / pada papan ketik.
  • Tanda petik, menit, atau detik &lsquo;, &rsquo;, &ldquo;, &rdquo;, &prime;, dan &Prime; akan lebih baik daripada menekan tombol ' dan " pada papan ketik.
  • Tanda pisah &ndash; dan &mdash; akan lebih baik daripada menekan tombol - pada papan ketik.
    • Penggunaan &ndash; yang berarti “sampai dengan”, contoh:
      2012 – 2013
    • Penggunaan &mdash; 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.

Code is poetry
—ς∞ς—

Bentuk Halaman Unik di Blog

Aktor Unik
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.

Bentuk Halaman Unik di Blog

Posted by rike No comments

Aktor Unik
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.

Optimalisasi Konten dalam Blog

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”).

<p></p>
<span class="amp">&amp;</span>
<a href=""></a>
<em></em>
<strong></strong>
&ldquo; &rdquo;
&lsquo; &rsquo;
&#45;
&ndash;
&mdash;
&trade;
<pre><code></code></pre>
<code></code>
<abbr title=""></abbr>
<span style=""></span>
<blockquote><p></p></blockquote>
<q></q>
<img class="" src="" alt="" width="" height="" style=""/>
<a href="" title=""><img class="" src="" alt="" width="" height="" style=""/></a>
<ul><li></li><li></li></ul>
<ol><li></li><li></li></ol>
<cite><a href="" title=""></a></cite>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<figure><img src="" alt="" width="" height=""/><figcaption></figcaption></figure>
<table><caption></caption><tr><th></th><th></th></tr><tr><td></td><td></td></tr></table>

Menulis Teks Jangkar yang lebih Baik

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.

Optimalisasi Konten dalam Blog

Posted by rike No comments

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”).

<p></p>
<span class="amp">&amp;</span>
<a href=""></a>
<em></em>
<strong></strong>
&ldquo; &rdquo;
&lsquo; &rsquo;
&#45;
&ndash;
&mdash;
&trade;
<pre><code></code></pre>
<code></code>
<abbr title=""></abbr>
<span style=""></span>
<blockquote><p></p></blockquote>
<q></q>
<img class="" src="" alt="" width="" height="" style=""/>
<a href="" title=""><img class="" src="" alt="" width="" height="" style=""/></a>
<ul><li></li><li></li></ul>
<ol><li></li><li></li></ol>
<cite><a href="" title=""></a></cite>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<figure><img src="" alt="" width="" height=""/><figcaption></figcaption></figure>
<table><caption></caption><tr><th></th><th></th></tr><tr><td></td><td></td></tr></table>

Menulis Teks Jangkar yang lebih Baik

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.

Optimalisasi Fungsi Peramban dalam Blogging

Jenis Peramban

Peramban merupakan perangkat lunak yang berfungsi menampilkan & melakukan interaksi dengan dokumen-dokumen yang disediakan oleh server web. Jenisnya pun bermacam-macam, antara lain Internet Explorer (IE), Firefox, Chrome, Opera dan lain-lain. Di antara beberapa peramban yang telah disebutkan tersebut, mungkin dapat kita kerucutkan menjadi dua yang paling sering digunakan, yakni Firefox & Chrome. Nah, posting ini akan sedikit menjelaskan tentang optimalisasi fungsi peramban melalui “Inspect Elements’ dan sejumlah ekstensi (add-ons) yang perlu diunduh untuk menunjang aktivitas blogging.

Inspect Elements

Fungsi ini dapat kita manfaatkan, ketika melakukan klik kanan pada sebuah halaman web agar mengetahui struktur pengkodean, namun jangan disalahgunakan untuk meniru secara menyeluruh format template. Oleh karena sebuah desain situs web atau blog mempunyai hak cipta bagi perancangnya, mungkin sebuah pengecualian jika kita meletakkan taut situs perancang & meminta izin, apakah kita boleh menggunakan desain tersebut.

Kembali pada fungsi “Inspect Elements”, ketika diklik akan muncul — di bagian bawah peramban — tab yang biasanya memiliki dua kolom, sebelah kiri adalah HTML (HyperText Markup Language) dan kanan adalah CSS (Cascading Style Sheets). Meskipun ia mampu menampilkan lebih dari sekedar HTML dan CSS, apabila ditelusuri lebih mendalam.

Bagi Anda yang suka utak-atik template, “Inspect Elements” sangat berguna untuk mengatur — menambah, mengurangi, atau memperbaiki pengkodean — tampilan sebuah situs web atau blog melalui CSS (sebelah kanan). Kemudian kode itu kita salin dan tempel pada “Notepad” atau perangkat lunak teks editor kesayangan Anda. Seiring dengan perubahan pengkodean, maka tampilan situs web atau blog pada layar peramban akan berubah pula sesuai dengan kustomisasi kode. Syaratnya halaman yang diperiksa dan dikustomisasi tersebut tidak direfresh.

Inspect Element Firefox
Fungsi “Inspect Element” pada peramban Firefox.
Inspect Element Chrome
Fungsi “Inspect Element” pada peramban Chrome.

Catatan: Untuk memeriksa elemen tertentu, Anda dapat memanfaatkan “Select elements” (dilingkari dengan warna merah), kemudian pilih elemen dengan melakukan klik kiri pada tetikus.

Ekstensi (add-ons)

Firebug — untuk mengetahui struktur pengkodean suatu situs web atau blog, jika Anda terbiasa untuk menggunakannya dibanding dengan default pada tiap-tiap peramban (Firefox dan Chrome).

Color Tools — untuk mengetahui pewarnaan yang ditampilkan pada layar peramban, kebanyakkan pengguna menggunakan ekstensi “ColorZilla” (Firefox dan Chrome). Namun untuk firefox, saya lebih memilih “Rainbow Color Tools”.

Font Style — untuk mengetahui pengaturan font & line-height, sehingga diharapkan mampu menjaga irama vertikal suatu teks, walaupun ditampilkan dalam ukuran yang berbeda (Firefox dan Chrome).

Screen Capture — untuk mengambil gambar (screenshot) pada suatu halaman yang ditampilkan oleh peramban dengan ekstensi “Awesome Screenshot” (Firefox dan Chrome). Namun pada Chrome, saya lebih memilih ekstensi “Screen Capture”.

HTML5 Outliner — untuk mengetahui struktur garis bentuk HTML5 pada suatu situs web atau blog yang biasanya diperlihatkan oleh baris judul pada masing-masing elemen (Firefox dan Chrome).

HTML Microdata — untuk mengecek struktur microdata yang terdapat dalam suatu situs web atau blog. Sementara saya hanya menggunakan “Semantic Inspector” khusus pada Chrome.

Users Online — ekstensi ini dapat digunakan setelah terlebih dulu memasang script dari http://whos.amung.us, kemudian masukkan 8 – 12 karakter sitekey sesuai kode script yang dipasang dalam situs web atau blog. Umumnya penggunaan ekstensi ini adalah pada script whos.amung.us yang disembunyikan atau tidak menampilkan widget status online (Firefox dan Chrome).

Web Developer — untuk menambah sekumpulan alat yang dapat dimanfaatkan sebagai analisis rinci pada situs web atau blog. Biasanya saya menggunakannya untuk men-disable all style dalam CSS (Firefox dan Chrome).

Fungsi & ekstensi (add-ons) yang telah disebutkan di atas, hanya sebagian kecil yang mungkin dapat digunakan dalam aktivitas blogging. Tinggal sejauh mana upaya kita agar penggunaannya dapat optimal, terutama bagi peramban kesayangan. Hal ini diharapkan agar blogging bukan hanya dipandang sebuah aktivitas menulis atau menerbitkan posting semata, namun akan lebih memiliki nilai jika kita mampu belajar memahami & menyelami markah yang terkandung didalamnya. Expert? Tidak juga.

Optimalisasi Fungsi Peramban dalam Blogging

Posted by rike No comments

Jenis Peramban

Peramban merupakan perangkat lunak yang berfungsi menampilkan & melakukan interaksi dengan dokumen-dokumen yang disediakan oleh server web. Jenisnya pun bermacam-macam, antara lain Internet Explorer (IE), Firefox, Chrome, Opera dan lain-lain. Di antara beberapa peramban yang telah disebutkan tersebut, mungkin dapat kita kerucutkan menjadi dua yang paling sering digunakan, yakni Firefox & Chrome. Nah, posting ini akan sedikit menjelaskan tentang optimalisasi fungsi peramban melalui “Inspect Elements’ dan sejumlah ekstensi (add-ons) yang perlu diunduh untuk menunjang aktivitas blogging.

Inspect Elements

Fungsi ini dapat kita manfaatkan, ketika melakukan klik kanan pada sebuah halaman web agar mengetahui struktur pengkodean, namun jangan disalahgunakan untuk meniru secara menyeluruh format template. Oleh karena sebuah desain situs web atau blog mempunyai hak cipta bagi perancangnya, mungkin sebuah pengecualian jika kita meletakkan taut situs perancang & meminta izin, apakah kita boleh menggunakan desain tersebut.

Kembali pada fungsi “Inspect Elements”, ketika diklik akan muncul — di bagian bawah peramban — tab yang biasanya memiliki dua kolom, sebelah kiri adalah HTML (HyperText Markup Language) dan kanan adalah CSS (Cascading Style Sheets). Meskipun ia mampu menampilkan lebih dari sekedar HTML dan CSS, apabila ditelusuri lebih mendalam.

Bagi Anda yang suka utak-atik template, “Inspect Elements” sangat berguna untuk mengatur — menambah, mengurangi, atau memperbaiki pengkodean — tampilan sebuah situs web atau blog melalui CSS (sebelah kanan). Kemudian kode itu kita salin dan tempel pada “Notepad” atau perangkat lunak teks editor kesayangan Anda. Seiring dengan perubahan pengkodean, maka tampilan situs web atau blog pada layar peramban akan berubah pula sesuai dengan kustomisasi kode. Syaratnya halaman yang diperiksa dan dikustomisasi tersebut tidak direfresh.

Inspect Element Firefox
Fungsi “Inspect Element” pada peramban Firefox.
Inspect Element Chrome
Fungsi “Inspect Element” pada peramban Chrome.

Catatan: Untuk memeriksa elemen tertentu, Anda dapat memanfaatkan “Select elements” (dilingkari dengan warna merah), kemudian pilih elemen dengan melakukan klik kiri pada tetikus.

Ekstensi (add-ons)

Firebug — untuk mengetahui struktur pengkodean suatu situs web atau blog, jika Anda terbiasa untuk menggunakannya dibanding dengan default pada tiap-tiap peramban (Firefox dan Chrome).

Color Tools — untuk mengetahui pewarnaan yang ditampilkan pada layar peramban, kebanyakkan pengguna menggunakan ekstensi “ColorZilla” (Firefox dan Chrome). Namun untuk firefox, saya lebih memilih “Rainbow Color Tools”.

Font Style — untuk mengetahui pengaturan font & line-height, sehingga diharapkan mampu menjaga irama vertikal suatu teks, walaupun ditampilkan dalam ukuran yang berbeda (Firefox dan Chrome).

Screen Capture — untuk mengambil gambar (screenshot) pada suatu halaman yang ditampilkan oleh peramban dengan ekstensi “Awesome Screenshot” (Firefox dan Chrome). Namun pada Chrome, saya lebih memilih ekstensi “Screen Capture”.

HTML5 Outliner — untuk mengetahui struktur garis bentuk HTML5 pada suatu situs web atau blog yang biasanya diperlihatkan oleh baris judul pada masing-masing elemen (Firefox dan Chrome).

HTML Microdata — untuk mengecek struktur microdata yang terdapat dalam suatu situs web atau blog. Sementara saya hanya menggunakan “Semantic Inspector” khusus pada Chrome.

Users Online — ekstensi ini dapat digunakan setelah terlebih dulu memasang script dari http://whos.amung.us, kemudian masukkan 8 – 12 karakter sitekey sesuai kode script yang dipasang dalam situs web atau blog. Umumnya penggunaan ekstensi ini adalah pada script whos.amung.us yang disembunyikan atau tidak menampilkan widget status online (Firefox dan Chrome).

Web Developer — untuk menambah sekumpulan alat yang dapat dimanfaatkan sebagai analisis rinci pada situs web atau blog. Biasanya saya menggunakannya untuk men-disable all style dalam CSS (Firefox dan Chrome).

Fungsi & ekstensi (add-ons) yang telah disebutkan di atas, hanya sebagian kecil yang mungkin dapat digunakan dalam aktivitas blogging. Tinggal sejauh mana upaya kita agar penggunaannya dapat optimal, terutama bagi peramban kesayangan. Hal ini diharapkan agar blogging bukan hanya dipandang sebuah aktivitas menulis atau menerbitkan posting semata, namun akan lebih memiliki nilai jika kita mampu belajar memahami & menyelami markah yang terkandung didalamnya. Expert? Tidak juga.

Etika Berkomentar dalam Posting Blog

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!

Etika Berkomentar dalam Posting Blog

Posted by rike No comments

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!

Online Tool yang Membantu dalam Blogging

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.

CSS with vertical rhythm

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.

CSS Font Stack

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;

Variable Grid System

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.

The Responsinator

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.

HTML Entities

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 ♇.

HTML5 Outliner

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.

Lipsum Generator

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.

Online YUI Compressor

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™

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.

robots.txt Checker

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.

jsFiddle

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.

The Readability Test Tool

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.

GTmetrix

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?

Online Tool yang Membantu dalam Blogging

Posted by rike No comments

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.

CSS with vertical rhythm

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.

CSS Font Stack

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;

Variable Grid System

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.

The Responsinator

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.

HTML Entities

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 ♇.

HTML5 Outliner

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.

Lipsum Generator

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.

Online YUI Compressor

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™

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.

robots.txt Checker

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.

jsFiddle

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.

The Readability Test Tool

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.

GTmetrix

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?

Kustomisasi Setelan pada Preferensi Penelusuran

Posting kali ini akan memberikan informasi tentang beberapa pengaturan pada preferensi penelusuran yang mungkin layak untuk diketahui oleh para blogger. Adapun beberapa pengaturan yang telah disebutkan di atas menggunakan tampilan terbaru Blogger™, sedangkan untuk tampilan lama, kemungkinan akan kehilangan akses menu pengaturan ini.

Preferensi penelusuran

Tag meta: “Description”

Apabila narablog menggunakan item ini untuk menerjemahkan deskripsi blog, maka penggunaan baris kode tag meta di antara <head> … </head> berikut, tidak diperlukan lagi.

<meta content='deskripsi tentang blog Anda' name='description'/>

Kesalahan & pengalihan

Halaman Tidak Ditemukan

Istilah kerennya “Error404” atau page not found. Item ini berfungsi untuk melakukan kustomasi pada halaman yang tidak ditemukan ketika pengguna mengetikkan atau mencari alamat tertentu dalam blog. Defaultnya struktur pengkodean “halaman tidak ditemukan” akan berada dalam <div class='status-msg-wrap'> … <div>. Berikut merupakan contoh sederhana pengisian pada form “halaman tidak ditemukan”.

<h2>Halaman Tidak Ditemukan</h2><p>Maaf, halaman yang Anda cari tidak ada dalam arsip kami atau telah dipindahkan. Silakan klik tautan di bawah ini untuk kembali ke halaman depan.</p><a style="text-decoration:none;" href="h**p://namablog.blogspot.com/">Beranda</a>

Pengalihan (redirect)

Manfaat dari penggunaan pengaturan ini adalah mengalihkan alamat halaman tertentu ke alamat lain dalam blog yang sama. Pengalihan dilakukan — pada dasarnya — berhubungan erat dengan halaman yang tidak ditemukan dalam blog oleh karena telah dihapus, dipindahkan, dan/atau perubahan struktur permalink oleh pemilik blog. Contoh pengalihan dapat kita lihat sebagai berikut:

h**p://namablog.blogspot.com/2009/06/xxxxxx.html

Kemudian dialihkan ke alamat:

h**p://namablog.blogspot.com/2012/09/yyyyyyy.html

Sebagai tambahan, pengecekan terhadap tautan-tautan yang berkontribusi menimbulkan kesalahan dapat dilihat melalui menu “kesalahan perayapan” pada perkakas webmaster.

Perayap dan pengindeksan

Peringatan! Gunakan dengan hati-hati. Penggunaan yang tidak tepat dari fitur tersebut dapat mengakibatkan blog Anda diabaikan oleh mesin telusur.

robots.txt

Kustomisasi robots.txt dapat dimanfaatkan untuk mencegah perayapan mesin telusur terhadap halaman-halaman tertentu. Lebih jelas tentang robots.txt dapat dibaca pada posting About /robots.txt berdasarkan taut rekomendasi Blogger™. Contoh pengisian pada robots.txt:

User-agent: *
Disallow: /search/label/review
Disallow: /p/daftar-mesin-pencari.html
Disallow: /2011/06/ancala-real-estate.html
Sitemap: http://optimasi-blog.blogspot.com/sitemap.xml

Disallow akan memberitahukan kepada robot agar tidak mengunjungi halaman-halaman tersebut, dengan kata lain tidak dimasukkkan kedalam pengindeksan.

Sebagai tambahan, pengecekan terhadap tautan-tautan yang berkontribusi menimbulkan kesalahan dapat dilihat melalui menu “kesalahan perayapan” pada perkakas webmaster.

robots header tags

Berbagai pilihan yang dapat kita gunakan untuk kustomisasi robots header tags, dimana contoh pengaturannya — Optimasi Blog — seperti yang terlihat pada gambar di bawah ini.

robots header tags

Simpulan

Dengan mengetahui dan memahami kustomisasi pengaturan pada preferensi penelusuran setidak-tidaknya dapat menambah wawasan kita tentang bagaimana melakukan pengisian terhadap item-item tersebut. Dan tidaklah keliru jika kita juga memanfaatkannya — karena pada dasarnya memang telah dipersiapkan oleh pihak Developer — untuk lebih mengoptimalkan situs web/blog bermesin Blogger™ yang kita kelola.

Secara khusus untuk “robots header tags” menunjukkan bahwa persepsi saya selama ini salah besar untuk memasukkan markah di bawah ini sebagai robots header tags.

<meta content='INDEX, FOLLOW' name='robots'/>

Mengapa dikatakan salah besar? karena walaupun markah tersebut tidak dimasukkan pada template blog, ia telah ada lebih dulu atau merupakan default “robots header tags”.

Secara tidak langsung posting ini juga merupakan pembaharuan dari beberapa posting sebelumnya, seperti Memasang meta tags dan manfaatnya, Cara pasang title dan meta tags agar blog lebih SEO friendly, dan Tips search engine optimization (SEO) pada Blogger.com.

Jika narablog mempunyai pendapat lain mengenai kustomisasi pengaturan pada preferensi penelusuran, mari kita diskusikan pada kolom komentar.

Kustomisasi Setelan pada Preferensi Penelusuran

Posted by rike No comments

Posting kali ini akan memberikan informasi tentang beberapa pengaturan pada preferensi penelusuran yang mungkin layak untuk diketahui oleh para blogger. Adapun beberapa pengaturan yang telah disebutkan di atas menggunakan tampilan terbaru Blogger™, sedangkan untuk tampilan lama, kemungkinan akan kehilangan akses menu pengaturan ini.

Preferensi penelusuran

Tag meta: “Description”

Apabila narablog menggunakan item ini untuk menerjemahkan deskripsi blog, maka penggunaan baris kode tag meta di antara <head> … </head> berikut, tidak diperlukan lagi.

<meta content='deskripsi tentang blog Anda' name='description'/>

Kesalahan & pengalihan

Halaman Tidak Ditemukan

Istilah kerennya “Error404” atau page not found. Item ini berfungsi untuk melakukan kustomasi pada halaman yang tidak ditemukan ketika pengguna mengetikkan atau mencari alamat tertentu dalam blog. Defaultnya struktur pengkodean “halaman tidak ditemukan” akan berada dalam <div class='status-msg-wrap'> … <div>. Berikut merupakan contoh sederhana pengisian pada form “halaman tidak ditemukan”.

<h2>Halaman Tidak Ditemukan</h2><p>Maaf, halaman yang Anda cari tidak ada dalam arsip kami atau telah dipindahkan. Silakan klik tautan di bawah ini untuk kembali ke halaman depan.</p><a style="text-decoration:none;" href="h**p://namablog.blogspot.com/">Beranda</a>

Pengalihan (redirect)

Manfaat dari penggunaan pengaturan ini adalah mengalihkan alamat halaman tertentu ke alamat lain dalam blog yang sama. Pengalihan dilakukan — pada dasarnya — berhubungan erat dengan halaman yang tidak ditemukan dalam blog oleh karena telah dihapus, dipindahkan, dan/atau perubahan struktur permalink oleh pemilik blog. Contoh pengalihan dapat kita lihat sebagai berikut:

h**p://namablog.blogspot.com/2009/06/xxxxxx.html

Kemudian dialihkan ke alamat:

h**p://namablog.blogspot.com/2012/09/yyyyyyy.html

Sebagai tambahan, pengecekan terhadap tautan-tautan yang berkontribusi menimbulkan kesalahan dapat dilihat melalui menu “kesalahan perayapan” pada perkakas webmaster.

Perayap dan pengindeksan

Peringatan! Gunakan dengan hati-hati. Penggunaan yang tidak tepat dari fitur tersebut dapat mengakibatkan blog Anda diabaikan oleh mesin telusur.

robots.txt

Kustomisasi robots.txt dapat dimanfaatkan untuk mencegah perayapan mesin telusur terhadap halaman-halaman tertentu. Lebih jelas tentang robots.txt dapat dibaca pada posting About /robots.txt berdasarkan taut rekomendasi Blogger™. Contoh pengisian pada robots.txt:

User-agent: *
Disallow: /search/label/review
Disallow: /p/daftar-mesin-pencari.html
Disallow: /2011/06/ancala-real-estate.html
Sitemap: http://optimasi-blog.blogspot.com/sitemap.xml

Disallow akan memberitahukan kepada robot agar tidak mengunjungi halaman-halaman tersebut, dengan kata lain tidak dimasukkkan kedalam pengindeksan.

Sebagai tambahan, pengecekan terhadap tautan-tautan yang berkontribusi menimbulkan kesalahan dapat dilihat melalui menu “kesalahan perayapan” pada perkakas webmaster.

robots header tags

Berbagai pilihan yang dapat kita gunakan untuk kustomisasi robots header tags, dimana contoh pengaturannya — Optimasi Blog — seperti yang terlihat pada gambar di bawah ini.

robots header tags

Simpulan

Dengan mengetahui dan memahami kustomisasi pengaturan pada preferensi penelusuran setidak-tidaknya dapat menambah wawasan kita tentang bagaimana melakukan pengisian terhadap item-item tersebut. Dan tidaklah keliru jika kita juga memanfaatkannya — karena pada dasarnya memang telah dipersiapkan oleh pihak Developer — untuk lebih mengoptimalkan situs web/blog bermesin Blogger™ yang kita kelola.

Secara khusus untuk “robots header tags” menunjukkan bahwa persepsi saya selama ini salah besar untuk memasukkan markah di bawah ini sebagai robots header tags.

<meta content='INDEX, FOLLOW' name='robots'/>

Mengapa dikatakan salah besar? karena walaupun markah tersebut tidak dimasukkan pada template blog, ia telah ada lebih dulu atau merupakan default “robots header tags”.

Secara tidak langsung posting ini juga merupakan pembaharuan dari beberapa posting sebelumnya, seperti Memasang meta tags dan manfaatnya, Cara pasang title dan meta tags agar blog lebih SEO friendly, dan Tips search engine optimization (SEO) pada Blogger.com.

Jika narablog mempunyai pendapat lain mengenai kustomisasi pengaturan pada preferensi penelusuran, mari kita diskusikan pada kolom komentar.

Tips SEO pada Blogger.com Bagian Kedua

Ok! Kita akan lanjut pada ulasan tentang SEO. Perlu menjadi catatan penting bahwa posting ini merupakan kelanjutan posting sebelumnya. So, jika Anda terlewat untuk membacanya, saya menyediakan link untuk meloncat ke posting Tips Search Engine Optimization (SEO) pada Blogger.com sebelumnya.

Men-submit Blog ke Perkakas Webmaster

Tentu kita tidak asing lagi dengan yang namanya perkakas web. Betul, perkakas webmaster merupakan salah satu layanan google yang memungkinkan kita untuk mengoptimalkan blog agar terindeks dengan baik. Bagaimana caranya dapat anda baca pada posting Submit Sitemap Blogger.com di Google Webmaster Tools dan Solusi Submit Sitemap di Webmaster Tools.

Update (27 September 2012): cara men-submit situs web atau blog di tiga mesin pencari dapat dibaca pada posting Mendaftarkan Situs Web atau Blog ke Google, Yahoo dan Bing.

Link Building

Link building merupakan usaha untuk membangun tautan dengan menggunakan kata-kata yang mengandung keyword & sesuai dengan tema blog. Tautan dengan kata atau frase kata yang mengandung kata kunci berarti memperjelas target tema yang telah ditetapkan, sedangkan sesuai dengan tema dapat berati bahwa tautan-tautan tersebut mempertahankan tradisi kata kunci utama blog dalam search engine. Terkadang kita keliru mengartikan link building sebagai mengumpulkan tautan sebanyak-banyaknya tanpa mengindahkan kualitas dari kata kunci maupun web/blog yang kita beri tautan (sumber tautan).

Berikut merupakan daftar yang seharusnya kita lakukan dalam membangun tautan yang baik.

  • Menautkan kata kunci yang sesuai pada posting satu dengan lainnya dalam blog. Ini sesuai dengan posting tips SEO sebelumnya pada tahapan “Membuat Posting dengan hati SEO”.
  • Kata kunci pada tautan seharusnya menggambarkan dengan jelas tentang apa yang ditautkannya dengan sumber tautan. Dalam bahasa sederhana mungkin dapat dikatakan bahwa kata-kata dalam link menggambarkan sumber link tersebut. Contoh:
    • Jika Anda ingin membaca tentang SEO, silakan kunjungi posting [link]Tips Blogging SEO dalam posting[/link] dan [link]SEO dalam Tautan[/link].
    • Jika Anda ingin membaca tentang SEO, silakan kunjungi posting [link]di sini[/link] dan [link]di sana[/link].
    Berdasarkan contoh di atas, manakah menurut Anda tautan yang lebih ber-kualitas?
  • Sesekali buatlah sedikit ulasan (review) tentang sumber tautan yang berasal dari web/blog lain. Hal tersebut terkadang mendapat respon positif dari sang empu-nya tautan. Coba bayangkan, jika sumber tautan tetrtarik dengan review kita & kemudian membalas dengan tautan yang mengarah ke posting di blog kita. Bukankah hal tersebut lebih positif dibandingkan dengan “meminta” ditautkan?
  • Berkenaan dengan poin di atas, bagaimana web/blog lain akan tahu tentang isi posting kita, jika mereka tidak diberitahu. Banyak cara untuk menuju ke sana, salah satu jalan yang cukup ampuh adalah meninggalkan komentar yang relevan serta memiliki bobot dengan posting yang telah dibaca. Memang tidak akan menimbulkan banyak pengaruh di search engine, tetapi jika komentar kita tersebut berguna, maka secara tidak langsung pemilik web/blog & pengguna lain akan tertarik untuk mengunjungi blog kita.
  • Sebuah blog akan memiliki nilai tersendiri dalam search engine, jika link yang keluar lebih banyak daripada link yang masuk. Dan akan lebih besar lagi nilainya, jika link yang keluar ditaut oleh web/blog yang memiliki kesamaan tema. Jangan pula karena ingin menghindari link yang masuk, maka posting yang seharusnya bersumber pada posting lain, malah tidak mencantumkan tautan sumber tersebut. Ingat! kita telah melakukan repost, sehingga menjadi sebuah keharusan jika kita mencantumkan tautan sumber. Ironisnya lagi, kita telah mencantumkan tautan sumber, tetapi tautan tersebut memiliki properti rel="nofollow". Pernahkan Anda berpikir, seseorang mungkin butuh berhari-hari untuk menyempurnakan postingnya?
  • Mana yang lebih dominan, sebuah tautan yang me-link ke web/blog kita atau me-link ke posting kita? Mari kita diskusikan ini pada kolom komentar.
  • Tautkan blog & posting dengan beberapa blog directory, social network dan social bookmarking. Pembaharuan (04 Desember 2012): Terutama yang memberikan layanan berkualitas dan tidak mengharuskan pranala timbal balik.
  • Jangan lupa, tautkan pula blog & posting ke layanan feed. Tidak jarang narablog menemukan posting yang dia cari pada layanan ini. Untuk Blogger.com dapat menggunakan fasilitas feedburner, silakan membuka kembali posting terdahulu tentang Apa itu RSS FEED dan Cara berlangganan.

Tetaplah memposting dengan hasil karya orisinil Anda

Yah, ini merupakan langkah yang pasti dan akurat. Search engine akan lebih menghargai sebuah karya yang original. Bukan saja mesin saya kira, narablog pun pasti menghargainya. Apalagi karya tersebut memiliki alur yang jelas, mudah untuk dipahami & nyaman untuk dibaca. Tentu, karya yang dimaksud adalah tentang tulisan atau catatan kita di blog. Orisinil bukan berarti melakukan modifikasi kata-kata di sana-sini agar posting yang akan diterbitkan tampak berbeda dengan posting yang kita ‘contek’. Tetapi lebih kepada asal ide. Anda memiliki sebuah ide yang mungkin berbeda, tuangkanlah ide itu dalam suatu bentuk tulisan (posting/artikel).

Saya mempunyai sebuah ide, tapi ide tersebut melenceng dari tema blog saya. Bagaimana sebaiknya?

Wow, sebuah pertanyaan yang sulit. Terus terang saya sendiri mungkin belum/tidak menemukan jawaban yang tepat untuk masalah ini—ada, tetapi hasil meraba-raba. Bagaimana dengan Anda?

Tips SEO pada Blogger.com Bagian Kedua

Posted by rike No comments

Ok! Kita akan lanjut pada ulasan tentang SEO. Perlu menjadi catatan penting bahwa posting ini merupakan kelanjutan posting sebelumnya. So, jika Anda terlewat untuk membacanya, saya menyediakan link untuk meloncat ke posting Tips Search Engine Optimization (SEO) pada Blogger.com sebelumnya.

Men-submit Blog ke Perkakas Webmaster

Tentu kita tidak asing lagi dengan yang namanya perkakas web. Betul, perkakas webmaster merupakan salah satu layanan google yang memungkinkan kita untuk mengoptimalkan blog agar terindeks dengan baik. Bagaimana caranya dapat anda baca pada posting Submit Sitemap Blogger.com di Google Webmaster Tools dan Solusi Submit Sitemap di Webmaster Tools.

Update (27 September 2012): cara men-submit situs web atau blog di tiga mesin pencari dapat dibaca pada posting Mendaftarkan Situs Web atau Blog ke Google, Yahoo dan Bing.

Link Building

Link building merupakan usaha untuk membangun tautan dengan menggunakan kata-kata yang mengandung keyword & sesuai dengan tema blog. Tautan dengan kata atau frase kata yang mengandung kata kunci berarti memperjelas target tema yang telah ditetapkan, sedangkan sesuai dengan tema dapat berati bahwa tautan-tautan tersebut mempertahankan tradisi kata kunci utama blog dalam search engine. Terkadang kita keliru mengartikan link building sebagai mengumpulkan tautan sebanyak-banyaknya tanpa mengindahkan kualitas dari kata kunci maupun web/blog yang kita beri tautan (sumber tautan).

Berikut merupakan daftar yang seharusnya kita lakukan dalam membangun tautan yang baik.

  • Menautkan kata kunci yang sesuai pada posting satu dengan lainnya dalam blog. Ini sesuai dengan posting tips SEO sebelumnya pada tahapan “Membuat Posting dengan hati SEO”.
  • Kata kunci pada tautan seharusnya menggambarkan dengan jelas tentang apa yang ditautkannya dengan sumber tautan. Dalam bahasa sederhana mungkin dapat dikatakan bahwa kata-kata dalam link menggambarkan sumber link tersebut. Contoh:
    • Jika Anda ingin membaca tentang SEO, silakan kunjungi posting [link]Tips Blogging SEO dalam posting[/link] dan [link]SEO dalam Tautan[/link].
    • Jika Anda ingin membaca tentang SEO, silakan kunjungi posting [link]di sini[/link] dan [link]di sana[/link].
    Berdasarkan contoh di atas, manakah menurut Anda tautan yang lebih ber-kualitas?
  • Sesekali buatlah sedikit ulasan (review) tentang sumber tautan yang berasal dari web/blog lain. Hal tersebut terkadang mendapat respon positif dari sang empu-nya tautan. Coba bayangkan, jika sumber tautan tetrtarik dengan review kita & kemudian membalas dengan tautan yang mengarah ke posting di blog kita. Bukankah hal tersebut lebih positif dibandingkan dengan “meminta” ditautkan?
  • Berkenaan dengan poin di atas, bagaimana web/blog lain akan tahu tentang isi posting kita, jika mereka tidak diberitahu. Banyak cara untuk menuju ke sana, salah satu jalan yang cukup ampuh adalah meninggalkan komentar yang relevan serta memiliki bobot dengan posting yang telah dibaca. Memang tidak akan menimbulkan banyak pengaruh di search engine, tetapi jika komentar kita tersebut berguna, maka secara tidak langsung pemilik web/blog & pengguna lain akan tertarik untuk mengunjungi blog kita.
  • Sebuah blog akan memiliki nilai tersendiri dalam search engine, jika link yang keluar lebih banyak daripada link yang masuk. Dan akan lebih besar lagi nilainya, jika link yang keluar ditaut oleh web/blog yang memiliki kesamaan tema. Jangan pula karena ingin menghindari link yang masuk, maka posting yang seharusnya bersumber pada posting lain, malah tidak mencantumkan tautan sumber tersebut. Ingat! kita telah melakukan repost, sehingga menjadi sebuah keharusan jika kita mencantumkan tautan sumber. Ironisnya lagi, kita telah mencantumkan tautan sumber, tetapi tautan tersebut memiliki properti rel="nofollow". Pernahkan Anda berpikir, seseorang mungkin butuh berhari-hari untuk menyempurnakan postingnya?
  • Mana yang lebih dominan, sebuah tautan yang me-link ke web/blog kita atau me-link ke posting kita? Mari kita diskusikan ini pada kolom komentar.
  • Tautkan blog & posting dengan beberapa blog directory, social network dan social bookmarking. Pembaharuan (04 Desember 2012): Terutama yang memberikan layanan berkualitas dan tidak mengharuskan pranala timbal balik.
  • Jangan lupa, tautkan pula blog & posting ke layanan feed. Tidak jarang narablog menemukan posting yang dia cari pada layanan ini. Untuk Blogger.com dapat menggunakan fasilitas feedburner, silakan membuka kembali posting terdahulu tentang Apa itu RSS FEED dan Cara berlangganan.

Tetaplah memposting dengan hasil karya orisinil Anda

Yah, ini merupakan langkah yang pasti dan akurat. Search engine akan lebih menghargai sebuah karya yang original. Bukan saja mesin saya kira, narablog pun pasti menghargainya. Apalagi karya tersebut memiliki alur yang jelas, mudah untuk dipahami & nyaman untuk dibaca. Tentu, karya yang dimaksud adalah tentang tulisan atau catatan kita di blog. Orisinil bukan berarti melakukan modifikasi kata-kata di sana-sini agar posting yang akan diterbitkan tampak berbeda dengan posting yang kita ‘contek’. Tetapi lebih kepada asal ide. Anda memiliki sebuah ide yang mungkin berbeda, tuangkanlah ide itu dalam suatu bentuk tulisan (posting/artikel).

Saya mempunyai sebuah ide, tapi ide tersebut melenceng dari tema blog saya. Bagaimana sebaiknya?

Wow, sebuah pertanyaan yang sulit. Terus terang saya sendiri mungkin belum/tidak menemukan jawaban yang tepat untuk masalah ini—ada, tetapi hasil meraba-raba. Bagaimana dengan Anda?

Tips Search Engine Optimization (SEO) pada Blogger.com

Terlebih dulu saya mengucapkan terima kasih kepada Saudara Indra (arek raos) yang telah memanfaatkan form kontak untuk menanyakan sesuatu kepada kami. Pertanyaan Anda telah sampai kepada kami & semoga posting ini menjadi penawarnya. Agar lebih mudah dalam pendeskripsian, Search Engine Optimization selanjutnya akan kita sebut “SEO”.

Perlu menjadi catatan bahwa saya bukan pakar SEO atau sejenisnya, namun hanya sebagai perpanjangan tangan informasi yang pernah didapat melalui berbagai sumber. Pokok bahasan ini kita batasi tentang pemanfaatan SEO pada Blogger.com & jika terdapat beberapa kejanggalan atau pendapat yang berbeda, dapat kita diskusikan bersama pada kolom komentar.

Kenali Blog Anda, sebelum Anda ‘menyentuh’ SEO

Sebelum melangkah lebih jauh, sebaiknya kita terlebih dulu kenal dengan blog yang kita kelola. Blog tersebut akan banyak bercerita tentang apa? komputer, internet, tutorial, desain web, cerpen, puisi, atau hal-hal yang lain. Artinya disini kita perlu sebuah tema yang akan kita angkat dalam bentuk catatan di web. Apabila sebuah blog memiliki tema tertentu, maka the next step akan lebih mudah untuk melakukan kustomisasi SEO.

Pemilihan tema yang tepat, akan menghasilkan sasaran yang tepat pula. Dengan syarat, kita selalu mempertimbangkan pesaing (kompetitor) yang memiliki tema serupa. Semakin umum sebuah tema, maka semakin banyak terbuka peluang untuk saling berkompetisi.Yah, tentu saja dengan sasaran yang lebih banyak pula. Sebaliknya, tema yang lebih khusus menyebabkan kompetisi akan berkurang & sasaran akan semakin sedikit.

Jika kita membuat blog untuk jangka waktu yang panjang sebaiknya pemilihan tema bisa lebih khusus, bahkan sangat khusus. Tinggal usaha kita untuk mempopulerkan tema tersebut agar dapat diterima oleh orang lain, terutama insan online. Anda tidak memiliki waktu sepanjang itu, maka bersiap-siaplah dengan tantangan para kompetitor yang sudah barang tentu berusaha untuk tampil menjadi nomor 1 (satu) dalam halaman hasil pencarian pada setiap mesin pencari. It's Your Choice.

Optimalisasi Template agar lebih SEO Friendly

Pada tahap ini, pengetahuan & pemahaman tentang koding sangat dibutuhkan. Bagaimana kalau di “copas” saja? Saya tidak menyalahkan langkah tersebut, tetapi ketika suatu pengkodean dari web/blog sumber ada yang keliru—mungkin disebabkan oleh ke-khilaf-an author ketika menulis—tentu kode kita akan menjadi keliru pula.

Adapun secara garis besar langkah-langkah SEO pada tahap ini, antara lain:

  • Usahakan kata kunci utama berada pada posisi pembuka & penutup blog. Sebagai pembuka berarti berkenaan dengan kepala (header), sedangkan penutup berkenaan dengan kaki (footer) blog.

  • Merubah markup title
    <title><data:blog.pageTitle/></title>
    menjadi
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>
    Arti dari markup di atas lebih kurang seperti ini, jika yang ditampilkan adalah halaman posting, maka title blog adalah judul posting diikuti dengan title blog. Jika tidak, maka title blog adalah title blog itu sendiri.

  • Menambah meta tag, letakkan saja di bawah title seperti pada point di atas.
    <meta content='deskripsi tentang blog Anda' name='description'/>
    <meta content='keyword1,keyword2,keyword3,…' name='keywords'/>
    <meta content='INDEX, FOLLOW' name='robots'/>

    Update (27 September 2012): Lihat simpulan pada posting Kustomisasi Setelan pada Preferensi Penelusuran.


  • Kustomasi kata kunci pada footer blog, contoh:
    <p style="font-weight:bold">kata kunci blog Anda</p>
    Atau Anda dapat berkreasi dengan gaya lain, seperti menambahkan kata kunci pada copyright & sebagainya.

  • Kustomisasi (X)HTML ((eXtensible) HyperText Markup Language) pada atribut main, widget id Blog1. Custom yang dilakukan pada area ini dapat berupa: pengaturan heading (h1 sampai h6), paragraf, ordered list & unordered list, dan sebagainya. Dengan harapan posting kita akan tampak lebih semantik—bukan hanya sekedar memberikan tanda—namun lebih jauh akan memberikan suatu makna tersendiri bagi pembaca (mendukung keterbacaan).

  • Mengatur template agar user friendly. Buang widget-widget yang dirasa tidak perlu untuk ditampilkan. Minimal sebuah blog berisikan elemen-elemen identitas blog, posting, alur waktu yang terurut, arsip, & formulir komentar.

  • Mengatur posisi kode elemen main (bagian posting) di atas kode sidebar. Jika kita pernah melihat posisi sidebar berada di sebelah kiri, bukan berarti kode elemen main (bagian posting) berada di bawah kode sidebar. Nah, ini yang saya maksud bahwa kita perlu mempelajari & memahami pengkodean, baik CSS (Cascading Style Sheets) maupun HTML (HyperText Markup Language).

Membuat Posting dengan hati SEO

Mungkin kedengaran agak asing. Anda telah memiliki suatu tema & usahakan tema tersebut sebagai acuan untuk membuat posting. Ilustrasi, ketika Anda mengikuti upacara bendera, bertepatan pada saat itu bendera merah putih akan dinaikkan. Lagu apa yang Anda dengar? Betul, “Indonesia Raya” & bukan lagu “Balonku Ada Lima”.

Sampai ke tahap ini, Anda sama sekali belum berhadapan langsung dengan yang namanya SEO. Why? Karena kita akan mencoba untuk menyentuhnya terlebih dulu. Aktivitas yang akan kita lakukan pada tahap ini meliputi:

  • Membuat posting buah karya sendiri yang sesuai dengan tema blog. Setidak-tidaknya blog telah dipersiapkan dengan posting sejumlah 7–10 postingan.

  • Posting sebaiknya menggunakan bahasa Indonesia yang baik. Tidak ada salahnya, bukan? Pengunjung bukan hanya berasal dari negara asal penulis, sehingga tindakan ini dapat menjadi antisipasi ke-salahtafsir-an berbagai fitur penterjemah. Terkecuali Anda memiliki target pembaca tertentu.

  • Usahakan posting seakan-akan mengajak pembaca untuk berinteraksi di dalamnya. Tidak mencari pembenaran, tetapi mencari kebenaran atas suatu pokok bahasan yang diuraikan. Sulit? Rajin-rajinlah membaca karya orang lain, bukan untuk di “copas” tetapi untuk dipelajari tata bahasa, irama, dan struktur bacaannya.

  • Posting bukan hanya dinikmati oleh diri sendiri, namun lebih luas mencakup seluruh aspek, Anda, pembaca, dan mesin. Mesin? Yah, jika mesin tidak dapat membaca, bagaimana halaman blog kita muncul pada hasil pencarian.

  • Tambahkan alt pada image (gambar) yang include dalam postingan, karena gambar tidak dapat dibaca. Nah, dengan menambahkan alt dalam markup image, kita memberikan alternatif teks yang dapat memaknai arti gambar tersebut.

  • Tautkan posting dengan posting lain, jika terdapat keterkaitan & hal tersebut dianggap membantu pengunjung untuk memahami bacaannya. Terkadang kita menemui kata atau frase kata yang memiliki tautan tertentu, tetapi seharusnya hal itu tidak perlu dilakukan (dipaksa untuk bertaut). Jangan lakukan tindakan tersebut!

  • Jangan menerbitkan posting 4–5 postingan dalam sehari (apalagi lebih), karena kemungkinan blog Anda akan dianggap sebagai SPAM. Lakukanlah penskedulan posting, walaupun kita dapat menulis 10 posting dalam sehari. Posting terjadwal dapat berarti mengatur tanggal terbit posting. Anda dapat menemukannya pada saat membuat posting & memilih opsi posting (“Post Options”) tepat berada di bawah form editor (penulisan posting).

  • Mungkin ada sebagian yang berpendapat, memberikan tanda-tanda tertentu pada teks yang menjadi kata kunci akan meningkatkan SEO, seperti memberi huruf tebal (bold), miring (italic), pewarnaan yang berbeda (color dan/atau background), dan sebagainya.

Mendaftarkan Blog ke beberapa Mesin Pencari

Setelah kita melakukan beberapa tahapan seperti di atas, maka mulailah kita berhadapan dengan SEO. Kita telah memiliki senjata, amunisi yang cukup, dan perangkat pendukung. Bagaimana cara mendaftarkan blog ke beberapa mesin pencari? Anda dapat membaca pada posting sebelumnya, seperti: mendaftar di google, yahoo, dan bing

Update (07 Nopember 2012): Untuk cara mendaftarkan situs web atau blog ke beberapa mesin penelusur lihat pada posting Mendaftarkan Situs Web atau Blog ke Google, Yahoo dan Bing.

Generalisasi

Berdasarkan pokok bahasan di atas, mungkin ini hanya merupakan tahap awal untuk mengoptimalkan sebuah blog dalam mesin pencari. Kita pun belum bisa mengetahui secara pasti hasil pencarian setelah melakukan tahapan-tahapan tersebut. Bukan hanya berhubungan dengan kompetitor, tetapi terkait pula pada relevansi sebuah blog yang dikategorikan masuk dalam daftar pencarian serta—mungkin—umur blog. Namun yang pasti, kita telah melakukan usaha SEO pada blog kita. Terlepas dari itu semua, ini merupakan posting permulaan untuk memperkaya pengetahuan kita tentang langkah demi langkah menuju SEO & tidak menutup kemungkinan akan terbit artkel lain yang menjadi kelanjutannya. Keep your eyes on Optimasi Blog.

Ingat! Tema, deskripsi, dan keyword haruslah sesuai dengan apa terkandung dalam blog kita. Jangan menggunakan manipulasi apapun terhadap unsur-unsur yang saya beri huruf tebal. Pembaca akan senang jika ketiga unsur tersebut sesuai dengan apa yang dia pindai di dalam blog kita. Sebaliknya, ketidak-sesuaian akan mengundang pembaca untuk meninggalkan kesan antipati.

admin quote

Tips Search Engine Optimization (SEO) pada Blogger.com

Posted by rike No comments

Terlebih dulu saya mengucapkan terima kasih kepada Saudara Indra (arek raos) yang telah memanfaatkan form kontak untuk menanyakan sesuatu kepada kami. Pertanyaan Anda telah sampai kepada kami & semoga posting ini menjadi penawarnya. Agar lebih mudah dalam pendeskripsian, Search Engine Optimization selanjutnya akan kita sebut “SEO”.

Perlu menjadi catatan bahwa saya bukan pakar SEO atau sejenisnya, namun hanya sebagai perpanjangan tangan informasi yang pernah didapat melalui berbagai sumber. Pokok bahasan ini kita batasi tentang pemanfaatan SEO pada Blogger.com & jika terdapat beberapa kejanggalan atau pendapat yang berbeda, dapat kita diskusikan bersama pada kolom komentar.

Kenali Blog Anda, sebelum Anda ‘menyentuh’ SEO

Sebelum melangkah lebih jauh, sebaiknya kita terlebih dulu kenal dengan blog yang kita kelola. Blog tersebut akan banyak bercerita tentang apa? komputer, internet, tutorial, desain web, cerpen, puisi, atau hal-hal yang lain. Artinya disini kita perlu sebuah tema yang akan kita angkat dalam bentuk catatan di web. Apabila sebuah blog memiliki tema tertentu, maka the next step akan lebih mudah untuk melakukan kustomisasi SEO.

Pemilihan tema yang tepat, akan menghasilkan sasaran yang tepat pula. Dengan syarat, kita selalu mempertimbangkan pesaing (kompetitor) yang memiliki tema serupa. Semakin umum sebuah tema, maka semakin banyak terbuka peluang untuk saling berkompetisi.Yah, tentu saja dengan sasaran yang lebih banyak pula. Sebaliknya, tema yang lebih khusus menyebabkan kompetisi akan berkurang & sasaran akan semakin sedikit.

Jika kita membuat blog untuk jangka waktu yang panjang sebaiknya pemilihan tema bisa lebih khusus, bahkan sangat khusus. Tinggal usaha kita untuk mempopulerkan tema tersebut agar dapat diterima oleh orang lain, terutama insan online. Anda tidak memiliki waktu sepanjang itu, maka bersiap-siaplah dengan tantangan para kompetitor yang sudah barang tentu berusaha untuk tampil menjadi nomor 1 (satu) dalam halaman hasil pencarian pada setiap mesin pencari. It's Your Choice.

Optimalisasi Template agar lebih SEO Friendly

Pada tahap ini, pengetahuan & pemahaman tentang koding sangat dibutuhkan. Bagaimana kalau di “copas” saja? Saya tidak menyalahkan langkah tersebut, tetapi ketika suatu pengkodean dari web/blog sumber ada yang keliru—mungkin disebabkan oleh ke-khilaf-an author ketika menulis—tentu kode kita akan menjadi keliru pula.

Adapun secara garis besar langkah-langkah SEO pada tahap ini, antara lain:

  • Usahakan kata kunci utama berada pada posisi pembuka & penutup blog. Sebagai pembuka berarti berkenaan dengan kepala (header), sedangkan penutup berkenaan dengan kaki (footer) blog.

  • Merubah markup title
    <title><data:blog.pageTitle/></title>
    menjadi
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>
    Arti dari markup di atas lebih kurang seperti ini, jika yang ditampilkan adalah halaman posting, maka title blog adalah judul posting diikuti dengan title blog. Jika tidak, maka title blog adalah title blog itu sendiri.

  • Menambah meta tag, letakkan saja di bawah title seperti pada point di atas.
    <meta content='deskripsi tentang blog Anda' name='description'/>
    <meta content='keyword1,keyword2,keyword3,…' name='keywords'/>
    <meta content='INDEX, FOLLOW' name='robots'/>

    Update (27 September 2012): Lihat simpulan pada posting Kustomisasi Setelan pada Preferensi Penelusuran.


  • Kustomasi kata kunci pada footer blog, contoh:
    <p style="font-weight:bold">kata kunci blog Anda</p>
    Atau Anda dapat berkreasi dengan gaya lain, seperti menambahkan kata kunci pada copyright & sebagainya.

  • Kustomisasi (X)HTML ((eXtensible) HyperText Markup Language) pada atribut main, widget id Blog1. Custom yang dilakukan pada area ini dapat berupa: pengaturan heading (h1 sampai h6), paragraf, ordered list & unordered list, dan sebagainya. Dengan harapan posting kita akan tampak lebih semantik—bukan hanya sekedar memberikan tanda—namun lebih jauh akan memberikan suatu makna tersendiri bagi pembaca (mendukung keterbacaan).

  • Mengatur template agar user friendly. Buang widget-widget yang dirasa tidak perlu untuk ditampilkan. Minimal sebuah blog berisikan elemen-elemen identitas blog, posting, alur waktu yang terurut, arsip, & formulir komentar.

  • Mengatur posisi kode elemen main (bagian posting) di atas kode sidebar. Jika kita pernah melihat posisi sidebar berada di sebelah kiri, bukan berarti kode elemen main (bagian posting) berada di bawah kode sidebar. Nah, ini yang saya maksud bahwa kita perlu mempelajari & memahami pengkodean, baik CSS (Cascading Style Sheets) maupun HTML (HyperText Markup Language).

Membuat Posting dengan hati SEO

Mungkin kedengaran agak asing. Anda telah memiliki suatu tema & usahakan tema tersebut sebagai acuan untuk membuat posting. Ilustrasi, ketika Anda mengikuti upacara bendera, bertepatan pada saat itu bendera merah putih akan dinaikkan. Lagu apa yang Anda dengar? Betul, “Indonesia Raya” & bukan lagu “Balonku Ada Lima”.

Sampai ke tahap ini, Anda sama sekali belum berhadapan langsung dengan yang namanya SEO. Why? Karena kita akan mencoba untuk menyentuhnya terlebih dulu. Aktivitas yang akan kita lakukan pada tahap ini meliputi:

  • Membuat posting buah karya sendiri yang sesuai dengan tema blog. Setidak-tidaknya blog telah dipersiapkan dengan posting sejumlah 7–10 postingan.

  • Posting sebaiknya menggunakan bahasa Indonesia yang baik. Tidak ada salahnya, bukan? Pengunjung bukan hanya berasal dari negara asal penulis, sehingga tindakan ini dapat menjadi antisipasi ke-salahtafsir-an berbagai fitur penterjemah. Terkecuali Anda memiliki target pembaca tertentu.

  • Usahakan posting seakan-akan mengajak pembaca untuk berinteraksi di dalamnya. Tidak mencari pembenaran, tetapi mencari kebenaran atas suatu pokok bahasan yang diuraikan. Sulit? Rajin-rajinlah membaca karya orang lain, bukan untuk di “copas” tetapi untuk dipelajari tata bahasa, irama, dan struktur bacaannya.

  • Posting bukan hanya dinikmati oleh diri sendiri, namun lebih luas mencakup seluruh aspek, Anda, pembaca, dan mesin. Mesin? Yah, jika mesin tidak dapat membaca, bagaimana halaman blog kita muncul pada hasil pencarian.

  • Tambahkan alt pada image (gambar) yang include dalam postingan, karena gambar tidak dapat dibaca. Nah, dengan menambahkan alt dalam markup image, kita memberikan alternatif teks yang dapat memaknai arti gambar tersebut.

  • Tautkan posting dengan posting lain, jika terdapat keterkaitan & hal tersebut dianggap membantu pengunjung untuk memahami bacaannya. Terkadang kita menemui kata atau frase kata yang memiliki tautan tertentu, tetapi seharusnya hal itu tidak perlu dilakukan (dipaksa untuk bertaut). Jangan lakukan tindakan tersebut!

  • Jangan menerbitkan posting 4–5 postingan dalam sehari (apalagi lebih), karena kemungkinan blog Anda akan dianggap sebagai SPAM. Lakukanlah penskedulan posting, walaupun kita dapat menulis 10 posting dalam sehari. Posting terjadwal dapat berarti mengatur tanggal terbit posting. Anda dapat menemukannya pada saat membuat posting & memilih opsi posting (“Post Options”) tepat berada di bawah form editor (penulisan posting).

  • Mungkin ada sebagian yang berpendapat, memberikan tanda-tanda tertentu pada teks yang menjadi kata kunci akan meningkatkan SEO, seperti memberi huruf tebal (bold), miring (italic), pewarnaan yang berbeda (color dan/atau background), dan sebagainya.

Mendaftarkan Blog ke beberapa Mesin Pencari

Setelah kita melakukan beberapa tahapan seperti di atas, maka mulailah kita berhadapan dengan SEO. Kita telah memiliki senjata, amunisi yang cukup, dan perangkat pendukung. Bagaimana cara mendaftarkan blog ke beberapa mesin pencari? Anda dapat membaca pada posting sebelumnya, seperti: mendaftar di google, yahoo, dan bing

Update (07 Nopember 2012): Untuk cara mendaftarkan situs web atau blog ke beberapa mesin penelusur lihat pada posting Mendaftarkan Situs Web atau Blog ke Google, Yahoo dan Bing.

Generalisasi

Berdasarkan pokok bahasan di atas, mungkin ini hanya merupakan tahap awal untuk mengoptimalkan sebuah blog dalam mesin pencari. Kita pun belum bisa mengetahui secara pasti hasil pencarian setelah melakukan tahapan-tahapan tersebut. Bukan hanya berhubungan dengan kompetitor, tetapi terkait pula pada relevansi sebuah blog yang dikategorikan masuk dalam daftar pencarian serta—mungkin—umur blog. Namun yang pasti, kita telah melakukan usaha SEO pada blog kita. Terlepas dari itu semua, ini merupakan posting permulaan untuk memperkaya pengetahuan kita tentang langkah demi langkah menuju SEO & tidak menutup kemungkinan akan terbit artkel lain yang menjadi kelanjutannya. Keep your eyes on Optimasi Blog.

Ingat! Tema, deskripsi, dan keyword haruslah sesuai dengan apa terkandung dalam blog kita. Jangan menggunakan manipulasi apapun terhadap unsur-unsur yang saya beri huruf tebal. Pembaca akan senang jika ketiga unsur tersebut sesuai dengan apa yang dia pindai di dalam blog kita. Sebaliknya, ketidak-sesuaian akan mengundang pembaca untuk meninggalkan kesan antipati.

admin quote

Styling menggunakan CSS pseudo-element

Pada posting terdahulu, kita juga pernah membicarakan tentang CSS pseudo-element ini, namun hanya terbatas pada “styling ordered dan unordered list”. Selain itu, mungkin kita pernah melihat bentuk teks di dalam elemen atau image berbentuk pita (ribbon), kemudian garis (border) yang memiliki efek tenggelam (press), bentuk melipat di sudut sebuah elemen & mirror text effect (efek cermin pada teks). Semua dapat dilakukan juga dengan menggunakan CSS pseudo-element :before dan/atau :after.

Credit

Untuk penggunaan ribbon & border ber-efek tenggelam dapat Anda baca selengkapnya di blog Rudy Azhar. Dan salah satu nilai plus—pada form komentar ditambahkan oleh Ardianzzz—yang di coding dengan demikian menarik menggunakan CSS pseudo-element (demo ribbon).

Sedangkan untuk membuat efek cermin pada teks, penulis lupa (alpa) dengan link kreditnya. Silakan kontak penulis jika Anda mengklaim bahwa tulisan tentang “efek cermin pada teks” diambil dari sumber Anda & penulis akan segera melakukan update pada link kredit ini.

Indeks Konten

Ribbon

Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini.

.element {
background:#e1e1e1;
padding:1.5em 2em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em
}
.element h2 {
background:#f90;
border-bottom:.05em solid #666;
/*-- Rounded corner kiri atas --*/
-moz-border-radius:.25em 0 0 0;
-webkit-border-radius:.25em 0 0 0;
border-radius:.25em 0 0 0;
display:block;
left:-1.75em;
padding:.25em 0 .25em 1.75em;
position:relative;
width:60%
}
/* Mulai membentuk ribbon */
.element h2:after, .element h2:before {
content:" ";
display:block;
position:absolute
}
/* Ribbon kanan */
.element h2:after {
top:0;
right:0;
border-top:.85em solid #f90;
border-right:.75em solid #e1e1e1;
border-bottom:.80em solid #f90;
border-left:.75em solid #f90
box-shadow:0 .05em 0 #666;
}
/* Ribbon kiri */
.element h2:before {
bottom:-.25em;
left:0;
border-top:none;
border-right:none;
border-bottom:.25em solid #666;
border-left:.40em solid #666;
/*-- Rounded corner kiri bawah --*/
-moz-border-radius:0 0 0 .25em;
-webkit-border-radius:0 0 0 .25em;
border-radius:0 0 0 .25empx;
z-index:1
}

Dan berikut kode HTML yang menyertainya.

<div class="element">
<h2>Ribbon</h2> <p>Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini…</p>
</div>

Kembali ke indeks konten

Border/line press effect

Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut.

.element2 h2 {
padding:0 0 0.25em;
position:relative;
width:100%
}
.element2 h2:after {
content:" ";
position:absolute;
bottom:0;
left:0;
border-top: 1px solid #c3c3c3; /* Warna seharusnya lebih tua dari background */
border-bottom: 1px solid #f1f1f1; /* Warna seharusnya lebih muda dari background */
width:100%
}

Catatan:

  • Atribut width (warna biru) tidak harus 100%. Artinya jika width bernilai 80% maka left bernilai 10% (letak garis di tengah elemen).
  • Apabila ingin menambahkan border press di atas h2, tambahkan #element2 h2:before dengan properti yang sama. Kemudian ganti kode yang berwarna merah (bottom:0;) dengan top:0;.
  • Pada kasus lain, mungkin kita ingin meletakkan border di kanan atau kiri elemen.
    • Kiri elemen:
      top:0;
      left:0;
      border-left:1px solid #c3c3c3;
      border-right:1px solid #f1f1f1;
      height:100%;
    • Kanan elemen:
      top:0;
      right:0;
      border-left:1px solid #c3c3c3;
      border-right:1px solid #f1f1f1;
      height:100%;

Sedangkan kode HTML pada elemen ini adalah sebagai berikut.

<div class="element2">
<h2>Border/line press effect</h2> <p>Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut…</p>
</div>

Kembali ke indeks konten

Folding angle

Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini.

.element3 {
background:-webkit-gradient(linear, right top, left center, from(#e1e1e1), to(#fff));
background:-moz-linear-gradient(right, #e1e1e1, #fff);
border:1px solid #c3c3c3;
padding:1.5em 2em;
position:relative
}
.element3:before, .element3:after {
content:" ";
display:block;
position:absolute;
/*-- Memutar elemen 45 derajat (searah jarum jam) --*/
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
/* Menutup sudut kiri atas elemen berbentuk segitiga */
.element3:after {
top:-2em;
right:-2em;

/*-- Warna border sama dengan warna body (di luar elemen) --*/
border-top:2em solid #fff;
border-right:2em solid #fff;
border-bottom:2em solid #fff;
border-left:2em solid #fff
}
/* Membuat segitiga efek melipat */
.element3:before {
top:0.75em;
right:0.75em;

/*-- Warna border sama dengan warna elemen (kecuali border atas, lebih tua/gelap) --*/
border-top:2em solid #c3c3c3;
border-right:2em solid #e1e1e1;
border-bottom:2em solid #e1e1e1;
border-left:2em solid #e1e1e1;
z-index:1
}

Di bawah ini merupakan kode HTML-nya.

<div class="element3">
<h2>Folding angle</h2> <p>Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini…</p>
</div>

Kembali ke indeks konten

Mirror Text

Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut.

.element4 h2 {
font-size:2em;
font-weight:bold;
position: relative
}
.element4 h2:before, .element4 h2:after {
display:block;
position:absolute;
bottom:-0.75em; /* You should change this value to fit your font */
left:0;
right:0
}
.element4 h2:before {
content: "Mirror Text";
opacity:.4;
/* This is how the text is flipped vertically */
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1)
}
.element4 h2:after {
/* Fading using CSS gradient */
/* Don't forget to change the colors to your background color */
background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
/* I left out the `filter` property,
because IE doesn't know `:before` and `:after` pseudo-elements anyway */
content: " ";
height:0.75em
}

Catatan:
Beberapa kode informasi (antara /*…*/) sengaja tidak dirubah/dihapus untuk memudahkan—pelacakan—klaim link kredit nantinya. Background elemen ini bernilai #eeeeee sama dengan rgb(238,238,238) sama dengan rgba(238,238,238,1).

Adapun kode HTML yang menyertainya adalah sebagai berikut.

<div class="element4">
<h2>Mirror Text</h2> <p>Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut…</p>
</div>

Kembali ke indeks konten

Generalisasi

Styling menggunakan CSS pseudo-element :before dan/atau :after di atas, mungkin hanya sebagian kecil dari gaya-gaya pengkodean lain. Namun tidak ada salahnya jika kita mengenal & mengetahui—gaya seperti apa—yang mampu didukung oleh CSS pseudo-element tersebut. Apalagi penggunaannya bersih dari penambahan elemen baru. Yah, hanya dengan melakukan kustomisasi pada satu elemen, kita seakan-akan membentuk 2–3 elemen.

Note:
Sampai tulisan ini diterbitkan CSS pseudo-element :before dan/atau :after belum didukung oleh peramban IE (Internet Explorer).

Styling menggunakan CSS pseudo-element

Posted by rike No comments

Pada posting terdahulu, kita juga pernah membicarakan tentang CSS pseudo-element ini, namun hanya terbatas pada “styling ordered dan unordered list”. Selain itu, mungkin kita pernah melihat bentuk teks di dalam elemen atau image berbentuk pita (ribbon), kemudian garis (border) yang memiliki efek tenggelam (press), bentuk melipat di sudut sebuah elemen & mirror text effect (efek cermin pada teks). Semua dapat dilakukan juga dengan menggunakan CSS pseudo-element :before dan/atau :after.

Credit

Untuk penggunaan ribbon & border ber-efek tenggelam dapat Anda baca selengkapnya di blog Rudy Azhar. Dan salah satu nilai plus—pada form komentar ditambahkan oleh Ardianzzz—yang di coding dengan demikian menarik menggunakan CSS pseudo-element (demo ribbon).

Sedangkan untuk membuat efek cermin pada teks, penulis lupa (alpa) dengan link kreditnya. Silakan kontak penulis jika Anda mengklaim bahwa tulisan tentang “efek cermin pada teks” diambil dari sumber Anda & penulis akan segera melakukan update pada link kredit ini.

Indeks Konten

Ribbon

Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini.

.element {
background:#e1e1e1;
padding:1.5em 2em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em
}
.element h2 {
background:#f90;
border-bottom:.05em solid #666;
/*-- Rounded corner kiri atas --*/
-moz-border-radius:.25em 0 0 0;
-webkit-border-radius:.25em 0 0 0;
border-radius:.25em 0 0 0;
display:block;
left:-1.75em;
padding:.25em 0 .25em 1.75em;
position:relative;
width:60%
}
/* Mulai membentuk ribbon */
.element h2:after, .element h2:before {
content:" ";
display:block;
position:absolute
}
/* Ribbon kanan */
.element h2:after {
top:0;
right:0;
border-top:.85em solid #f90;
border-right:.75em solid #e1e1e1;
border-bottom:.80em solid #f90;
border-left:.75em solid #f90
box-shadow:0 .05em 0 #666;
}
/* Ribbon kiri */
.element h2:before {
bottom:-.25em;
left:0;
border-top:none;
border-right:none;
border-bottom:.25em solid #666;
border-left:.40em solid #666;
/*-- Rounded corner kiri bawah --*/
-moz-border-radius:0 0 0 .25em;
-webkit-border-radius:0 0 0 .25em;
border-radius:0 0 0 .25empx;
z-index:1
}

Dan berikut kode HTML yang menyertainya.

<div class="element">
<h2>Ribbon</h2> <p>Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini…</p>
</div>

Kembali ke indeks konten

Border/line press effect

Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut.

.element2 h2 {
padding:0 0 0.25em;
position:relative;
width:100%
}
.element2 h2:after {
content:" ";
position:absolute;
bottom:0;
left:0;
border-top: 1px solid #c3c3c3; /* Warna seharusnya lebih tua dari background */
border-bottom: 1px solid #f1f1f1; /* Warna seharusnya lebih muda dari background */
width:100%
}

Catatan:

  • Atribut width (warna biru) tidak harus 100%. Artinya jika width bernilai 80% maka left bernilai 10% (letak garis di tengah elemen).
  • Apabila ingin menambahkan border press di atas h2, tambahkan #element2 h2:before dengan properti yang sama. Kemudian ganti kode yang berwarna merah (bottom:0;) dengan top:0;.
  • Pada kasus lain, mungkin kita ingin meletakkan border di kanan atau kiri elemen.
    • Kiri elemen:
      top:0;
      left:0;
      border-left:1px solid #c3c3c3;
      border-right:1px solid #f1f1f1;
      height:100%;
    • Kanan elemen:
      top:0;
      right:0;
      border-left:1px solid #c3c3c3;
      border-right:1px solid #f1f1f1;
      height:100%;

Sedangkan kode HTML pada elemen ini adalah sebagai berikut.

<div class="element2">
<h2>Border/line press effect</h2> <p>Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut…</p>
</div>

Kembali ke indeks konten

Folding angle

Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini.

.element3 {
background:-webkit-gradient(linear, right top, left center, from(#e1e1e1), to(#fff));
background:-moz-linear-gradient(right, #e1e1e1, #fff);
border:1px solid #c3c3c3;
padding:1.5em 2em;
position:relative
}
.element3:before, .element3:after {
content:" ";
display:block;
position:absolute;
/*-- Memutar elemen 45 derajat (searah jarum jam) --*/
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
/* Menutup sudut kiri atas elemen berbentuk segitiga */
.element3:after {
top:-2em;
right:-2em;

/*-- Warna border sama dengan warna body (di luar elemen) --*/
border-top:2em solid #fff;
border-right:2em solid #fff;
border-bottom:2em solid #fff;
border-left:2em solid #fff
}
/* Membuat segitiga efek melipat */
.element3:before {
top:0.75em;
right:0.75em;

/*-- Warna border sama dengan warna elemen (kecuali border atas, lebih tua/gelap) --*/
border-top:2em solid #c3c3c3;
border-right:2em solid #e1e1e1;
border-bottom:2em solid #e1e1e1;
border-left:2em solid #e1e1e1;
z-index:1
}

Di bawah ini merupakan kode HTML-nya.

<div class="element3">
<h2>Folding angle</h2> <p>Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini…</p>
</div>

Kembali ke indeks konten

Mirror Text

Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut.

.element4 h2 {
font-size:2em;
font-weight:bold;
position: relative
}
.element4 h2:before, .element4 h2:after {
display:block;
position:absolute;
bottom:-0.75em; /* You should change this value to fit your font */
left:0;
right:0
}
.element4 h2:before {
content: "Mirror Text";
opacity:.4;
/* This is how the text is flipped vertically */
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1)
}
.element4 h2:after {
/* Fading using CSS gradient */
/* Don't forget to change the colors to your background color */
background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
/* I left out the `filter` property,
because IE doesn't know `:before` and `:after` pseudo-elements anyway */
content: " ";
height:0.75em
}

Catatan:
Beberapa kode informasi (antara /*…*/) sengaja tidak dirubah/dihapus untuk memudahkan—pelacakan—klaim link kredit nantinya. Background elemen ini bernilai #eeeeee sama dengan rgb(238,238,238) sama dengan rgba(238,238,238,1).

Adapun kode HTML yang menyertainya adalah sebagai berikut.

<div class="element4">
<h2>Mirror Text</h2> <p>Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut…</p>
</div>

Kembali ke indeks konten

Generalisasi

Styling menggunakan CSS pseudo-element :before dan/atau :after di atas, mungkin hanya sebagian kecil dari gaya-gaya pengkodean lain. Namun tidak ada salahnya jika kita mengenal & mengetahui—gaya seperti apa—yang mampu didukung oleh CSS pseudo-element tersebut. Apalagi penggunaannya bersih dari penambahan elemen baru. Yah, hanya dengan melakukan kustomisasi pada satu elemen, kita seakan-akan membentuk 2–3 elemen.

Note:
Sampai tulisan ini diterbitkan CSS pseudo-element :before dan/atau :after belum didukung oleh peramban IE (Internet Explorer).

Styling Unordered & Ordered lists

Secara default style daftar urut menggunakan bullent (unordered list) digambarkan dengan satu titik noktah yang cukup besar—lebih besar dari titik (“.”)—terletak didepan teks yang dilingkupinya. Sedangkan ordered List ditampilkan dalam bentuk angka (decimal).

Default List

Kita anggap saja warna latar (background) merupakan area suatu elemen.

Unordered List:

  • Pasti suatu masa
  • Kan bersama lagi
  • Engkau dan aku pasti jua nikmati
<ul>
<li></li>
<li></li>
…dst…
</ul>

Ordered List:

  1. Satu cinta yang indah
  2. Walau ku tak pasti
  3. Bilakah masanya
<ol>
<li></li>
<li></li>
…dst…
</ol>

Atau kita bisa memberikan style pada CSS (Cascading Style Sheets) seperti ini ul, ol {list-style-position:outside;}.

Unordered List:

  • Pasti suatu masa
  • Kan bersama lagi
  • Engkau dan aku pasti jua nikmati

Ordered List:

  1. Satu cinta yang indah
  2. Walau ku tak pasti
  3. Bilakah masanya

Bentuk tanda daftar urut tidak terbatas hanya pada bullent & angka (decimal), namun lebih banyak variasi yang dapat menjadi alternatif pilihan. Selengkapnya mengenai tipe-tipe lain, dapat dibaca di w3scholl.com.

Image List

Jika kode pemanggilan default style list menggunakan ul {list-style-type:...;} (unordered list) atau ol {list-style-type:...;} (ordered list), maka pemanggilan untuk daftar urut image menggunakan ul {list-style-image:url(...);} atau ol {list-style-image:url(...);}.

ul {
list-type-image:url(...);
}

Terkadang dalam kondisi tertentu (jenis peramban dan sebagainya), penggunaan style image—seperti pada contoh di atas—tidak muncul, sehingga kita membutuhkan ide lain untuk memunculkan image yang kita inginkan tersebut. Dalam arti, dapat didukung oleh tiap peramban, seperti di bawah ini:

ul {
list-style:none;
margin-left:0;
}

ul li {
background:url(...) no-repeat;
padding-left:1.5em;
}

  • Kau dan aku
  • Akan bertemu
  • untuk kita kembalikan keindahan dulu

Catatan:
Image list di atas menggunakan properti sebagai berikut background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hTvsHB6i8oUWh9KnWV1BAuCrrgR1QRtkefX14zrkT6n7jWPPxNxdidiy5YFIpLCRkSZQydUw4UpgqIVxIRmUWnR9ihUJfjiDPa2hnOPQH8AVso1QrezJ6MQuOHEx6QiblT9KEezjBwg/s800/OB%2520sprite.png) no-repeat -9px -280px;.

Tentang penggunaan image sebagai daftar urut antar berbagai peramban (Crossbrowser Solution), kita kunjungi kembali w3schools.

Special Character List

Styling list dengan menggunakan karakter khusus memiliki keunikan tersendiri & yang jelas belum di support peramban IE (Internet Explorer). Daftar ini menggunakan CSS pseudo-element :before.

  • pasti suatu masa, kan bersama lagi
  • Engkau dan aku pasti jua nikmati
  • Satu cinta yang indah
  • Walau ku tak pasti bilakah masanya
  • Kau dan aku akan bertemu
  • untuk kita kembalikan keindahan dulu

CSS (Cascading Style Sheets)

.listwithchar {
list-style:none;
margin-left:0;
}

.listwithchar li {
margin-left:1.5em;
position:relative
}

.listwithchar li:before {
content:"\25CA";
margin-left:-1.5em;
position:absolute
}

.listwithchar li:hover:before {
content:"\221A";
position:absolute
}

Perlu dijadikan catatan bahwa pengkodean untuk <ul> atau <ol> pada setiap template mungkin berbeda.

HTML (HyperText Markup Language)

<ul class="listwithchar">
<li></li>
<li></li>
…dst…
<ul>

Untuk lebih mempermudah pencarian dalam menemukan spesial karakter yang kita inginkan, berikut salah satu alamat web yang melayani kebutuhan tersebut Evotech.net.

Styling Unordered & Ordered lists

Posted by rike No comments

Secara default style daftar urut menggunakan bullent (unordered list) digambarkan dengan satu titik noktah yang cukup besar—lebih besar dari titik (“.”)—terletak didepan teks yang dilingkupinya. Sedangkan ordered List ditampilkan dalam bentuk angka (decimal).

Default List

Kita anggap saja warna latar (background) merupakan area suatu elemen.

Unordered List:

  • Pasti suatu masa
  • Kan bersama lagi
  • Engkau dan aku pasti jua nikmati
<ul>
<li></li>
<li></li>
…dst…
</ul>

Ordered List:

  1. Satu cinta yang indah
  2. Walau ku tak pasti
  3. Bilakah masanya
<ol>
<li></li>
<li></li>
…dst…
</ol>

Atau kita bisa memberikan style pada CSS (Cascading Style Sheets) seperti ini ul, ol {list-style-position:outside;}.

Unordered List:

  • Pasti suatu masa
  • Kan bersama lagi
  • Engkau dan aku pasti jua nikmati

Ordered List:

  1. Satu cinta yang indah
  2. Walau ku tak pasti
  3. Bilakah masanya

Bentuk tanda daftar urut tidak terbatas hanya pada bullent & angka (decimal), namun lebih banyak variasi yang dapat menjadi alternatif pilihan. Selengkapnya mengenai tipe-tipe lain, dapat dibaca di w3scholl.com.

Image List

Jika kode pemanggilan default style list menggunakan ul {list-style-type:...;} (unordered list) atau ol {list-style-type:...;} (ordered list), maka pemanggilan untuk daftar urut image menggunakan ul {list-style-image:url(...);} atau ol {list-style-image:url(...);}.

ul {
list-type-image:url(...);
}

Terkadang dalam kondisi tertentu (jenis peramban dan sebagainya), penggunaan style image—seperti pada contoh di atas—tidak muncul, sehingga kita membutuhkan ide lain untuk memunculkan image yang kita inginkan tersebut. Dalam arti, dapat didukung oleh tiap peramban, seperti di bawah ini:

ul {
list-style:none;
margin-left:0;
}

ul li {
background:url(...) no-repeat;
padding-left:1.5em;
}

  • Kau dan aku
  • Akan bertemu
  • untuk kita kembalikan keindahan dulu

Catatan:
Image list di atas menggunakan properti sebagai berikut background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hTvsHB6i8oUWh9KnWV1BAuCrrgR1QRtkefX14zrkT6n7jWPPxNxdidiy5YFIpLCRkSZQydUw4UpgqIVxIRmUWnR9ihUJfjiDPa2hnOPQH8AVso1QrezJ6MQuOHEx6QiblT9KEezjBwg/s800/OB%2520sprite.png) no-repeat -9px -280px;.

Tentang penggunaan image sebagai daftar urut antar berbagai peramban (Crossbrowser Solution), kita kunjungi kembali w3schools.

Special Character List

Styling list dengan menggunakan karakter khusus memiliki keunikan tersendiri & yang jelas belum di support peramban IE (Internet Explorer). Daftar ini menggunakan CSS pseudo-element :before.

  • pasti suatu masa, kan bersama lagi
  • Engkau dan aku pasti jua nikmati
  • Satu cinta yang indah
  • Walau ku tak pasti bilakah masanya
  • Kau dan aku akan bertemu
  • untuk kita kembalikan keindahan dulu

CSS (Cascading Style Sheets)

.listwithchar {
list-style:none;
margin-left:0;
}

.listwithchar li {
margin-left:1.5em;
position:relative
}

.listwithchar li:before {
content:"\25CA";
margin-left:-1.5em;
position:absolute
}

.listwithchar li:hover:before {
content:"\221A";
position:absolute
}

Perlu dijadikan catatan bahwa pengkodean untuk <ul> atau <ol> pada setiap template mungkin berbeda.

HTML (HyperText Markup Language)

<ul class="listwithchar">
<li></li>
<li></li>
…dst…
<ul>

Untuk lebih mempermudah pencarian dalam menemukan spesial karakter yang kita inginkan, berikut salah satu alamat web yang melayani kebutuhan tersebut Evotech.net.

Blogger templates. Proudly Powered by Blogger.
back to top