Membentuk Tipe Blok Paragraf

Biasanya Anda membuat posting dengan cara yang bagaimana? HTML atau Compose. Apabila Compose, maka akan sulit untuk membuat susunan teks dalam postingan menjadi semantik. Pada Blogger™ ketika kita telah menggunakan struktur teks blok paragraf <p> dalam posting dengan menggunakan HTML, namun akan hilang jika kita mengedit atau membuka kembali posting tersebut dengan menggunakan metode Compose. Sangat disarankan agar kita selalu melakukan edit posting dengan menggunakan metode HTML.

<p>Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>

Sekarang salin & tempel penggalan teks “lorem ipsum” di atas pada editor posting (entri/post baru) dengan menggunakan HTML. Jika dilakukan pratinjau, maka ia akan membentuk dua blok paragraf, tentu saja tanpa menggunakan tombol papan ketik Enter. Dimana contoh pengkodean blok paragraf pada CSS template adalah sebagai berikut:

p {
font-size: 1em;
line-height: 1.5em;
margin-bottom: 1.5em;
}

Sebagai bahan uji coba — dengan catatan tag p telah dimasukkan dalam pengkodean template, seperti pada contoh di atas — tambahkan baris kode CSS pada akhir postingan.

<style type="text/css">
p:firsr-letter {
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 4em;
line-height: .75em;
height: .75em; /* fix to chrome */
margin: .25em .125em 0 0;
*line-height: 1em; /* IE7 Only */
}
</style>

Pengkodean di atas akan membuat huruf awal di setiap blok paragraf menjadi lebih besar (drop caps). Apabila hanya ingin diterapkan pada paragraf tertentu, sebaiknya menggunakan class yang ditargetkan dalam paragraf tersebut.

<p class="first-letter">Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>

<style type="text/css">
.first-letter:first-letter {
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 4em;
line-height: .75em;
height: .75em;
margin: .25em .125em 0 0;
*line-height: 1em;
}
</style>

Sebaiknya setelah merasa pengkodean sudah tepat, kita dapat menambahkannya pada CSS template. Jangan lupa, tanpa memakai markah <style type="text/css"> dan </style>.

Demonstrasi penggunaan markah di atas dapat dilihat dalam paragraf ini, dimana huruf awal akan menjadi drop caps. Selanjutnya kita pun dapat membuat baris pertama dalam paragraf menjorok ke dalam atau biasanya pada waktu mengetik di aplikasi “word”, tidak jarang kita menggunakan tombol papan ketik Tab.

p:first-line {
text-indent: 2.25em;
}

Paragraf ini akan menjadi demonstrasi dari pengkodean di atas. Seperti biasa, tentu kita tidak terpaku pada penerapan markah yang telah disebutkan dalam paragraf-paragraf sebelumnya. Kita dapat menambah, mengurangi, bahkan memodifikasi sehingga tampilan blok paragraf akan sesuai dengan keinginan kita masong-masing. Anda tentu ingat fungsi “Inspect Elements”, silakan periksa halaman posting ini & struktur pengkodean didalamnya. :)

Membentuk Tipe Blok Paragraf

Posted by rike No comments

Biasanya Anda membuat posting dengan cara yang bagaimana? HTML atau Compose. Apabila Compose, maka akan sulit untuk membuat susunan teks dalam postingan menjadi semantik. Pada Blogger™ ketika kita telah menggunakan struktur teks blok paragraf <p> dalam posting dengan menggunakan HTML, namun akan hilang jika kita mengedit atau membuka kembali posting tersebut dengan menggunakan metode Compose. Sangat disarankan agar kita selalu melakukan edit posting dengan menggunakan metode HTML.

<p>Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>

Sekarang salin & tempel penggalan teks “lorem ipsum” di atas pada editor posting (entri/post baru) dengan menggunakan HTML. Jika dilakukan pratinjau, maka ia akan membentuk dua blok paragraf, tentu saja tanpa menggunakan tombol papan ketik Enter. Dimana contoh pengkodean blok paragraf pada CSS template adalah sebagai berikut:

p {
font-size: 1em;
line-height: 1.5em;
margin-bottom: 1.5em;
}

Sebagai bahan uji coba — dengan catatan tag p telah dimasukkan dalam pengkodean template, seperti pada contoh di atas — tambahkan baris kode CSS pada akhir postingan.

<style type="text/css">
p:firsr-letter {
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 4em;
line-height: .75em;
height: .75em; /* fix to chrome */
margin: .25em .125em 0 0;
*line-height: 1em; /* IE7 Only */
}
</style>

Pengkodean di atas akan membuat huruf awal di setiap blok paragraf menjadi lebih besar (drop caps). Apabila hanya ingin diterapkan pada paragraf tertentu, sebaiknya menggunakan class yang ditargetkan dalam paragraf tersebut.

<p class="first-letter">Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>

<style type="text/css">
.first-letter:first-letter {
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 4em;
line-height: .75em;
height: .75em;
margin: .25em .125em 0 0;
*line-height: 1em;
}
</style>

Sebaiknya setelah merasa pengkodean sudah tepat, kita dapat menambahkannya pada CSS template. Jangan lupa, tanpa memakai markah <style type="text/css"> dan </style>.

Demonstrasi penggunaan markah di atas dapat dilihat dalam paragraf ini, dimana huruf awal akan menjadi drop caps. Selanjutnya kita pun dapat membuat baris pertama dalam paragraf menjorok ke dalam atau biasanya pada waktu mengetik di aplikasi “word”, tidak jarang kita menggunakan tombol papan ketik Tab.

p:first-line {
text-indent: 2.25em;
}

Paragraf ini akan menjadi demonstrasi dari pengkodean di atas. Seperti biasa, tentu kita tidak terpaku pada penerapan markah yang telah disebutkan dalam paragraf-paragraf sebelumnya. Kita dapat menambah, mengurangi, bahkan memodifikasi sehingga tampilan blok paragraf akan sesuai dengan keinginan kita masong-masing. Anda tentu ingat fungsi “Inspect Elements”, silakan periksa halaman posting ini & struktur pengkodean didalamnya. :)

jQuery Sliding (Efek Geser) pada Komentar

Sepertinya sudah tidak asing lagi? Benar, tidak jarang pengelola blog menggunakannya — terutama pada elemen komentar — untuk menambahkan efek geser (sliding) buka & tutup. Penerapan sederhana dapat menggunakan metode jQuery slideToggle(), seperti yang telah diuraikan pada situs w3schools tentang jQuery effects — sliding.

$(selector).slideToggle(speed,callback);

Opsional: kita dapat mengatur parameter kecepatan (warna merah) dengan memasukkan nilai “fast”,“slow”, atau besaran waktu dalam milliseconds.

$("#flip").click(function(){
  $("#panel").slideToggle();
});

#flip dan #panel merupakan selector, kita pun dapat merubahnya menjadi bentuk penamaan lain.

Sekarang bagaimana caranya agar jQuery tersebut dapat mengakomodasi efek geser buka & tutup pada elemen komentar. Kita perlu menambahkan script jQuery ajax, kemudian letakkan saja di atas </head>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Perhatikan pada script jQuery ajax di atas, jangan sampai memasukkan dua kali (double). Oleh karena versinya dapat berbeda-beda.

Tambahkan pula jQuery slideToggle() dan letakkan di atas </body>.

<script type='text/javascript'>
//<![CDATA[
$("#flip").click(function(){
  $("#comments").slideToggle("slow");
});
//]]>
</script>

Simpan template, kemudian centang Expand Widget Templates. Sisipkan kode HTML diantara markah berikut.

<!-- posts -->
<div class='blog-posts hfeed'>
  …
    <div class='post-outer'>
    <b:include data='post' name='post'/>
      
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <div id='flip'><span>Komentar</span></div> <!-- Hapus kode ini, jika tidak ingin menambahkan jQuery efek geser pada halaman statis -->
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='flip'><span>Komentar</span></div>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
  …
</div>

Dan terakhir adalah kustomisasi CSS dengan contoh penerapan sebagai berikut. Letakkan di atas ]]></b:skin>.

#flip {
 background: #fc6;
 cursor: pointer;
 padding: 1.5em 0;
}
#flip:hover,
#flip:focus {
 background: #6cf;
}
#comments {
 display: none;
}

Jangan lupa disimpan. Untuk demonstrasi jQuery efek geser buka tutup elemen komentar dapat diamati pada posting “Bentuk Halaman Unik di Blog”.

jQuery Sliding (Efek Geser) pada Komentar

Posted by rike No comments

Sepertinya sudah tidak asing lagi? Benar, tidak jarang pengelola blog menggunakannya — terutama pada elemen komentar — untuk menambahkan efek geser (sliding) buka & tutup. Penerapan sederhana dapat menggunakan metode jQuery slideToggle(), seperti yang telah diuraikan pada situs w3schools tentang jQuery effects — sliding.

$(selector).slideToggle(speed,callback);

Opsional: kita dapat mengatur parameter kecepatan (warna merah) dengan memasukkan nilai “fast”,“slow”, atau besaran waktu dalam milliseconds.

$("#flip").click(function(){
  $("#panel").slideToggle();
});

#flip dan #panel merupakan selector, kita pun dapat merubahnya menjadi bentuk penamaan lain.

Sekarang bagaimana caranya agar jQuery tersebut dapat mengakomodasi efek geser buka & tutup pada elemen komentar. Kita perlu menambahkan script jQuery ajax, kemudian letakkan saja di atas </head>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Perhatikan pada script jQuery ajax di atas, jangan sampai memasukkan dua kali (double). Oleh karena versinya dapat berbeda-beda.

Tambahkan pula jQuery slideToggle() dan letakkan di atas </body>.

<script type='text/javascript'>
//<![CDATA[
$("#flip").click(function(){
  $("#comments").slideToggle("slow");
});
//]]>
</script>

Simpan template, kemudian centang Expand Widget Templates. Sisipkan kode HTML diantara markah berikut.

<!-- posts -->
<div class='blog-posts hfeed'>
  …
    <div class='post-outer'>
    <b:include data='post' name='post'/>
      
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <div id='flip'><span>Komentar</span></div> <!-- Hapus kode ini, jika tidak ingin menambahkan jQuery efek geser pada halaman statis -->
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='flip'><span>Komentar</span></div>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
  …
</div>

Dan terakhir adalah kustomisasi CSS dengan contoh penerapan sebagai berikut. Letakkan di atas ]]></b:skin>.

#flip {
 background: #fc6;
 cursor: pointer;
 padding: 1.5em 0;
}
#flip:hover,
#flip:focus {
 background: #6cf;
}
#comments {
 display: none;
}

Jangan lupa disimpan. Untuk demonstrasi jQuery efek geser buka tutup elemen komentar dapat diamati pada posting “Bentuk Halaman Unik di Blog”.

Bentuk Halaman Unik di Blog

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

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.

Menata Pembuatan Tabel dalam Blog

Tentu kita telah tidak asing lagi dengan yang namanya “tabel”. Yah, meskipun jarang membuat dokumen dalam bentuk tabulasi, namun tidak ada salahnya jika kita mengetahui bagaimana cara membuatnya. Tabel pada posting ini, kemungkinan akan lebih dioptimalkan melalui kustomisasi CSS. Sedangkan HTML akan tampak seperti biasa saja, sehingga akan berbeda seperti posting tentang cara membuat tabel dalam blog yang pernah kami terbitkan sebelumnya.

Bentuk tabel sederhana

Uraian	Angka	Huruf
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus

<table>
 <caption>Judul Tabel</caption>
 <!-- baris pertama untuk table row (tr) -->
 <tr>
  <!-- kolom table head (th) -->
  <th>Uraian</th> <!-- kolom pertama -->
  <th>Angka</th> <!-- kolom kedua -->
  <th>Huruf</th> <!-- kolom ketiga -->
 </tr>
 <!-- baris kedua -->
 <tr>
  <!-- kolom table data (td) -->
  <td>Satuan</td>
  <td>1</td>
  <td>Satu</td>
 </tr>
 <!-- baris ketiga -->
 <tr>
  <td>Puluhan</td>
  <td>10</td>
  <td>Sepuluh</td>
 </tr>
 <!-- baris ke-empat -->
 <tr>
  <td>Ratusan</td>
  <td>100</td>
  <td>Seratus</td>
 </tr>
</table>

Terkadang penerapan dalam HTML semua bagian dari pengkodean tabel disambung menjadi satu. Sedangkan pengkodean di atas hanya sekedar memudahkan pemahaman.

table {
 border-bottom: 1px solid #ddd;
 border-spacing: 2px;
 margin: 1.6em 0;
 width: 100%;
}
caption {
 margin-bottom: 0;
}
tr,
th,
td {
 vertical-align: inherit;
}
th,
td {
 border-top: 1px solid #ddd;
 padding: .8em .5em;
}
th {
 background: #f9f9f9;
 font-weight: 600;
 text-transform: uppercase;
}

CSS di atas telah disesuaikan dengan vertical rhythm struktur kode awal blog ini yakni line-height:1.6em;.

Sekarang kita coba untuk sedikit mengkonfigurasi tabel tanpa caption ke bentuk lain seperti di bawah ini. Kita masih menggunakan dasar pengkodean CSS sebelumnya dengan sedikit merubah & menambah sedikit properti serta nilainya.

table,
th,
td {
 border: 1px solid #ddd;
}
th,
td {
 text-align: center;
}

Uraian	Angka	Huruf
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus

Atau kita ingin menampilkan baris tabel yang berbelang-belang — seperti kuda zebra — dengan sedikit ditambahkan pula variasi ketika didekati tetikus (:hover).

tr:nth-child(2n+1) {
 background: #f9f9f9;
}
tr:hover {
 background: #bde5f8;
 color: #000;
}

Ketentuan pemberian latar (background) akan berlaku dimulai pada baris ke-3 (2n+1) dan seterusnya berselang satu baris (2n).

Uraian	Angka	Huruf
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus
Ribuan	1000	Seribu

Bentuk terakhir adalah menggunakan properti tabel secara lengkap (thead, tbody, tfoot), namun mungkin tidak sering digunakan.

<table>
 <caption>Judul Tabel</caption>
 <!-- table head (thead) -->
 <thead>
  <tr>
   <th rowspan="2">Uraian</th> <!-- menggabungkan 2 baris -->
   <th colspan="2">Keterangan</th> <!-- menggabungkan 2 kolom -->
  </tr>
  <!-- pisahkan kembali dengan table row (tr) -->
  <tr>
   <th>Angka</th>
   <th>Huruf</th>
  </tr>
 </thead>
 <!-- table foot (tfoot), nanti letak tampilannya tetap pada bagian bawah tabel -->
 <tfoot>
  <tr>
   <td>Jumlah</td>
   <td>1111</td>
   <td>Seribu Seratus Sebelas</td>
  </tr>
 </tfoot>
 <!-- table body (tbody) -->
 <tbody>
  <tr>
   <td>Satuan</td>
   <td>1</td>
   <td>Satu</td>
  </tr>
  <tr>
   <td>Puluhan</td>
   <td>10</td>
   <td>Sepuluh</td>
  </tr>
  <tr>
   <td>Ratusan</td>
   <td>100</td>
   <td>Seratus</td>
  </tr>
 </tbody>
</table>

table {
 border-spacing: 2px;
 margin: 1.6em 0;
 width: 100%;
}
table,
th,
td {
 border: 1px solid #ddd;
}
caption {
 text-align: left;
 margin-bottom: .8em;
}
thead,
tbody,
tfoot {
 vertical-align: middle;
}
tfoot {
 border-top: 3px double #ddd;
}
tr,
th,
td {
 vertical-align: inherit;
}
th,
td {
 text-align: center;
 padding: .8em .5em;
}
th {
 background: #f9f9f9;
 font-weight: 600;
 text-transform: uppercase;
}
tr:nth-child(even) /* sama dengan (2n) atau (2n+0) */ {
 background: #f9f9f9;
}
tr:hover {
 background: #bde5f8;
 color: #000;
}

Pastikan bahwa tr:hover berada pada susunan CSS dibawah pseudo-classes posisi (:nth-child(n) dan sejenisnya) dari pengkodean tabel. Jika tidak, sangat dimungkinkan fungsi hover akan tidak bekerja. Mungkin sama perlakuannya terhadap pengkodean pranala (link), dimana a:visited berada di bawah a dan/atau a:link.

Judul Tabel

Uraian	Keterangan
	Angka	Huruf
Jumlah	1111	Seribu Seratus Sebelas
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus
Ribuan	1000	Seribu

Disamping pengkodean yang telah diuraikan di atas, tidak menutup kemungkinan masih banyak bentuk tabel lain & tentu saja dengan menggunakan kustomisasi pengkodean yang berbeda pula. Namun yang patut dijadikan sebagai generalisasi adalah HTML tabel dapat disajikan secara bersih dengan hanya mengoptimalkan CSS kita dapat menampilkan bentuk tabel secara unik serta mungkin mudah diterima oleh pengguna.

Menata Pembuatan Tabel dalam Blog

Posted by rike No comments

Tentu kita telah tidak asing lagi dengan yang namanya “tabel”. Yah, meskipun jarang membuat dokumen dalam bentuk tabulasi, namun tidak ada salahnya jika kita mengetahui bagaimana cara membuatnya. Tabel pada posting ini, kemungkinan akan lebih dioptimalkan melalui kustomisasi CSS. Sedangkan HTML akan tampak seperti biasa saja, sehingga akan berbeda seperti posting tentang cara membuat tabel dalam blog yang pernah kami terbitkan sebelumnya.

Bentuk tabel sederhana

Uraian	Angka	Huruf
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus

<table>
 <caption>Judul Tabel</caption>
 <!-- baris pertama untuk table row (tr) -->
 <tr>
  <!-- kolom table head (th) -->
  <th>Uraian</th> <!-- kolom pertama -->
  <th>Angka</th> <!-- kolom kedua -->
  <th>Huruf</th> <!-- kolom ketiga -->
 </tr>
 <!-- baris kedua -->
 <tr>
  <!-- kolom table data (td) -->
  <td>Satuan</td>
  <td>1</td>
  <td>Satu</td>
 </tr>
 <!-- baris ketiga -->
 <tr>
  <td>Puluhan</td>
  <td>10</td>
  <td>Sepuluh</td>
 </tr>
 <!-- baris ke-empat -->
 <tr>
  <td>Ratusan</td>
  <td>100</td>
  <td>Seratus</td>
 </tr>
</table>

Terkadang penerapan dalam HTML semua bagian dari pengkodean tabel disambung menjadi satu. Sedangkan pengkodean di atas hanya sekedar memudahkan pemahaman.

table {
 border-bottom: 1px solid #ddd;
 border-spacing: 2px;
 margin: 1.6em 0;
 width: 100%;
}
caption {
 margin-bottom: 0;
}
tr,
th,
td {
 vertical-align: inherit;
}
th,
td {
 border-top: 1px solid #ddd;
 padding: .8em .5em;
}
th {
 background: #f9f9f9;
 font-weight: 600;
 text-transform: uppercase;
}

CSS di atas telah disesuaikan dengan vertical rhythm struktur kode awal blog ini yakni line-height:1.6em;.

Sekarang kita coba untuk sedikit mengkonfigurasi tabel tanpa caption ke bentuk lain seperti di bawah ini. Kita masih menggunakan dasar pengkodean CSS sebelumnya dengan sedikit merubah & menambah sedikit properti serta nilainya.

table,
th,
td {
 border: 1px solid #ddd;
}
th,
td {
 text-align: center;
}

Uraian	Angka	Huruf
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus

Atau kita ingin menampilkan baris tabel yang berbelang-belang — seperti kuda zebra — dengan sedikit ditambahkan pula variasi ketika didekati tetikus (:hover).

tr:nth-child(2n+1) {
 background: #f9f9f9;
}
tr:hover {
 background: #bde5f8;
 color: #000;
}

Ketentuan pemberian latar (background) akan berlaku dimulai pada baris ke-3 (2n+1) dan seterusnya berselang satu baris (2n).

Uraian	Angka	Huruf
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus
Ribuan	1000	Seribu

Bentuk terakhir adalah menggunakan properti tabel secara lengkap (thead, tbody, tfoot), namun mungkin tidak sering digunakan.

<table>
 <caption>Judul Tabel</caption>
 <!-- table head (thead) -->
 <thead>
  <tr>
   <th rowspan="2">Uraian</th> <!-- menggabungkan 2 baris -->
   <th colspan="2">Keterangan</th> <!-- menggabungkan 2 kolom -->
  </tr>
  <!-- pisahkan kembali dengan table row (tr) -->
  <tr>
   <th>Angka</th>
   <th>Huruf</th>
  </tr>
 </thead>
 <!-- table foot (tfoot), nanti letak tampilannya tetap pada bagian bawah tabel -->
 <tfoot>
  <tr>
   <td>Jumlah</td>
   <td>1111</td>
   <td>Seribu Seratus Sebelas</td>
  </tr>
 </tfoot>
 <!-- table body (tbody) -->
 <tbody>
  <tr>
   <td>Satuan</td>
   <td>1</td>
   <td>Satu</td>
  </tr>
  <tr>
   <td>Puluhan</td>
   <td>10</td>
   <td>Sepuluh</td>
  </tr>
  <tr>
   <td>Ratusan</td>
   <td>100</td>
   <td>Seratus</td>
  </tr>
 </tbody>
</table>

table {
 border-spacing: 2px;
 margin: 1.6em 0;
 width: 100%;
}
table,
th,
td {
 border: 1px solid #ddd;
}
caption {
 text-align: left;
 margin-bottom: .8em;
}
thead,
tbody,
tfoot {
 vertical-align: middle;
}
tfoot {
 border-top: 3px double #ddd;
}
tr,
th,
td {
 vertical-align: inherit;
}
th,
td {
 text-align: center;
 padding: .8em .5em;
}
th {
 background: #f9f9f9;
 font-weight: 600;
 text-transform: uppercase;
}
tr:nth-child(even) /* sama dengan (2n) atau (2n+0) */ {
 background: #f9f9f9;
}
tr:hover {
 background: #bde5f8;
 color: #000;
}

Pastikan bahwa tr:hover berada pada susunan CSS dibawah pseudo-classes posisi (:nth-child(n) dan sejenisnya) dari pengkodean tabel. Jika tidak, sangat dimungkinkan fungsi hover akan tidak bekerja. Mungkin sama perlakuannya terhadap pengkodean pranala (link), dimana a:visited berada di bawah a dan/atau a:link.

Judul Tabel

Uraian	Keterangan
	Angka	Huruf
Jumlah	1111	Seribu Seratus Sebelas
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus
Ribuan	1000	Seribu

Disamping pengkodean yang telah diuraikan di atas, tidak menutup kemungkinan masih banyak bentuk tabel lain & tentu saja dengan menggunakan kustomisasi pengkodean yang berbeda pula. Namun yang patut dijadikan sebagai generalisasi adalah HTML tabel dapat disajikan secara bersih dengan hanya mengoptimalkan CSS kita dapat menampilkan bentuk tabel secara unik serta mungkin mudah diterima oleh pengguna.

Microdata dan RDFa License dalam Blog

Dalam sebuah situs web atau blog, kita dapat menerapkan deskripsi mengenai apa yang terkandung dalam suatu halaman web. Boleh jadi ketika pengguna berkunjung ke blog kita & mengerti ketika mereka membaca halaman web itu. Namun dari sisi mesin penelusur, mungkin mempunyai pemahaman yang terbatas tentang apa yang sedang dibahas di halaman tersebut. Oleh karena itu tidaklah berlebihan apabila kita berusaha agar dokumen HTML atau XHTML dapat pula dipahami oleh mesin penelusuran, dengan catatan dilakukan (markup) secara baik & benar.

Secara menyeluruh perlakuan markah microdata telah dijelaskan pada posting microdata pada Blogger™ — terutama berkaitan dengan Blogger™ — dimana target tipe utama adalah http://schema.org/Blog. Pada kasus penerapan microdata dan RDFa license ini, kita mengacu pada tipe yang sama pula. Berbeda jika diterapkan pada tipe (itemtype) yang berbeda pula. Untuk memberikan pengkodean markah microdata pada blog, kita akan menggunakan itemtype='http://n.whatwg.org/work' (www.whatwg.org) dengan itemprop='copyrightHolder' (schema.org). Sedangkan contoh format RDFa akan ‘disarikan’ berdasarkan sumber lisensi Creative Commons (License mark: HTML + RDFa) dengan sedikit kustomisasi agar lebih standar.

<div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'>

… dan seterusnya …

  <footer>
    <div id='content-info' itemprop='copyrightHolder' itemscope='itemscope' itemtype='http://n.whatwg.org/work'>
    <meta expr:content='data:blog.homepageUrl' itemprop='work'/>
    <meta content='http://creativecommons.org/licenses/by/3.0/' itemprop='license'/>
      <p>&amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <cite itemprop='title'><a expr:href='data:blog.homepageUrl' property='dc:title' rel='dc:source' title='Beranda'><data:blog.title/></a></cite> powered by <a href='http://www.blogger.com' property='cc:attributionName' rel='cc:attributionURL'>Blogger.com</a>. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593; <br/> <a href='http://creativecommons.org/licenses/by/3.0/' rel='license' title='Creative Commons Attribution 3.0 Unported License'>All Right Reserved</a>.</p>
    </div><!-- #content-info -->
  </footer>
</div><!-- #content -->

Catatan: kode yang berwarna merah akan muncul pada rich snippets sebagai format microdata & kode berwarna biru untuk format RDFa. Pengkodean di atas hanya merupakan contoh untuk memudahkan pemahaman, bukan secara mutlak harus diterapkan.

Kemudian lakukan pegujian data rich snippets & lakukan pengujian pula melalui markup validation service. Apabila markup tersebut tepat, maka microdata dan RDFa license pada elemen <footer> dalam struktur blog akan lolos dari validitasi data.

Microdata dan RDFa License dalam Blog

Posted by rike No comments

Dalam sebuah situs web atau blog, kita dapat menerapkan deskripsi mengenai apa yang terkandung dalam suatu halaman web. Boleh jadi ketika pengguna berkunjung ke blog kita & mengerti ketika mereka membaca halaman web itu. Namun dari sisi mesin penelusur, mungkin mempunyai pemahaman yang terbatas tentang apa yang sedang dibahas di halaman tersebut. Oleh karena itu tidaklah berlebihan apabila kita berusaha agar dokumen HTML atau XHTML dapat pula dipahami oleh mesin penelusuran, dengan catatan dilakukan (markup) secara baik & benar.

Secara menyeluruh perlakuan markah microdata telah dijelaskan pada posting microdata pada Blogger™ — terutama berkaitan dengan Blogger™ — dimana target tipe utama adalah http://schema.org/Blog. Pada kasus penerapan microdata dan RDFa license ini, kita mengacu pada tipe yang sama pula. Berbeda jika diterapkan pada tipe (itemtype) yang berbeda pula. Untuk memberikan pengkodean markah microdata pada blog, kita akan menggunakan itemtype='http://n.whatwg.org/work' (www.whatwg.org) dengan itemprop='copyrightHolder' (schema.org). Sedangkan contoh format RDFa akan ‘disarikan’ berdasarkan sumber lisensi Creative Commons (License mark: HTML + RDFa) dengan sedikit kustomisasi agar lebih standar.

<div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'>

… dan seterusnya …

  <footer>
    <div id='content-info' itemprop='copyrightHolder' itemscope='itemscope' itemtype='http://n.whatwg.org/work'>
    <meta expr:content='data:blog.homepageUrl' itemprop='work'/>
    <meta content='http://creativecommons.org/licenses/by/3.0/' itemprop='license'/>
      <p>&amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <cite itemprop='title'><a expr:href='data:blog.homepageUrl' property='dc:title' rel='dc:source' title='Beranda'><data:blog.title/></a></cite> powered by <a href='http://www.blogger.com' property='cc:attributionName' rel='cc:attributionURL'>Blogger.com</a>. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593; <br/> <a href='http://creativecommons.org/licenses/by/3.0/' rel='license' title='Creative Commons Attribution 3.0 Unported License'>All Right Reserved</a>.</p>
    </div><!-- #content-info -->
  </footer>
</div><!-- #content -->

Catatan: kode yang berwarna merah akan muncul pada rich snippets sebagai format microdata & kode berwarna biru untuk format RDFa. Pengkodean di atas hanya merupakan contoh untuk memudahkan pemahaman, bukan secara mutlak harus diterapkan.

Kemudian lakukan pegujian data rich snippets & lakukan pengujian pula melalui markup validation service. Apabila markup tersebut tepat, maka microdata dan RDFa license pada elemen <footer> dalam struktur blog akan lolos dari validitasi data.

Gaya Penulisan Tag Kode dan Blok Kode

Sebagai tindak menambah kebergunakan sebuah posting blog, penerapan semantik markup merupakan salah satu langkah logis agar struktur dokumen menjadi lebih baik. Bukan hanya penyandang disabilitas — saya kira — siapapun pun yang menggunakan pembaca layar pasti lebih mudah membedakan antara paragraf, daftar urut (styling unordered & ordered lists), kutipan & preformatted text, kode, heading dan sebagainya.

Apabila kita menulis beberapa posting mengenai trik, turitoal, dan/atau pengkodean dalam suatu blog, maka kemunkinan besar akan terkait dengan tag code serta pre. Secara sederhana, Tag code biasanya berguna untuk menandai bahwa teks itu merupakan kode & tag pre untuk menandai bahwa teks berupa format bebas yang ditampilkan persis seperti pada ketikan asli dalam sebuah dokumen HTML. Pada posting ini, kita akan membuat gaya pengkodean untuk code dan kumpulan (block) code yang kemudian dimasukkan dalam tag pre.

Berikut merupakan CSS dari penggunaan tag kode pada paragraf di atas.

pre, code, kbd, samp, tt {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
}
p code, ol code, ul code {
  background: #eee;
  margin: -.1em;
  padding: .1em;
}

Sedangkan penulisan dokumen HTML untuk blok kode akan ditunjukkan seperti di bawah ini.

<pre><code>pre, code, kbd, samp, tt {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
}</code></pre>

Nah, sekarang kita akan memberikan gaya penulisan blok kode (code block) yang sedikit berbeda, tetapi mungkin para blogger pernah melihatnya pada situs web atau blog lain.

pre {
  background: #606060;
  background-image: -webkit-linear-gradient(#606060 50%,#555 50%);
  background-image:    -moz-linear-gradient(#606060 50%,#555 50%);
  background-image:     -ms-linear-gradient(#606060 50%,#555 50%);
  background-image:      -o-linear-gradient(#606060 50%,#555 50%);
  background-image:         linear-gradient(#606060 50%,#555 50%);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 4em 4em; /* 2× line-height */
  color: #fff;
  line-height: 2em;
  margin-bottom: 2em;
  overflow: auto;
  padding: 2em; /* = line-height (top & bottom) */
  white-space: pre;
}

pre[data-lang="html"]:before,
pre[data-lang="css"]:before {
  display: block;
  color: #fc3;
  /* vertical rythim (size 1.067em & line-height 1.5em) */
  font: 1.0667em/1.5em sans-serif;
  font-weight: bold;
  margin-bottom: 1.5em; /* = line-height elemen */
  text-transform: uppercase;
}

pre[data-lang="html"]:before {
  content: "html";
}

pre[data-lang="css"]:before {
  content: "css";
}

<pre class="html" data-lang="html"><code>…masukkan blok kode HTML dalam markup ini…</code></pre>

<pre class="css" data-lang="css"><code>…masukkan blok kode CSS  dalam markup ini…</code></pre>

Apabila kita ingin agar blok kode tidak melebihi bidang elemen pre — menghilangkan fungsi scrolling — ganti white-space: pre; dengan white-space: pre-wrap;. Selain itu, kita dapat pula menambah, mengurangi, dan memodifikasi gaya penulisan blok kode di atas sesuai dengan keinginan masing-masing. Kesulitan mungkin terjadi pada konfigurasi pseudo-element :before, terutama pada ukuran font (teks) yang berbeda. Intinya kita perlu menyesuaikan ritme vertikal (vertical rythim) agar blok kode (pre) tetap pada jalurnya.

Gaya Penulisan Tag Kode dan Blok Kode

Posted by rike No comments

Sebagai tindak menambah kebergunakan sebuah posting blog, penerapan semantik markup merupakan salah satu langkah logis agar struktur dokumen menjadi lebih baik. Bukan hanya penyandang disabilitas — saya kira — siapapun pun yang menggunakan pembaca layar pasti lebih mudah membedakan antara paragraf, daftar urut (styling unordered & ordered lists), kutipan & preformatted text, kode, heading dan sebagainya.

Apabila kita menulis beberapa posting mengenai trik, turitoal, dan/atau pengkodean dalam suatu blog, maka kemunkinan besar akan terkait dengan tag code serta pre. Secara sederhana, Tag code biasanya berguna untuk menandai bahwa teks itu merupakan kode & tag pre untuk menandai bahwa teks berupa format bebas yang ditampilkan persis seperti pada ketikan asli dalam sebuah dokumen HTML. Pada posting ini, kita akan membuat gaya pengkodean untuk code dan kumpulan (block) code yang kemudian dimasukkan dalam tag pre.

Berikut merupakan CSS dari penggunaan tag kode pada paragraf di atas.

pre, code, kbd, samp, tt {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
}
p code, ol code, ul code {
  background: #eee;
  margin: -.1em;
  padding: .1em;
}

Sedangkan penulisan dokumen HTML untuk blok kode akan ditunjukkan seperti di bawah ini.

<pre><code>pre, code, kbd, samp, tt {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
}</code></pre>

Nah, sekarang kita akan memberikan gaya penulisan blok kode (code block) yang sedikit berbeda, tetapi mungkin para blogger pernah melihatnya pada situs web atau blog lain.

pre {
  background: #606060;
  background-image: -webkit-linear-gradient(#606060 50%,#555 50%);
  background-image:    -moz-linear-gradient(#606060 50%,#555 50%);
  background-image:     -ms-linear-gradient(#606060 50%,#555 50%);
  background-image:      -o-linear-gradient(#606060 50%,#555 50%);
  background-image:         linear-gradient(#606060 50%,#555 50%);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 4em 4em; /* 2× line-height */
  color: #fff;
  line-height: 2em;
  margin-bottom: 2em;
  overflow: auto;
  padding: 2em; /* = line-height (top & bottom) */
  white-space: pre;
}

pre[data-lang="html"]:before,
pre[data-lang="css"]:before {
  display: block;
  color: #fc3;
  /* vertical rythim (size 1.067em & line-height 1.5em) */
  font: 1.0667em/1.5em sans-serif;
  font-weight: bold;
  margin-bottom: 1.5em; /* = line-height elemen */
  text-transform: uppercase;
}

pre[data-lang="html"]:before {
  content: "html";
}

pre[data-lang="css"]:before {
  content: "css";
}

<pre class="html" data-lang="html"><code>…masukkan blok kode HTML dalam markup ini…</code></pre>

<pre class="css" data-lang="css"><code>…masukkan blok kode CSS  dalam markup ini…</code></pre>

Apabila kita ingin agar blok kode tidak melebihi bidang elemen pre — menghilangkan fungsi scrolling — ganti white-space: pre; dengan white-space: pre-wrap;. Selain itu, kita dapat pula menambah, mengurangi, dan memodifikasi gaya penulisan blok kode di atas sesuai dengan keinginan masing-masing. Kesulitan mungkin terjadi pada konfigurasi pseudo-element :before, terutama pada ukuran font (teks) yang berbeda. Intinya kita perlu menyesuaikan ritme vertikal (vertical rythim) agar blok kode (pre) tetap pada jalurnya.

Membagi Dua Kolom Elemen Posting

Umumnya elemen posting memiliki satu kolom. Sekarang tindakan apa yang dapat kita lakukan agar kolom posting itu menjadi dua? Sebelum memulai trik tersebut, alangkah baiknya jika kita memahami mengapa sebuah kolom menjadi dua. Pengkoloman terjadi apabila tersedia ruang kosong — biasanya — disebelah kiri pada sebuah elemen dasar, sehingga elemen di bahwahnya akan mengisi ruang kosong tersebut. Sedangkan elemen dasar tersebut harus memperlihatkan struktur inline & penempatan bernilai relatif agar — nantinya — mudah untuk dikustomisasi. Salah satu contoh penerapan adalah pada posting Membuat Template Blog Hasil Karya Sendiri di bagian akhir tentang cara membuat tiga kolom sejajar dalam elemen footer yang ditandai dengan selector .supplementary.

Langkah awal untuk memulai tutorial ini ini adalah kita harus mengetahui struktur elemen pembentuk posting tersebut, contoh untuk elemen posting template bawaan Blogger™:

<div class="widget Blog" id="Blog1"><!-- widget posting -->
  <div class="blog-posts hfeed"><!-- memulai posting dengan microformat (hfeed) -->
    <div class="date-outer"><!-- posting sesuai tanggal terbit, dapat berisi lebih dari satu posting -->
      <div class="date-posts"><!-- elemen ini dapat digunakan untuk membagi dua kolom -->
        <div class="post-outer"><!-- elemen ini dapat digunakan untuk membagi dua kolom -->
          <div class="post hentry"><!-- elemen ini dapat digunakan untuk membagi dua kolom -->
    
  … dan seterusnya …

Seperti kata sebuah ungkapan, Sebaik-baik jalan adalah ditengah-tengah, maka kita akan mengambil elemen <div class="post-outer"> sebagai pembagi. Syaratnya format tanggal header di non-aktifkan.

Perhatikan lebar (width) elemen pembentuk widget posting, seperti main-content, main-content .widget, #main, #main .widget, dan sebagainya. Hal ini akan memudahkan kita untuk menentukan lebar elemen posting, apabila menggunakan jenis fixed layout. Contoh:

#main .widget {
  margin-right: 15px;
  overflow: hidden;
  width: 600px;
  word-wrap: break-word;
}

Catatan: kode di atas menunjukkan bahwa lebar elemen yang ditempati oleh sejumlah posting adalah sebesar 600px. Sebagai tambahan kita juga semestinya mengetahui margin-left elemen sidebar agar memperoleh hasil yang seimbang. Kira ambil contoh margin-left elemen sidebar sebesar 15px dan berada di sebelah kanan #main-content.

Dengan kondisi awal kode CSS pada .post-outer adalah sebagai berikut:

.post-outer {
  margin: 15px;
  width: 570px; <!-- 600px - 15px (margin-left) - 15px (margin-right) -->
}

Catatan: kode CSS di atas merupakan contoh & bila tidak ada pada pengkodean template Anda, kemungkinan terdapat pada .post atau selector lain. Properti width juga bisa tidak disertakan.

Untuk merubah elemen posting blog menjadi dua, kita perlu mengkonfigurasi ulang .post-outer. Dengan rincian seperti yang ditunjukkan pada kode berikut ini.

.post-outer {
  display: inline;
  float: left;
  position: relative;
  margin: 15px;
  width: 270px; <!-- {600px - 30px (2× margin-left) - 30px (2× margin-right)} ÷ 2 kolom -->
}

Catatan: .post-outer harus diperlakukan tanpa border, untuk menjaga struktur pengkodean yang telah kita tentukan di atas. Sebaiknya penambahan border & pernak-pernik lain ditambahkan pada .post dan hal inilah yang saya sebut memudahkan kustomisasi pada catatan sebelumnya.

Terakhir tambahkan <div class='clear'></div> tepat di bawah penutup <div class="post-outer"> untuk menjaga & mengikat pengkoloman yang telah kita buat.

<div class="widget Blog" id="Blog1">
  <div class="blog-posts hfeed">
    <div class="date-outer">
      <div class="date-posts">
        <div class="post-outer">
          <div class="post hentry">
    
  … dan seterusnya …
 
          <div><!-- .post -->
        <div><!-- .post-outer -->
        <div class='clear'></div>
      <div><!-- .date-posts -->
    <div><!-- .date-outer -->
  <div><!-- .blog-posts -->
<div><!-- .Blog #Blog1 -->

Catatan: untuk pengaturan CSS (Cascading Style Sheets) <div class='clear'></div> dapat kita temui pada posting Membuat Template Blog Hasil Karya Sendiri dengan kode ditandai warna biru.

Trik atau toturial yang telah dijelaskan di atas tidak mutlak harus demikian serta tergantung pada struktur pengkodean pada masing-masing template. Dan jika ditelaah, maka kita akan menemukan kode/kata kunci untuk membuat suatu elemen mempunyai letak yang sejajar (dalam baris tertentu), yakni display: inline;, float: left;, position: relative;, dan mungkin width.

Membagi Dua Kolom Elemen Posting

Posted by rike No comments

Umumnya elemen posting memiliki satu kolom. Sekarang tindakan apa yang dapat kita lakukan agar kolom posting itu menjadi dua? Sebelum memulai trik tersebut, alangkah baiknya jika kita memahami mengapa sebuah kolom menjadi dua. Pengkoloman terjadi apabila tersedia ruang kosong — biasanya — disebelah kiri pada sebuah elemen dasar, sehingga elemen di bahwahnya akan mengisi ruang kosong tersebut. Sedangkan elemen dasar tersebut harus memperlihatkan struktur inline & penempatan bernilai relatif agar — nantinya — mudah untuk dikustomisasi. Salah satu contoh penerapan adalah pada posting Membuat Template Blog Hasil Karya Sendiri di bagian akhir tentang cara membuat tiga kolom sejajar dalam elemen footer yang ditandai dengan selector .supplementary.

Langkah awal untuk memulai tutorial ini ini adalah kita harus mengetahui struktur elemen pembentuk posting tersebut, contoh untuk elemen posting template bawaan Blogger™:

<div class="widget Blog" id="Blog1"><!-- widget posting -->
  <div class="blog-posts hfeed"><!-- memulai posting dengan microformat (hfeed) -->
    <div class="date-outer"><!-- posting sesuai tanggal terbit, dapat berisi lebih dari satu posting -->
      <div class="date-posts"><!-- elemen ini dapat digunakan untuk membagi dua kolom -->
        <div class="post-outer"><!-- elemen ini dapat digunakan untuk membagi dua kolom -->
          <div class="post hentry"><!-- elemen ini dapat digunakan untuk membagi dua kolom -->
    
  … dan seterusnya …

Seperti kata sebuah ungkapan, Sebaik-baik jalan adalah ditengah-tengah, maka kita akan mengambil elemen <div class="post-outer"> sebagai pembagi. Syaratnya format tanggal header di non-aktifkan.

Perhatikan lebar (width) elemen pembentuk widget posting, seperti main-content, main-content .widget, #main, #main .widget, dan sebagainya. Hal ini akan memudahkan kita untuk menentukan lebar elemen posting, apabila menggunakan jenis fixed layout. Contoh:

#main .widget {
  margin-right: 15px;
  overflow: hidden;
  width: 600px;
  word-wrap: break-word;
}

Catatan: kode di atas menunjukkan bahwa lebar elemen yang ditempati oleh sejumlah posting adalah sebesar 600px. Sebagai tambahan kita juga semestinya mengetahui margin-left elemen sidebar agar memperoleh hasil yang seimbang. Kira ambil contoh margin-left elemen sidebar sebesar 15px dan berada di sebelah kanan #main-content.

Dengan kondisi awal kode CSS pada .post-outer adalah sebagai berikut:

.post-outer {
  margin: 15px;
  width: 570px; <!-- 600px - 15px (margin-left) - 15px (margin-right) -->
}

Catatan: kode CSS di atas merupakan contoh & bila tidak ada pada pengkodean template Anda, kemungkinan terdapat pada .post atau selector lain. Properti width juga bisa tidak disertakan.

Untuk merubah elemen posting blog menjadi dua, kita perlu mengkonfigurasi ulang .post-outer. Dengan rincian seperti yang ditunjukkan pada kode berikut ini.

.post-outer {
  display: inline;
  float: left;
  position: relative;
  margin: 15px;
  width: 270px; <!-- {600px - 30px (2× margin-left) - 30px (2× margin-right)} ÷ 2 kolom -->
}

Catatan: .post-outer harus diperlakukan tanpa border, untuk menjaga struktur pengkodean yang telah kita tentukan di atas. Sebaiknya penambahan border & pernak-pernik lain ditambahkan pada .post dan hal inilah yang saya sebut memudahkan kustomisasi pada catatan sebelumnya.

Terakhir tambahkan <div class='clear'></div> tepat di bawah penutup <div class="post-outer"> untuk menjaga & mengikat pengkoloman yang telah kita buat.

<div class="widget Blog" id="Blog1">
  <div class="blog-posts hfeed">
    <div class="date-outer">
      <div class="date-posts">
        <div class="post-outer">
          <div class="post hentry">
    
  … dan seterusnya …
 
          <div><!-- .post -->
        <div><!-- .post-outer -->
        <div class='clear'></div>
      <div><!-- .date-posts -->
    <div><!-- .date-outer -->
  <div><!-- .blog-posts -->
<div><!-- .Blog #Blog1 -->

Catatan: untuk pengaturan CSS (Cascading Style Sheets) <div class='clear'></div> dapat kita temui pada posting Membuat Template Blog Hasil Karya Sendiri dengan kode ditandai warna biru.

Trik atau toturial yang telah dijelaskan di atas tidak mutlak harus demikian serta tergantung pada struktur pengkodean pada masing-masing template. Dan jika ditelaah, maka kita akan menemukan kode/kata kunci untuk membuat suatu elemen mempunyai letak yang sejajar (dalam baris tertentu), yakni display: inline;, float: left;, position: relative;, dan mungkin width.

Microdata pada Blogger.com

Sebuah hal yang menarik, ketika Blogger™ memasukkan format microdata dalam desain default template, namun belum tentu berlaku jika kita serta merta menggantinya dengan template bukan default BLogger™. Microdata — seperti juga microformat & RDFa — bermanfaat untuk menerjemahkan informasi yang disertakan dalam tag HTML dengan cara yang dapat dipahami oleh mesin penelusur. Kemungkinan besar hal ini juga bermanfaat sebagai salah satu variabel dalam memperbaiki struktur blog yang telah diterbitkan pada posting sebelumnya.

Sebagian kecil contoh telah kami berikan dalam penerapan navigasi breadcrumbs dengan microdata. Sedangkan secara keseluruhan, saya akan mencoba untuk menguraikan pada posting ini. Perlu menjadi catatan bahwa microdata yang dimaksud merujuk kepada schema.org, seperti Blog, BlogPosting, dan Comment. Kemudian hal-hal yang terkait dengan ‘basa-basi publik’ — rating blog yang dibuat oleh pengelola sendiri — tidak disertakan.

Markah (markup) meta deskripsi blog

Oleh karena meta deskripsi telah dimasukkan dalam blog — tepatnya pada markah <b:include data='blog' name='all-head-content'/> — kemungkinan meta deskripsi microdata berikut kurang bermanfaat. Terkecuali untuk memperkaya cuplikan struktur data. Meta deskripsi dengan microdata ini dapat diletakkan di bawah <body> atau di bawah pengkodean navbar.

<body expr:class='"loading" + data:blog.mobileClass'>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
        <!-- Add schema.org description on home page -->
        <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' itemprop='description'/>
        </b:if>
      <b:else/>
        <!-- Avoid duplicate schema.org description on label and search page -->
        <b:if cond='data:blog.searchLabel'>
          &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan label <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
        <b:else/>
          &lt;meta content=&quot;Arsip  berdasarkan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
        </b:if>
      </b:if>
    </div><!-- itemscope itemtype='http://schema.org/Blog' -->
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
        <!-- Add schema.org description on archive page -->
        &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan bulan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
      </div><!-- itemscope itemtype='http://schema.org/Blog' -->
    <b:else/>
      <div itemscope='itemscope' itemtype='http://schema.org/BlogPosting' style='display: none;'>
        <!-- Add schema.org description on item and static page -->
        <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' itemprop='description'/>
        </b:if>
      </div><!-- itemscope itemtype='http://schema.org/BlogPosting' -->
    </b:if>
  </b:if>

  …

</body>

Catatan: kode yang diberi warna biru merupakan deskripsi yang akan ditampilkan pada pengujian rich snippets.

Markah schema.org/Blog

Apabila kita mengambil referensi berdasarkan template standar Blogger™, maka skema microdata Blog akan terlihat seperti di bawah ini.

<b:if cond='data:blog.pageType == "index"'>
  <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
    <meta expr:content='data:blog.title' itemprop='name'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' itemprop='description'/>
    </b:if>
  </div>
</b:if>

Oleh karena alasan tertentu, maka markah itu saya kustomisasi, dimana sebagian diletakkan sebagai deskripsi (sub judul “Markah (markup) meta deskripsi blog”) & sisanya akan dikonfigurasi pada elemen lain, seperti pada elemen pembungkus. Detail akan ditunjukkan pada contoh pengkodean berikut ini.

<div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'>
  <header id='header-content'>
    <div class='head-wrap'>
      <div id='header-group'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
      </div>
      <div id='search'>
      </div>
      <nav id='main-menu'>
      </nav>
    </div>
  </header>

  …

  <footer id='footer-content'>
    <p>&amp;copy; 2012 Aris Asmara diberdayakan oleh Blogger.com</p>
  </footer>
</div>

Kustomisasi properti skema name, url, dan about

Kita dapat memasukkan format microdata melalui tag-tag tertentu, seperti <span> atau meta. Sedangkan properti skema Blog antara lain berisi name, url, dan about dapat dikonfigurasi melalui elemen header blog.

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'>
…
<b:includable id='title'>
  <meta expr:content='data:blog.title' itemprop='name'/>
  <meta expr:content='data:blog.homepageUrl' itemprop='url'/>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'itemprop='about'><span><data:description/></span></p>
  </div>
</b:includable>
…
</b:widget>
</b:section>

Markah schema.org/BlogPosting

Bagi pengguna template default pasti sudah tidak asing lagi dengan markah berikut, karena ia sudah dimasukkan oleh perancang.

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.thumbnailUrl'>
      <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
 
  …
 
</b:includable>

Ketika kita melakukan uji coba terhadap struktur data, terdapat peringatan bahwa properti image_url, blogId, dan postId tidak termasuk dalam skema. Mengapa hal ini terjadi? Setelah kembali melihat beberapa properti yang dapat dimasukkan dalam skema BlogPosting pada schema.org, ternyata tidak satupun properti di atas digolongkan sebagai bagian skema BlogPosting. Oleh karena itu kita dapat menghilangkan atau melakukan konfigurasi ulang terhadap ketiga properti itu. Berikut merupakan konfigurasi untuk properti image_url.

<b:if cond='data:post.thumbnailUrl'>
  <meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/>
</b:if>

Catatan: selain properti thumbnailUrl, kita dapat pula menandainya dengan properti image.

Sedangkan properti blogId dan postId — setahu saya — dulu berada pada elemen <post-footer>, tepatnya dalam kode post-author. Mungkin alasan pemindahan tersebut nantinya akan terkait dengan skema struktur data Product (red: hanya opini saya). Kembali ke pokok utama, untuk sementara properti blogId dan postId dihilangkan dari hirarki skema, namun akan dimasukkan kembali dalam kode post-author dengan konfigurasi sebagai berikut:

<span class='post-author vcard'>
  <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/>
    <b:if cond='data:post.authorProfileUrl'>
      <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
        <meta expr:content='data:blog.blogId' itemprop='owns'/>
        <meta expr:content='data:post.id' itemprop='owns'/>
        <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
        <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
          <span itemprop='name'><data:post.author/></span>
        </a>
      </span>
    <b:else/>
      <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
        <meta expr:content='data:blog.blogId' itemprop='owns'/>
        <meta expr:content='data:post.id' itemprop='owns'/>
        <span itemprop='name'><data:post.author/></span>
      </span>
    </b:if>
  </b:if>
</span>

Catatan: untuk melihat apakah landasan properti tersebut benar atau keliru, mari kita amati pada http://schema.org/Person.

Properti name dan url

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='name'>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
    <b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    <b:else/>
      <data:post.title/>
    </b:if>
  </b:if>
  </h3>
</b:if>

Penambahan markah skema BlogPosting pada tag entry-title bisa terdiri dari beberapa versi. Seorang blogger mungkin tetap pada properti tersebut, sedangkan yang lain menambahnya menjadi itemprop='name headline' atau merubahnya menjadi itemprop='headline'. Variasi itu tidak akan menimbulkan pesan peringatan, ketika di uji pada alat rich snippets. Kemudian kita dapat pula menambahkan properti url yang ditunjukkan oleh markah di bawah ini.

  <b:if cond='data:post.link'>
  <meta expr:content='data:post.link' itemprop='url'/>
    <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
    <b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
      <meta expr:content='data:post.url' itemprop='url'/>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>

    …

  </b:if>

Catatan: itemprop='url' tidak akan ditampilkan pada halaman posting, sehingga diperlukan kostumisasi kembali jika ingin memunculkannya. Nah, masalah ini akan dibahas pada penggunaan elemen post-timestamp.

Properti articleBody

Skema BlogPosting dengan properti ini telah terdapat pula pada template standar Blogger™ dengan peletakkan yang unik & menarik.

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

Saya rasa ini merupakan terobosan yang sangat baik dari perancang. Konfigurasi pengkodean di atas akan berperan untuk membantu pengelola blog, terutama yang sudah ‘menelurkan’ banyak posting. Apa alasanya? Coba kita perhatikan markah tersebut, penggunaan <b:if cond='data:blog.metaDescription == &quot;&quot;'> dan diiringi dengan itemprop='description articleBody' merupakan kata kunci agar duplikasi meta deskripsi posting tidak terjadi, jika penulis lupa memasukkan deskripsi pada editor posting atau tidak mengaktifkan meta deskripsi dalam setelan pengaturan pada preferensi penelusuran. Arti sederhananya mungkin adalah deskripsi posting akan diterjemahkan secara otomatis, meskipun penulis tidak memasukkannya. Namun jika meta deskripsi posting telah dimasukkan penulis, maka yang akan ditampilkan adalah hasil isian dari penulis posting tersebut.

Properti articleSection

Para blogger yang biasanya menambah beberapa elemen di bawah posting — elemen posting terkait — dapat memanfaatkan markah articleSection. Tetapi ia bukan articleBody, agar lebih jelas akan saya coba contohkan seperti yang ditunjukkan pada pengkodean berikut.

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <aside class='related-posts' itemprop='articleSection'>
      …
    </aside>
    <div class='clear;'></div>
  </b:if>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <aside class='related-posts' itemprop='articleSection'>
      …
    </aside>
    <div class='clear;'></div>
  </b:if>
</b:if>

Properti url dan datePublished pada post-timestamp

Properti ini juga telah ditambahkan oleh perancang template Blogger™. Ketika sebuah halaman posting terbuka, maka judul posting — umumnya — tidak memiliki pranala (link). Oleh karena itu skema microdata dengan properti url dialihkan ke elemen post-timestamp. Dengan catatan pengelola blog belum melakukan perubahan struktur data pada entry-title (post-title).

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.timestamp/></span></abbr></a>
    </b:if>
  </b:if>
</span>

Catatan: ada yang merasa aneh pada kode yang berwarna biru? Hal itu hanya ‘latah’ saya untuk menghilangkan peringatan pada alat rich snippets ketika menguji struktur data blog ini.

Properti discussionUrl

Skema properti ini akan muncul jika dan hanya jika pengelola menampilkannya pada halaman indeks, sedangkan pada halaman posting atau halaman statis —biasanya— tidak ditampilkan. Meskipun ditampilkan, maka besar kemungkinan pengkodean dengan menempatkan itemprop='discussionUrl' akan sama pula.

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:post.allowComments'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' itemprop='discussionUrl'>
        <data:post.commentLabelFull/>
      </a>
    </b:if>
  </b:if>
  </b:if>
</span>

Properti keywords

Pengkodean dengan markah microdata BlogPosting dengan properti keywords secara sederhana dapat kita letakkan pada elemen post-labels.

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
     <a expr:href='data:label.url' rel='tag'><span itemprop='keywords'><data:label.name/></span></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
  </b:if>
</span>

Markah schema.org/Comment

Oleh karena kebanyakan para blogger menggunakan sistem komentar bersarang (threaded comments), maka konfigurasi hanya akan dilakukan di sekitar daerah judul komentar. Adapun properti yang dimanfaatkan sebagai markup adalah name dan interactionCount khusus pada jumlah komentar yang masuk. Menyisipkan atau memberi markup microdata pada sesi ini dibagi menjadi dua, yakni sebelum ada komentar (comments) & setelah ada komentar (threaded comments).

<b:includable id='comments' var='post'>
  <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
  <b:if cond='data:post.numComments != 0'>
    &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt;
  </b:if>
    <a name='comments'/>
    <h4 itemprop='name'><data:post.commentLabelFull/></h4>

  …

  </div>
</b:includable>

<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
  <b:if cond='data:post.numComments != 0'>
    &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt;
  </b:if>
    <a name='comments'/>
    <h4 itemprop='name'><data:post.commentLabelFull/></h4>

  …

  </div>
</b:includable>

Khusus bagi penggunaan komentar tidak bersarang, markup microdata yang dimanfaatkan adalah itemprop='UserComments' dengan tipe schema.org/UserComments. Sedangkan propertinya antara lain: commentText, commentTime, creator, dan replyToUrl serta dapat pula ditambahkan schema.org/Person sebagai bagian di dalam struktur schema.org/comment. Sedangkan penggunaan kode dengan latar berwarna kuning menjelaskan keterkaitan antara markah yang terkandung di dalam masing-masing tipe (itemtype), dimana mereka merupakan satu-kesatuan yang utuh.

Berdasarkan uraian yang sangat panjang di atas, format microdata dapat diterapkan beragam atau tergantung “pemberi markah”. Namun memberi sebuah markup terhadap data atau elemen tidak dapat dilakukan secara sembarangan, karena akan turut berpengaruh dalam menghasilkan markah yang semantik. Hal ini terkait pula dengan posting yang saya beri judul “Microdata pada Blogger.com”, sangat dimungkinkan terdapat kekeliruan atau kesalah-tafsiran, sehingga kritik dan saran sangat dibutuhkan untuk memperbaikinya. Seperti biasa Optimasi Blog selalu membuka formulir komentar lebar-lebar & seandainya telah ditutup pun kita masih bisa berbagi melalui halaman kontak. :)

Alat & Bahan bacaan

Berikut alat dan beberapa bahan bacaan yang mungkin akan menambah pengetahuan serta wawasan kita dalam memahami tentang struktur skema microdata.

• Structured Data Testing Tool — Alat Webmaster Google.
• Getting started with schema.org — schema.org.
• Rich snippets (microdata, microformats, RDFa, and Data Highlighter) — Perkakas Webmaster: Tentang cuplikan kaya & data terstruktur.

Microdata pada Blogger.com

Posted by rike No comments

Sebuah hal yang menarik, ketika Blogger™ memasukkan format microdata dalam desain default template, namun belum tentu berlaku jika kita serta merta menggantinya dengan template bukan default BLogger™. Microdata — seperti juga microformat & RDFa — bermanfaat untuk menerjemahkan informasi yang disertakan dalam tag HTML dengan cara yang dapat dipahami oleh mesin penelusur. Kemungkinan besar hal ini juga bermanfaat sebagai salah satu variabel dalam memperbaiki struktur blog yang telah diterbitkan pada posting sebelumnya.

Sebagian kecil contoh telah kami berikan dalam penerapan navigasi breadcrumbs dengan microdata. Sedangkan secara keseluruhan, saya akan mencoba untuk menguraikan pada posting ini. Perlu menjadi catatan bahwa microdata yang dimaksud merujuk kepada schema.org, seperti Blog, BlogPosting, dan Comment. Kemudian hal-hal yang terkait dengan ‘basa-basi publik’ — rating blog yang dibuat oleh pengelola sendiri — tidak disertakan.

Markah (markup) meta deskripsi blog

Oleh karena meta deskripsi telah dimasukkan dalam blog — tepatnya pada markah <b:include data='blog' name='all-head-content'/> — kemungkinan meta deskripsi microdata berikut kurang bermanfaat. Terkecuali untuk memperkaya cuplikan struktur data. Meta deskripsi dengan microdata ini dapat diletakkan di bawah <body> atau di bawah pengkodean navbar.

<body expr:class='"loading" + data:blog.mobileClass'>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
        <!-- Add schema.org description on home page -->
        <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' itemprop='description'/>
        </b:if>
      <b:else/>
        <!-- Avoid duplicate schema.org description on label and search page -->
        <b:if cond='data:blog.searchLabel'>
          &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan label <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
        <b:else/>
          &lt;meta content=&quot;Arsip  berdasarkan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
        </b:if>
      </b:if>
    </div><!-- itemscope itemtype='http://schema.org/Blog' -->
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
        <!-- Add schema.org description on archive page -->
        &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan bulan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
      </div><!-- itemscope itemtype='http://schema.org/Blog' -->
    <b:else/>
      <div itemscope='itemscope' itemtype='http://schema.org/BlogPosting' style='display: none;'>
        <!-- Add schema.org description on item and static page -->
        <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' itemprop='description'/>
        </b:if>
      </div><!-- itemscope itemtype='http://schema.org/BlogPosting' -->
    </b:if>
  </b:if>

  …

</body>

Catatan: kode yang diberi warna biru merupakan deskripsi yang akan ditampilkan pada pengujian rich snippets.

Markah schema.org/Blog

Apabila kita mengambil referensi berdasarkan template standar Blogger™, maka skema microdata Blog akan terlihat seperti di bawah ini.

<b:if cond='data:blog.pageType == "index"'>
  <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
    <meta expr:content='data:blog.title' itemprop='name'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' itemprop='description'/>
    </b:if>
  </div>
</b:if>

Oleh karena alasan tertentu, maka markah itu saya kustomisasi, dimana sebagian diletakkan sebagai deskripsi (sub judul “Markah (markup) meta deskripsi blog”) & sisanya akan dikonfigurasi pada elemen lain, seperti pada elemen pembungkus. Detail akan ditunjukkan pada contoh pengkodean berikut ini.

<div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'>
  <header id='header-content'>
    <div class='head-wrap'>
      <div id='header-group'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
      </div>
      <div id='search'>
      </div>
      <nav id='main-menu'>
      </nav>
    </div>
  </header>

  …

  <footer id='footer-content'>
    <p>&amp;copy; 2012 Aris Asmara diberdayakan oleh Blogger.com</p>
  </footer>
</div>

Kustomisasi properti skema name, url, dan about

Kita dapat memasukkan format microdata melalui tag-tag tertentu, seperti <span> atau meta. Sedangkan properti skema Blog antara lain berisi name, url, dan about dapat dikonfigurasi melalui elemen header blog.

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'>
…
<b:includable id='title'>
  <meta expr:content='data:blog.title' itemprop='name'/>
  <meta expr:content='data:blog.homepageUrl' itemprop='url'/>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'itemprop='about'><span><data:description/></span></p>
  </div>
</b:includable>
…
</b:widget>
</b:section>

Markah schema.org/BlogPosting

Bagi pengguna template default pasti sudah tidak asing lagi dengan markah berikut, karena ia sudah dimasukkan oleh perancang.

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.thumbnailUrl'>
      <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
 
  …
 
</b:includable>

Ketika kita melakukan uji coba terhadap struktur data, terdapat peringatan bahwa properti image_url, blogId, dan postId tidak termasuk dalam skema. Mengapa hal ini terjadi? Setelah kembali melihat beberapa properti yang dapat dimasukkan dalam skema BlogPosting pada schema.org, ternyata tidak satupun properti di atas digolongkan sebagai bagian skema BlogPosting. Oleh karena itu kita dapat menghilangkan atau melakukan konfigurasi ulang terhadap ketiga properti itu. Berikut merupakan konfigurasi untuk properti image_url.

<b:if cond='data:post.thumbnailUrl'>
  <meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/>
</b:if>

Catatan: selain properti thumbnailUrl, kita dapat pula menandainya dengan properti image.

Sedangkan properti blogId dan postId — setahu saya — dulu berada pada elemen <post-footer>, tepatnya dalam kode post-author. Mungkin alasan pemindahan tersebut nantinya akan terkait dengan skema struktur data Product (red: hanya opini saya). Kembali ke pokok utama, untuk sementara properti blogId dan postId dihilangkan dari hirarki skema, namun akan dimasukkan kembali dalam kode post-author dengan konfigurasi sebagai berikut:

<span class='post-author vcard'>
  <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/>
    <b:if cond='data:post.authorProfileUrl'>
      <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
        <meta expr:content='data:blog.blogId' itemprop='owns'/>
        <meta expr:content='data:post.id' itemprop='owns'/>
        <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
        <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
          <span itemprop='name'><data:post.author/></span>
        </a>
      </span>
    <b:else/>
      <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
        <meta expr:content='data:blog.blogId' itemprop='owns'/>
        <meta expr:content='data:post.id' itemprop='owns'/>
        <span itemprop='name'><data:post.author/></span>
      </span>
    </b:if>
  </b:if>
</span>

Catatan: untuk melihat apakah landasan properti tersebut benar atau keliru, mari kita amati pada http://schema.org/Person.

Properti name dan url

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='name'>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
    <b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    <b:else/>
      <data:post.title/>
    </b:if>
  </b:if>
  </h3>
</b:if>

Penambahan markah skema BlogPosting pada tag entry-title bisa terdiri dari beberapa versi. Seorang blogger mungkin tetap pada properti tersebut, sedangkan yang lain menambahnya menjadi itemprop='name headline' atau merubahnya menjadi itemprop='headline'. Variasi itu tidak akan menimbulkan pesan peringatan, ketika di uji pada alat rich snippets. Kemudian kita dapat pula menambahkan properti url yang ditunjukkan oleh markah di bawah ini.

  <b:if cond='data:post.link'>
  <meta expr:content='data:post.link' itemprop='url'/>
    <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
    <b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
      <meta expr:content='data:post.url' itemprop='url'/>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>

    …

  </b:if>

Catatan: itemprop='url' tidak akan ditampilkan pada halaman posting, sehingga diperlukan kostumisasi kembali jika ingin memunculkannya. Nah, masalah ini akan dibahas pada penggunaan elemen post-timestamp.

Properti articleBody

Skema BlogPosting dengan properti ini telah terdapat pula pada template standar Blogger™ dengan peletakkan yang unik & menarik.

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

Saya rasa ini merupakan terobosan yang sangat baik dari perancang. Konfigurasi pengkodean di atas akan berperan untuk membantu pengelola blog, terutama yang sudah ‘menelurkan’ banyak posting. Apa alasanya? Coba kita perhatikan markah tersebut, penggunaan <b:if cond='data:blog.metaDescription == &quot;&quot;'> dan diiringi dengan itemprop='description articleBody' merupakan kata kunci agar duplikasi meta deskripsi posting tidak terjadi, jika penulis lupa memasukkan deskripsi pada editor posting atau tidak mengaktifkan meta deskripsi dalam setelan pengaturan pada preferensi penelusuran. Arti sederhananya mungkin adalah deskripsi posting akan diterjemahkan secara otomatis, meskipun penulis tidak memasukkannya. Namun jika meta deskripsi posting telah dimasukkan penulis, maka yang akan ditampilkan adalah hasil isian dari penulis posting tersebut.

Properti articleSection

Para blogger yang biasanya menambah beberapa elemen di bawah posting — elemen posting terkait — dapat memanfaatkan markah articleSection. Tetapi ia bukan articleBody, agar lebih jelas akan saya coba contohkan seperti yang ditunjukkan pada pengkodean berikut.

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <aside class='related-posts' itemprop='articleSection'>
      …
    </aside>
    <div class='clear;'></div>
  </b:if>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <aside class='related-posts' itemprop='articleSection'>
      …
    </aside>
    <div class='clear;'></div>
  </b:if>
</b:if>

Properti url dan datePublished pada post-timestamp

Properti ini juga telah ditambahkan oleh perancang template Blogger™. Ketika sebuah halaman posting terbuka, maka judul posting — umumnya — tidak memiliki pranala (link). Oleh karena itu skema microdata dengan properti url dialihkan ke elemen post-timestamp. Dengan catatan pengelola blog belum melakukan perubahan struktur data pada entry-title (post-title).

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.timestamp/></span></abbr></a>
    </b:if>
  </b:if>
</span>

Catatan: ada yang merasa aneh pada kode yang berwarna biru? Hal itu hanya ‘latah’ saya untuk menghilangkan peringatan pada alat rich snippets ketika menguji struktur data blog ini.

Properti discussionUrl

Skema properti ini akan muncul jika dan hanya jika pengelola menampilkannya pada halaman indeks, sedangkan pada halaman posting atau halaman statis —biasanya— tidak ditampilkan. Meskipun ditampilkan, maka besar kemungkinan pengkodean dengan menempatkan itemprop='discussionUrl' akan sama pula.

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:post.allowComments'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' itemprop='discussionUrl'>
        <data:post.commentLabelFull/>
      </a>
    </b:if>
  </b:if>
  </b:if>
</span>

Properti keywords

Pengkodean dengan markah microdata BlogPosting dengan properti keywords secara sederhana dapat kita letakkan pada elemen post-labels.

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
     <a expr:href='data:label.url' rel='tag'><span itemprop='keywords'><data:label.name/></span></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
  </b:if>
</span>

Markah schema.org/Comment

Oleh karena kebanyakan para blogger menggunakan sistem komentar bersarang (threaded comments), maka konfigurasi hanya akan dilakukan di sekitar daerah judul komentar. Adapun properti yang dimanfaatkan sebagai markup adalah name dan interactionCount khusus pada jumlah komentar yang masuk. Menyisipkan atau memberi markup microdata pada sesi ini dibagi menjadi dua, yakni sebelum ada komentar (comments) & setelah ada komentar (threaded comments).

<b:includable id='comments' var='post'>
  <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
  <b:if cond='data:post.numComments != 0'>
    &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt;
  </b:if>
    <a name='comments'/>
    <h4 itemprop='name'><data:post.commentLabelFull/></h4>

  …

  </div>
</b:includable>

<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
  <b:if cond='data:post.numComments != 0'>
    &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt;
  </b:if>
    <a name='comments'/>
    <h4 itemprop='name'><data:post.commentLabelFull/></h4>

  …

  </div>
</b:includable>

Khusus bagi penggunaan komentar tidak bersarang, markup microdata yang dimanfaatkan adalah itemprop='UserComments' dengan tipe schema.org/UserComments. Sedangkan propertinya antara lain: commentText, commentTime, creator, dan replyToUrl serta dapat pula ditambahkan schema.org/Person sebagai bagian di dalam struktur schema.org/comment. Sedangkan penggunaan kode dengan latar berwarna kuning menjelaskan keterkaitan antara markah yang terkandung di dalam masing-masing tipe (itemtype), dimana mereka merupakan satu-kesatuan yang utuh.

Berdasarkan uraian yang sangat panjang di atas, format microdata dapat diterapkan beragam atau tergantung “pemberi markah”. Namun memberi sebuah markup terhadap data atau elemen tidak dapat dilakukan secara sembarangan, karena akan turut berpengaruh dalam menghasilkan markah yang semantik. Hal ini terkait pula dengan posting yang saya beri judul “Microdata pada Blogger.com”, sangat dimungkinkan terdapat kekeliruan atau kesalah-tafsiran, sehingga kritik dan saran sangat dibutuhkan untuk memperbaikinya. Seperti biasa Optimasi Blog selalu membuka formulir komentar lebar-lebar & seandainya telah ditutup pun kita masih bisa berbagi melalui halaman kontak. :)

Alat & Bahan bacaan

Berikut alat dan beberapa bahan bacaan yang mungkin akan menambah pengetahuan serta wawasan kita dalam memahami tentang struktur skema microdata.

• Structured Data Testing Tool — Alat Webmaster Google.
• Getting started with schema.org — schema.org.
• Rich snippets (microdata, microformats, RDFa, and Data Highlighter) — Perkakas Webmaster: Tentang cuplikan kaya & data terstruktur.

Membuat Template Blog Hasil Karya Sendiri

Pada posting sebelumnya, kita telah mengetahui tentang dasar penyusunan template di Blogger.com. Sekarang tinggal tergantung pada kreativitas masing-masing dalam menambahkan beberapa selector atau elemen HTML5 agar blog dapat ditampilkan pada layar peramban. Toturial berikut dapat diterapkan dengan cara yang berbeda pada tiap blog & tentu saja tergantung pada pengelola blog yang bersangkutan. Untuk pembuatan blog dari awal mungkin tidak akan menemukan masalah yang berarti, namun jika dilakukan pada blog yang telah memiliki posting, pembaharuan template kemungkinan besar akan meninggalkan residu dari pengkodean template sebelumnya. Adapun agar template kembali segar, maka dibutuhkan sedikit trik untuk melakukan reset template, yakni — dengan cara — pergi ke dashboard Blogger.com, kemudian “terapkan” salah satu template dasar.

Sebagai langkah pertama, silakan simpan (copy & paste) beberapa widget yang mungkin akan kita tampilkan dalam blog — seperti navbar, header, dan main (Posting Blog) — pada “Edit HTML”. Kemudian bersihkan semua kode, sehingga area “Edit HTML” menjadi kosong dan masukkan HTML (Hypertext Markup Language) berikut.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
  <!--[if lte IE 8]> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <![endif]-->
  <!--[if gte IE 9]> <meta content='IE=9' http-equiv='X-UA-Compatible'/> <![endif]-->
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=960' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <data:blog.title/>
    <b:else/>
      <data:blog.pageName/> | <data:blog.title/>
    </b:if>
  </title>
 <b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:  
URL:  
Designer: 
-------------------------------------------------------------- */

/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}
  ]]></b:skin>
  </head>
  <body expr:class='"loading" + data:blog.mobileClass'>
  </body>
</html>

Kedua, tambahkan satu-persatu kode widget dalam tubuh HTML (<body>). Misalnya:

  <body expr:class='"loading" + data:blog.mobileClass'>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>

  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

  <b:section class='sidebar' id='sidebar' preferred='yes'/>
  </body>

Ketiga, memberikan beberapa selector atau elemen pada HTML5 untuk mengapit kode widget. Semakin sederhana struktur pengkodean, maka akan semakin mudah dalam melakukan kustomisasi. Selector id berarti kustomasi hanya dilakukan pada id yang bersangkutan & tidak ada perulangan, karena sifatnya yang unik (satu id sama dengan satu elemen). Sedangkan class dapat digunakan secara berulang-ulang pada karakter pengkodean yang sama (satu class sama dengan beberapa elemen).

  <body expr:class='"loading" + data:blog.mobileClass'>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<div id='content'>

  <header id='header-content'>
    <div class='head-wrap'>
      <div class='header-group'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
      </div><!-- .header-group -->
    </div><!-- .head-wrap -->
  </header><!-- #header-content -->

  <div id='main-wrapper'>
    <div id='main-content'>
  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
    </div><!-- #main-content -->
    <aside id='sidebar-content'>
  <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </aside><!-- #sidebar-content -->
    <div style='clear:both;'></div> <!-- Mungkin lebih baik menggunakan <div class='clear'></div> yang diatur dengan CSS -->
  </div><!-- #main-wrapper -->

  <footer id='footer-content'>
    <div class='foot-wrap'>
      <div id='content-info'>
        <p>&amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593; <br/>Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
      </div><!-- #content-info -->
    </div><!-- .foot-wrap -->
  </footer><!-- #footer-content -->

</div><!-- #content -->
  </body>

Keempat, simpan HTML template hasil modifikasi tersebut. Pada tampilan sederhana, hasil yang ditunjukkan oleh pengkodean di atas adalah menggunakan satu kolom & memanfaatkan seluruh lebar halaman peramban. Oleh karena kita belum melakukan konfigurasi pada CSS (Cascading Style Sheets) dalam markah <head>. Contoh CSS berikut menggunakan fixed layout dengan lebar konten 960px sesuai dengan <meta content='width=960' name='viewport'/>.

 <b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:  
URL:  
Designer: 
-------------------------------------------------------------- */

/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}

/* =Layout
----------------------------------------------- */
#content {
margin: 0 auto;
width: 960px;
}
#header-content,
#main-wrapper,
#footer-content {
width: 100%;
}
#main-content,
#sidebar-content {
display: inline;
position: relative;
}
#main-content {
float: left; /* Tentukan letak main-content di sebelah kanan (right) atau kiri */
width: 640px;
}
#sidebar-content {
float: left;
width: 320px;
}
.header .widget,
.main .widget,
.sidebar .widget {
margin-left: 15px;
margin-right: 15px;
word-wrap: break-word;
}

/* =Global
----------------------------------------------- */
body,
button,
input,
select,
textarea {
color: #000;
font: .9375em/1.6em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
background: #fff;
text-align: left;
width: 100%;
}
body:before, body:after {
content: '';
display: table;
}
body:after {
clear: both;
}

/* Mungkin lebih baik menggunakan CSS berikut dibandingkan dengan <div style="clear:both;"></div> */
.clear {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}

… dan seterusnya …
  ]]></b:skin>

Kelima, pratinjau hasilnya & apabila telah sesuai dengan kriteria tampilan blog yang kita inginkan “simpan” template.

Dengan 5 (lima) langkah di atas, kita telah dapat membuat template blog hasil karya sendiri, meskipun dalam menyelesaikan beberapa tahapan tersebut membutuhkan pemahaman yang lebih tentang CSS dan HTML. Bukan sebatas itu saja, bahkan lebih spesifik akan meliputi berbagai aspek yang dibutuhkan oleh sebuah situs web atau blog agar mendekati aksesibilitas di sisi pengguna. Kata paling sederhana mungkin mengandung makna mudah dibaca serta keterbacaan. Oh, iya! Hampir lupa, untuk pemanfaatan selector class yang digunakan pada beberapa elemen belum ada pada posting di atas. Daripada lupa akan dicontohkan melalui penambahan 3 (tiga) kolom pada footer berikut.

HTML

  <footer id='footer-content'>
    <div class='foot-wrap'>
      <div id='sidebar-footer'>
        <aside class='supplementary'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'/>
  </aside>
        <aside class='supplementary'>
  <b:section class='sidebar' id='sidebar3' preferred='yes'/>
  </aside>
        <aside class='supplementary'>
  <b:section class='sidebar' id='sidebar4' preferred='yes'/>
  </aside>
        <div class='clear'></div>
      </div><!-- #sidebar-footer -->
      <div id='content-info'>
        <p>&amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593;<br/> Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
      </div><!-- #content-info -->
    </div><!-- .foot-wrap -->
  </footer><!-- #footer-content -->

CSS

.supplementary {
display: inline;
float: left;
position: relative;
width: 320px;
}

Catatan: Untuk kode yang berwarna orange, konfigurasi CSS widget dalam section class='sidebar' sama dengan pengkodean sebelumnya (.sidebar .widget).

Sederhana bukan? Jika sebuah elemen memiliki karakteristik yang sama, alangkah lebih baik apabila digabungkan dengan pengkodean elemen lain. Hal tersebut dimaksudkan agar pengkodean lebih mudah dikustomisasi & dengan harapan — mungkin — akan lebih semantik.

Membuat Template Blog Hasil Karya Sendiri

Posted by rike No comments

Pada posting sebelumnya, kita telah mengetahui tentang dasar penyusunan template di Blogger.com. Sekarang tinggal tergantung pada kreativitas masing-masing dalam menambahkan beberapa selector atau elemen HTML5 agar blog dapat ditampilkan pada layar peramban. Toturial berikut dapat diterapkan dengan cara yang berbeda pada tiap blog & tentu saja tergantung pada pengelola blog yang bersangkutan. Untuk pembuatan blog dari awal mungkin tidak akan menemukan masalah yang berarti, namun jika dilakukan pada blog yang telah memiliki posting, pembaharuan template kemungkinan besar akan meninggalkan residu dari pengkodean template sebelumnya. Adapun agar template kembali segar, maka dibutuhkan sedikit trik untuk melakukan reset template, yakni — dengan cara — pergi ke dashboard Blogger.com, kemudian “terapkan” salah satu template dasar.

Sebagai langkah pertama, silakan simpan (copy & paste) beberapa widget yang mungkin akan kita tampilkan dalam blog — seperti navbar, header, dan main (Posting Blog) — pada “Edit HTML”. Kemudian bersihkan semua kode, sehingga area “Edit HTML” menjadi kosong dan masukkan HTML (Hypertext Markup Language) berikut.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
  <!--[if lte IE 8]> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <![endif]-->
  <!--[if gte IE 9]> <meta content='IE=9' http-equiv='X-UA-Compatible'/> <![endif]-->
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=960' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <data:blog.title/>
    <b:else/>
      <data:blog.pageName/> | <data:blog.title/>
    </b:if>
  </title>
 <b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:  
URL:  
Designer: 
-------------------------------------------------------------- */

/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}
  ]]></b:skin>
  </head>
  <body expr:class='"loading" + data:blog.mobileClass'>
  </body>
</html>

Kedua, tambahkan satu-persatu kode widget dalam tubuh HTML (<body>). Misalnya:

  <body expr:class='"loading" + data:blog.mobileClass'>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>

  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

  <b:section class='sidebar' id='sidebar' preferred='yes'/>
  </body>

Ketiga, memberikan beberapa selector atau elemen pada HTML5 untuk mengapit kode widget. Semakin sederhana struktur pengkodean, maka akan semakin mudah dalam melakukan kustomisasi. Selector id berarti kustomasi hanya dilakukan pada id yang bersangkutan & tidak ada perulangan, karena sifatnya yang unik (satu id sama dengan satu elemen). Sedangkan class dapat digunakan secara berulang-ulang pada karakter pengkodean yang sama (satu class sama dengan beberapa elemen).

  <body expr:class='"loading" + data:blog.mobileClass'>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<div id='content'>

  <header id='header-content'>
    <div class='head-wrap'>
      <div class='header-group'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
      </div><!-- .header-group -->
    </div><!-- .head-wrap -->
  </header><!-- #header-content -->

  <div id='main-wrapper'>
    <div id='main-content'>
  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
    </div><!-- #main-content -->
    <aside id='sidebar-content'>
  <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </aside><!-- #sidebar-content -->
    <div style='clear:both;'></div> <!-- Mungkin lebih baik menggunakan <div class='clear'></div> yang diatur dengan CSS -->
  </div><!-- #main-wrapper -->

  <footer id='footer-content'>
    <div class='foot-wrap'>
      <div id='content-info'>
        <p>&amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593; <br/>Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
      </div><!-- #content-info -->
    </div><!-- .foot-wrap -->
  </footer><!-- #footer-content -->

</div><!-- #content -->
  </body>

Keempat, simpan HTML template hasil modifikasi tersebut. Pada tampilan sederhana, hasil yang ditunjukkan oleh pengkodean di atas adalah menggunakan satu kolom & memanfaatkan seluruh lebar halaman peramban. Oleh karena kita belum melakukan konfigurasi pada CSS (Cascading Style Sheets) dalam markah <head>. Contoh CSS berikut menggunakan fixed layout dengan lebar konten 960px sesuai dengan <meta content='width=960' name='viewport'/>.

 <b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:  
URL:  
Designer: 
-------------------------------------------------------------- */

/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}

/* =Layout
----------------------------------------------- */
#content {
margin: 0 auto;
width: 960px;
}
#header-content,
#main-wrapper,
#footer-content {
width: 100%;
}
#main-content,
#sidebar-content {
display: inline;
position: relative;
}
#main-content {
float: left; /* Tentukan letak main-content di sebelah kanan (right) atau kiri */
width: 640px;
}
#sidebar-content {
float: left;
width: 320px;
}
.header .widget,
.main .widget,
.sidebar .widget {
margin-left: 15px;
margin-right: 15px;
word-wrap: break-word;
}

/* =Global
----------------------------------------------- */
body,
button,
input,
select,
textarea {
color: #000;
font: .9375em/1.6em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
background: #fff;
text-align: left;
width: 100%;
}
body:before, body:after {
content: '';
display: table;
}
body:after {
clear: both;
}

/* Mungkin lebih baik menggunakan CSS berikut dibandingkan dengan <div style="clear:both;"></div> */
.clear {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}

… dan seterusnya …
  ]]></b:skin>

Kelima, pratinjau hasilnya & apabila telah sesuai dengan kriteria tampilan blog yang kita inginkan “simpan” template.

Dengan 5 (lima) langkah di atas, kita telah dapat membuat template blog hasil karya sendiri, meskipun dalam menyelesaikan beberapa tahapan tersebut membutuhkan pemahaman yang lebih tentang CSS dan HTML. Bukan sebatas itu saja, bahkan lebih spesifik akan meliputi berbagai aspek yang dibutuhkan oleh sebuah situs web atau blog agar mendekati aksesibilitas di sisi pengguna. Kata paling sederhana mungkin mengandung makna mudah dibaca serta keterbacaan. Oh, iya! Hampir lupa, untuk pemanfaatan selector class yang digunakan pada beberapa elemen belum ada pada posting di atas. Daripada lupa akan dicontohkan melalui penambahan 3 (tiga) kolom pada footer berikut.

HTML

  <footer id='footer-content'>
    <div class='foot-wrap'>
      <div id='sidebar-footer'>
        <aside class='supplementary'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'/>
  </aside>
        <aside class='supplementary'>
  <b:section class='sidebar' id='sidebar3' preferred='yes'/>
  </aside>
        <aside class='supplementary'>
  <b:section class='sidebar' id='sidebar4' preferred='yes'/>
  </aside>
        <div class='clear'></div>
      </div><!-- #sidebar-footer -->
      <div id='content-info'>
        <p>&amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593;<br/> Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
      </div><!-- #content-info -->
    </div><!-- .foot-wrap -->
  </footer><!-- #footer-content -->

CSS

.supplementary {
display: inline;
float: left;
position: relative;
width: 320px;
}

Catatan: Untuk kode yang berwarna orange, konfigurasi CSS widget dalam section class='sidebar' sama dengan pengkodean sebelumnya (.sidebar .widget).

Sederhana bukan? Jika sebuah elemen memiliki karakteristik yang sama, alangkah lebih baik apabila digabungkan dengan pengkodean elemen lain. Hal tersebut dimaksudkan agar pengkodean lebih mudah dikustomisasi & dengan harapan — mungkin — akan lebih semantik.

Menerapkan Desain yang Responsif

Ketika membuka blog pada layar yang berbeda, mungkin kita akan menemukan satu hal yang unik. Tampilan blog tidak berubah seperti aslinya, terutama bagi blog yang struktur pengkodean menggunakan fixed layout. Tidak jarang kita menggeser ke kanan & ke kiri — lama-lama jari jadi lentik— untuk membaca artikel atau beberapa widget pada sidebar. Idealnya, tampilan yang baik adalah menggeser ke atas & ke bawah.

Sebuah hal yang menarik ketika Blogger™ menambahkan fitur ini dalam kapabilitas tampilan blog pada versi mobile. Namun yang menjadi kendala adalah ketika kita telah menerapkan beberapa conditional tags dalam sebuah pengkodean atau widget, maka hal itu akan menjadi kompleks. Meskipun dalam penerapan untuk versi mobile sudah dapat dikustomisasi menurut keinginan pengelola, seperti menambahkan mobile='yes', mobile='no', dan mobile='only' pada widget ataupun penggunaan conditional tags berikut.

<b:if cond='data:blog.isMobile'>

Sebagai alternatif kita dapat menerapkan desain yang responsif pada blog dengan menggunakan media queries. Bukankah antara perangkat komputer & mobile berbeda dari sisi kekuatan memuat suatu halaman situs web atau blog? Benar sekali, jika ditampilkan dalam default, besar kemungkinan waktu memuat pada mobile akan lebih singkat. Tetapi apabila kita melakukan kustomisasi — pada tampilan mobile — hingga hampir mirip dengan tampilan di perangkat komputer, tentu akan menambah beban juga bukan? Yah, terutama di Blogger™. Berikut contoh sederhana penerapan media queries dalam CSS template — Optimasi Blog menggunakan cara ini.

@media screen and (max-width:800px) {
  …
  CSS untuk media screen dengan lebar maksimal 800px
  …
  <!-- contoh CSS:
  body {
    font-size: .875em;
    line-height: 1.7143em;
  }
  -->
}

@media screen and (max-width:600px) {
  …
  CSS untuk media screen dengan lebar maksimal 600px
  …
}

Atau dengan menggunakan penggabungan media queries (min & max)

@media screen and (min-width:600px) and (max-width:800px) {
  …
  CSS untuk media screen dengan lebar minimal 600px dan maksimal 800px
  …
}

Catatan: kode yang berwarna merah merupakan lebar layar, kita dapat menambah variabel lebar yang lain (1024px, 800px, 600px, 480px, 320px, dan sebagainya) di dalamnya. Dan masih banyak lagi metode media queries lain yang mungkin tidak hanya terbatas pada lebar layar, seperti lebar device (device-width). Kita dapat menelusurinya melalui media queries — W3C (World Wide Web Consortium).

Dengan menggunakan media queries, diharapkan tampilan blog akan sesuai dengan beberapa ukuran lebar layar yang berbeda. Tentunya harus disesuaikan pula dengan pengkodean template pada masing-masing blog. Kemudian akses URL yang dilakukan pengguna mungkin tidak akan bervariasi, seperti penambahan ?m=0 atau ?m=1 di belakang permalink. Hal inilah yang menjadi dasar mengapa saya mencoret “Lihat versi mobile” pada kaki blog ini, namun akan menjadi alternatif apabila akses sedang ‘lemot’ pada pengguna mobile.

Menerapkan Desain yang Responsif

Posted by rike No comments

Ketika membuka blog pada layar yang berbeda, mungkin kita akan menemukan satu hal yang unik. Tampilan blog tidak berubah seperti aslinya, terutama bagi blog yang struktur pengkodean menggunakan fixed layout. Tidak jarang kita menggeser ke kanan & ke kiri — lama-lama jari jadi lentik— untuk membaca artikel atau beberapa widget pada sidebar. Idealnya, tampilan yang baik adalah menggeser ke atas & ke bawah.

Sebuah hal yang menarik ketika Blogger™ menambahkan fitur ini dalam kapabilitas tampilan blog pada versi mobile. Namun yang menjadi kendala adalah ketika kita telah menerapkan beberapa conditional tags dalam sebuah pengkodean atau widget, maka hal itu akan menjadi kompleks. Meskipun dalam penerapan untuk versi mobile sudah dapat dikustomisasi menurut keinginan pengelola, seperti menambahkan mobile='yes', mobile='no', dan mobile='only' pada widget ataupun penggunaan conditional tags berikut.

<b:if cond='data:blog.isMobile'>

Sebagai alternatif kita dapat menerapkan desain yang responsif pada blog dengan menggunakan media queries. Bukankah antara perangkat komputer & mobile berbeda dari sisi kekuatan memuat suatu halaman situs web atau blog? Benar sekali, jika ditampilkan dalam default, besar kemungkinan waktu memuat pada mobile akan lebih singkat. Tetapi apabila kita melakukan kustomisasi — pada tampilan mobile — hingga hampir mirip dengan tampilan di perangkat komputer, tentu akan menambah beban juga bukan? Yah, terutama di Blogger™. Berikut contoh sederhana penerapan media queries dalam CSS template — Optimasi Blog menggunakan cara ini.

@media screen and (max-width:800px) {
  …
  CSS untuk media screen dengan lebar maksimal 800px
  …
  <!-- contoh CSS:
  body {
    font-size: .875em;
    line-height: 1.7143em;
  }
  -->
}

@media screen and (max-width:600px) {
  …
  CSS untuk media screen dengan lebar maksimal 600px
  …
}

Atau dengan menggunakan penggabungan media queries (min & max)

@media screen and (min-width:600px) and (max-width:800px) {
  …
  CSS untuk media screen dengan lebar minimal 600px dan maksimal 800px
  …
}

Catatan: kode yang berwarna merah merupakan lebar layar, kita dapat menambah variabel lebar yang lain (1024px, 800px, 600px, 480px, 320px, dan sebagainya) di dalamnya. Dan masih banyak lagi metode media queries lain yang mungkin tidak hanya terbatas pada lebar layar, seperti lebar device (device-width). Kita dapat menelusurinya melalui media queries — W3C (World Wide Web Consortium).

Dengan menggunakan media queries, diharapkan tampilan blog akan sesuai dengan beberapa ukuran lebar layar yang berbeda. Tentunya harus disesuaikan pula dengan pengkodean template pada masing-masing blog. Kemudian akses URL yang dilakukan pengguna mungkin tidak akan bervariasi, seperti penambahan ?m=0 atau ?m=1 di belakang permalink. Hal inilah yang menjadi dasar mengapa saya mencoret “Lihat versi mobile” pada kaki blog ini, namun akan menjadi alternatif apabila akses sedang ‘lemot’ pada pengguna mobile.

Penyusunan Dasar Template Blogger.com

Posting ini akan menuturkan tentang beberapa bagian dalam struktur pengkodean dasar template Blogger™, dimana obyek template adalah template Blogger™ yang diakses melalui “Edit HTML”, sehingga opsi Customize dapat diabaikan. Mungkin diterjemahkan dalam bahasa sederhana artinya apabila ingin merubah sesuatu berkenaan struktur pengkodean, maka dilakukan secara manual. Bentuk sederhana HTML pada sebuah situs web atau blog adalah sebagai berikut.

<html>
  <head>
    <title>Format Sederhana HTML</title>
  </head>
  <body>
  </body>
</html>

Ketika kode di atas diaplikasikan pada peramban, maka akan terlihat layar kosong & tab peramban akan menampilkan title. Lebih lanjut, tambahkan baris teks dalam body, contoh: Aku adalah tubuh HTML. Layar peramban akan menambahkan sebuah baris teks sesuai dengan apa yang kita tulis di antara <body> … </body>.

Deklarasi xml (eXtensible Markup Language)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Ketika kita ingin memasukkan daerah geografi atau bahasa yang didukung oleh konten dalam tubuh HTML — tidak perlu menambahkan meta — cukup sisipkan tag lang, contoh: lang='id', lang='en', lang='en-us', lang='fr', dan sebagainya.

<html lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Elemen Head

Head HTML berisi sejumlah markah yang meliputi script, instruksi kepada peramban untuk menemukan stylesheets, memberikan informasi meta, dan lain-lain.

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <data:blog.title/>
    <b:else/>
      <data:blog.pageName/> | <data:blog.title/>
    </b:if>
  </title>
  <meta content='' name=''/>
  <link href='' rel='' type=''/>
  <script src='' type=''/>
  <b:skin><![CDATA[ /* CSS Anda di sini */
body {
  background: #fff;
  color: #000;
  font: .875em/1.7143em Georgia, Times, "Times New Roman", serif;
  text-align: left;
  word-spacing: .075em;
}
… dan seterusnya …
  ]]></b:skin>
 </head>

Elemen Body

Body HTML merupakan tubuh dari HTML (HyperText Markup Language) yang akan menampilkan bentuk pengkodean pada layar peramban. Sedangkan beberapa elemen yang melingkupinya dapat kita uraikan sebagai berikut.

<body expr:class='"loading" + data:blog.mobileClass'>

Navbar

  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

Header

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>

Main (Posting Blog)

  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

Sidebar

<b:section class='sidebar' id='sidebar' preferred='yes'/>

Footer

  <b:section class='footer' id='footer' showaddelement='no'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>

Dari beberapa markah elemen di atas, biasanya untuk menampilkan halaman posting atau halaman statis pada blog, minimal harus ada elemen widget main (posting blog). Sedangkan yang lain dapat dikustomisasi manual, seperti header dapat saja berisi title serta tagline, fungsi fitur navbar dapat kita matikan, dan lain-lain.

Simpulan

Dengan beberapa ringkasan sederhana di atas, mungkin kita telah dapat menggambarkan bagaimana sebuah blog pada Blogger™ dibentuk. Tinggal menambahkan beberapa selector (id dan/atau class) atau elemen-elemen dalam HTML5 (header, article, aside, footer, dan sebagainya) untuk mengapit elemen widget tersebut serta konfigurasi CSS (Cascading Style Sheets) yang dibutuhkan. Sedangkan isi konten kita upayakan agar tetap memberikan tanda, sehingga lebih bermakna bagi pembacanya.

Penyusunan Dasar Template Blogger.com

Posted by rike No comments

Posting ini akan menuturkan tentang beberapa bagian dalam struktur pengkodean dasar template Blogger™, dimana obyek template adalah template Blogger™ yang diakses melalui “Edit HTML”, sehingga opsi Customize dapat diabaikan. Mungkin diterjemahkan dalam bahasa sederhana artinya apabila ingin merubah sesuatu berkenaan struktur pengkodean, maka dilakukan secara manual. Bentuk sederhana HTML pada sebuah situs web atau blog adalah sebagai berikut.

<html>
  <head>
    <title>Format Sederhana HTML</title>
  </head>
  <body>
  </body>
</html>

Ketika kode di atas diaplikasikan pada peramban, maka akan terlihat layar kosong & tab peramban akan menampilkan title. Lebih lanjut, tambahkan baris teks dalam body, contoh: Aku adalah tubuh HTML. Layar peramban akan menambahkan sebuah baris teks sesuai dengan apa yang kita tulis di antara <body> … </body>.

Deklarasi xml (eXtensible Markup Language)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Ketika kita ingin memasukkan daerah geografi atau bahasa yang didukung oleh konten dalam tubuh HTML — tidak perlu menambahkan meta — cukup sisipkan tag lang, contoh: lang='id', lang='en', lang='en-us', lang='fr', dan sebagainya.

<html lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Elemen Head

Head HTML berisi sejumlah markah yang meliputi script, instruksi kepada peramban untuk menemukan stylesheets, memberikan informasi meta, dan lain-lain.

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <data:blog.title/>
    <b:else/>
      <data:blog.pageName/> | <data:blog.title/>
    </b:if>
  </title>
  <meta content='' name=''/>
  <link href='' rel='' type=''/>
  <script src='' type=''/>
  <b:skin><![CDATA[ /* CSS Anda di sini */
body {
  background: #fff;
  color: #000;
  font: .875em/1.7143em Georgia, Times, "Times New Roman", serif;
  text-align: left;
  word-spacing: .075em;
}
… dan seterusnya …
  ]]></b:skin>
 </head>

Elemen Body

Body HTML merupakan tubuh dari HTML (HyperText Markup Language) yang akan menampilkan bentuk pengkodean pada layar peramban. Sedangkan beberapa elemen yang melingkupinya dapat kita uraikan sebagai berikut.

<body expr:class='"loading" + data:blog.mobileClass'>

Navbar

  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

Header

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>

Main (Posting Blog)

  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

Sidebar

<b:section class='sidebar' id='sidebar' preferred='yes'/>

Footer

  <b:section class='footer' id='footer' showaddelement='no'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>

Dari beberapa markah elemen di atas, biasanya untuk menampilkan halaman posting atau halaman statis pada blog, minimal harus ada elemen widget main (posting blog). Sedangkan yang lain dapat dikustomisasi manual, seperti header dapat saja berisi title serta tagline, fungsi fitur navbar dapat kita matikan, dan lain-lain.

Simpulan

Dengan beberapa ringkasan sederhana di atas, mungkin kita telah dapat menggambarkan bagaimana sebuah blog pada Blogger™ dibentuk. Tinggal menambahkan beberapa selector (id dan/atau class) atau elemen-elemen dalam HTML5 (header, article, aside, footer, dan sebagainya) untuk mengapit elemen widget tersebut serta konfigurasi CSS (Cascading Style Sheets) yang dibutuhkan. Sedangkan isi konten kita upayakan agar tetap memberikan tanda, sehingga lebih bermakna bagi pembacanya.

Formulir Kontak Manual

Para blogger tentu sudah tidak asing lagi dengan yang namanya “Formulir Kontak”. Formulir kontak berguna sebagai media interaksi pengunjung agar terhubung langsung ke email pengelola blog. Formulir ini berbeda dengan meninggalkan komentar & memiliki skala yang lebih luas, contoh: memberikan saran berkenaan dengan blog atau permintaan posting, bertanya tentang suatu topik posting ketika komentar pada posting tersebut telah ditutup, dan sebagainya

Banyak layanan pihak ketiga yang menyediakan fasilitas ini, antara lain: EmailMeForm, Kontactr, Foxyform & FreeContactForm. Nah, sekarang bagaimana jika kita ingin membuat formulir kontak sendiri? Salah satu alternatifnya adalah dengan menggunakan PHP (Hypertext Preprocessor), seperti yang akan Optimasi Blog deskripsikan berikut.

Web Hosting

Langkah awal, kita harus memiliki hosting. Mungkin salah satu situs web yang menyediakannya secara gratis adalah 000webhost.com (jika tidak berkeberatan, taut tersebut merupakan afiliasi Optimasi Blog di 000webhost) atau dapat menggunakan hosting lain. Kemudian buat satu subdomain gratis yang disediakan oleh layanan tersebut. Silakan buka akun email sesuai dengan email yang didaftarkan pada 000webhost untuk melihat konfirmasi akun. Jika sudah, kembali ke 000webhost & beranjak ke Cpanel. Klik icon “File Manager” dan masukkan kata sandi sesuai dengan waktu pendaftaran atau ganti kata sandi berbeda (baru) dengan melakukan akses ke “View FTP Detail”. Sekarang kita berada dalam File Manager, buka berkas public_html. Hapus file “default.php”, kemudian buat file baru bernama “index.php” yang berisi Silence is golden.

<?php
// Silence is golden.
?>

Nah, sekarang subdomain gratis telah dapat kita pergunakan untuk menyimpan berbagai berkas. Selanjutnya masih di dalam berkas public_html, kita membuat file PHP yang nantinya akan dimunculkan sebagai formulir isian kontak.

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>
<?php error_reporting( 0 );?>
<?php
//Memperbaiki kesalahan pemberitahuan pada debug
$nameError = '';
$emailError = '';
$commentError = '';
//Mengecek apakah isi form sudah dikirim
if(isset($_POST['submitted'])) {
 //Mengecek apakah chaptcha rahasia terisi
 if(trim($_POST['checking']) !== '') {
  $captchaError = true;
 } else {
  //Mengecek apakah kolom nama sudah diisi
  if(trim($_POST['contactName']) === '') {
   $nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong
   $hasError = true;
  } else {
   $name = trim($_POST['contactName']);
  }
  //Mengecek apakah kolom alamat email sudah diisi dan valid
  if(trim($_POST['email']) === '')  {
   $emailError = 'Anda lupa untuk memasukkan alamat email';//Pesan error jika kolom email kosong
   $hasError = true;
  } else if (!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", trim($_POST['email']))) {
   $emailError = 'Alamat email yang Anda masukkan tidak valid';//Pesan error jika alamat email tidak valid
   $hasError = true;
  } else {
   $email = trim($_POST['email']);
  }
  //Mengecek apakah kolom isi pesan sudah disi
  if(trim($_POST['comments']) === '') {
   $commentError = 'Apakah Anda ingin mengirim pesan kosong? Silakan isi pesan Anda';//Pesan error jika kolom pesan masih kosong
   $hasError = true;
  } else {
   if(function_exists('stripslashes')) {
    $comments = stripslashes(trim($_POST['comments']));
   } else {
    $comments = trim($_POST['comments']);
   }
  }
  //Mengirimkan pesan, jika semua kolom telah diisi dengan valid
  if(!isset($hasError)) {
   $emailTo = 'email@example.com';//Alamat email tujuan, ganti dengan email anda
   $subject = 'Pesan via formulir kontak dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak
   $sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim
   $body = "Nama: $name \n\nEmail: $email \n\nIsi Pesan: $comments";//Isi Email
   $headers = 'From: Optimasi Blog <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email
   mail($emailTo, $subject, $body, $headers);
   if($sendCopy == true) {
    $subject = 'Pesan Anda dari nama blog Anda';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang
    $headers = 'From: admin blog <email@example.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya
    mail($email, $subject, $body, $headers);
   }
   $emailSent = true;
  }
 }
} ?>
<!DOCTYPE html>
<html>
<head>
<title>Formulir Kontak</title>
<link rel="stylesheet" href="/css/style.css.php"/>
</head>
<body>
<?php if(isset($emailSent) && $emailSent == true) { ?>
 <h3>Terima kasih, <?=$name;?></h3>
 <p>Pesan Anda telah dikirim, kami akan segera membalas secepat mungkin.</p>
<?php } else { ?>
 <?php if(isset($hasError) || isset($captchaError)) { ?>
  <p class="error">Maaf, tampaknya ada masalah dalam pengiriman pesan Anda, silakan coba lagi :)<p>
 <?php } ?>
 <form action="contact-form.php" id="contactForm" method="post">
  <p class="contact-form-author">
   <label for="contactName">Nama <small>*</small></label>
   <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="30" tabindex="1" class="requiredField" />
   <?php if($nameError != '') { ?>
    <span class="error"><?=$nameError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-email">
   <label for="email">Email <small>*</small></label>
   <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" size="30" tabindex="2" class="requiredField email" />
   <?php if($emailError != '') { ?>
    <span class="error"><?=$emailError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-message">
   <label for="commentsText">Pesan <small>*</small></label>
   <textarea name="comments" id="commentsText" cols="45" rows="8" tabindex="3" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
   <?php if($commentError != '') { ?>
    <span class="error"><?=$commentError;?></span>
   <?php } ?>
  </p>
  <p class="inline">
   <input type="checkbox" name="sendCopy" id="sendCopy" tabindex="4" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda.</label>
  </p>
  <p class="screenReader">
   <label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" size="10" tabindex="5" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
   </p><!--Chaptca rahasia-->
   <p class="contact-form-submitted">
    <input name="submitted" type="submit" id="submitted" tabindex="6" value="Kirim Pesan" />
   </p>
 </form><!-- #contactForm -->
<?php } ?>
</body>
</html>

Untuk kode yang berwarna merah merupakan kompres file dengan menggunakan gzip & warna biru diisi dengan email serta nama blog, sesuaikan dengan keterangan yang diberi warna hijau. Beri nama file di atas menjadi “contact-form.php” (tanpa tanda petik). Adapun <link rel="stylesheet" href="/css/style.css.php"/> akan kita buat terpisah dari file induk (contact-form.php)

Buat direktori baru dengan nama “css” (tanpa tanda petik). Masuk ke dalam direktori css, kemudian tambahkan file baru dengan nama “style.css” (tanpa tanda petik) yang isinya lebih kurang sebagai berikut.

<?php header("Content-type: text/css"); ?>
body,
input,
textarea {
 color: #444;
 font: 93.75%/1.6em Georgia, serif;
}
body {
 background: #fff;
 margin: 0;
 padding: 0;
 text-align: left;
 width: 100%;
}
body:before, body:after {
 content: "";
 display: table;
}
body:after {
 clear: both;
}
p {
 font-size: 1em;
 line-height: 1.6em;
 margin-bottom: .8em;
 margin-top: 0;
}
small,
.error {
 color: #f00;
 font-size: .8em;
 line-height: 2em;
}
h3 {
 font-size: 1.3333em;
 line-height: 1.2em;
 margin-bottom: .6em;
}
input,
textarea {
 font-size: 1em; /* Corrects font size not being inherited in all browsers */
 margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
 vertical-align: baseline; /* Improves appearance and consistency in all browsers */
 *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
input {
 line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
 *overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
 border: 0;
 padding: 0;
}
input[type=text],
input[type=email],
textarea {
 color: #666;
 border: 1px solid #ddd;
 border-radius: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
 color: #111;
}
input[type=text],
input[type=email] {
 padding: 6px;
 width: 50%;
}
input[type=text]#checking {
 width: 10%;
}
input[type="checkbox"] {
 box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
 margin-right: 6px;
 padding: 0; /* Addresses excess padding in IE8/9 */
}
label.screenReader {
 margin-right: 6px;
}
input[type="submit"] {
 border: 1px solid #ddd;
 border-color: #ccc #ccc #bbb #ccc;
 border-radius: 3px;
 background: #fafafa; /* Old browsers */
 background: -moz-linear-gradient(top,  #fafafa 60%, #e6e6e6 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* IE10+ */
 background: linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
 box-shadow: inset 0 2px 1px #fff;
 color: rgba(0,0,0,.8);
 cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
 -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
 font: 1em/1.6em Georgia, serif;
 padding: .4em .8em;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
input[type="submit"]:hover {
 background: #f5f5f5; /* Old browsers */
 background: -moz-linear-gradient(top,  #f5f5f5 60%, #dcdcdc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f5f5f5), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* IE10+ */
 background: linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */
 border-color: #bbb #bbb #aaa #bbb;
}
input[type="submit"]:focus,
input[type="submit"]:active {
 border-color: #aaa #bbb #bbb #bbb;
 box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
 box-shadow: inset 0 2px 2px rgba(0,0,0,.15);
}
textarea,
.contact-form-author input[type="text"],
.contact-form-email input[type="text"] {
 display: block;
}
textarea {
 overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
 padding: 6px 0 6px 6px;
 resize: vertical;
 vertical-align: top; /* Improves readability and alignment in all browsers */
 width: 95%;
}
@media screen and (max-width:800px) {
 body {
  font-size: .8667em;
 }
}
@media screen and (max-width:320px) {
 body {
  font-size: .8em;
 }
}
@media screen and (max-width:240px) {
 body {
  font-size: .7333em;
 }
}

Silakan Anda kustomisasi pengkodean CSS (Cascading Style Sheets) di atas, sehingga sesuai dengan keinginan dan/atau template Anda. Jangan lupa membuat satu file baru (dalam folder css) lagi untuk mengompresi CSS tersebut & beri nama “style.css.php” (tanpa tanda petik).

<?php
ob_start("ob_gzhandler");
ob_start("compress");
// required header info and character set
header("Content-type: text/css; charset: UTF-8");
// duration of cached content (Cache for 1 weeks)
$offset = 60 * 60 * 24 * 7;
$ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
// cache control to process
header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
//set etag-header
header('ETag: "'.md5($ts).'"');
// expiration header format
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
// send cache expiration header to browser
header($ExpStr);
// initialize compress function for white-space removal
ob_start("compress");
// Begin function compress
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// remove tabs, spaces, new lines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
// remove unnecessary spaces
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;}
require_once('style.css');
ob_end_flush();
?>

Dua file dalam direktori css, yakni style.css dan style.css.php dengan pemanggilan <link rel="stylesheet" href="/css/style.css.php"/> pada file contact-form.php

Sekarang formulir kontak telah siap dimanfaatkan serta diletakkan pada blog, biasanya dalam halaman kontak. Sebelumnya — mungkin ini sifatnya opsional (tambahan) — menambah beberapa pengaturan pada .htaccess agar lebih maksimal. Baris pertama umumnya telah otomatis ditambahkan, tinggal melakukan konfigurasi untuk baris-baris selanjutnya. Taut kredit khusus untuk Mutohar Alwi dalam posting Cara Setting Expired Header.

# Do not remove this line, otherwise mod_rewrite rules will stop working
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# Prevents directory  listing
IndexIgnore *

# Strong HTACCESS Protection
<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</Files>

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# BEGIN Browser Cache
<IfModule mod_mime.c>
AddType text/css .css
AddType application/x-javascript .js
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A604800
ExpiresByType application/x-javascript A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
<FilesMatch "\.(css|js)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
# END Browser Cache

Isi keseluruhan public_html (subdomain) yang terdiri dari satu folder css dan tiga buah file (.htaccess, index.php, dan contact-form.php).

Implementasi Formulir Kontak dalam Blog

Setelah melakukan beberapa langkah-langkah di atas pada hosting kita untuk mendukung fasilitas kontak. Sekarang bagaimana cara melakukan konfigurasi formulir kontak tersebut dalam blog? Cukup ringkas, buat halaman statis baru (contoh: h**p://namablog.blogspot.com/p/kontak.html) dengan beberapa kalimat sebagai pembuka. Kemudian tambahkan markah berikut di bawah kalimat pembuka.

<object type="text/html" data="h**p://namasubdomain/contact-form.php"></object>

Perhatikan namasubdomain (warna merah) harus sesuai dengan yang kita daftarkan, contoh: optimasi.netai.net, optimasi.site90.com, dan sebagainya. Kemudian tambahkan CSS berikut pada template untuk mengatur markah object & letakkan di bawah ]]></b:skin>.

<b:if cond='data:blog.url == "h**p://namablog.blogspot.com/p/kontak.html"'>
<style>
object {
  overflow: hidden;
  height:630px;
  width:100%;
}
</style>
</b:if>

Kemungkinan yang banyak diutak-atik adalah CSS object pada properti height agar formulir kontak tampil penuh, ketika memunculkan pesan error pada saat mengklik tombol “Kirim Pesan”. Taut demonstrasi dapat dilihat pada halaman Kontak Optimasi Blog. Berikut beberapa penampakkan hasil uji coba formulir komentar pada akun email pengelola blog.

Bosan membacanya? Oleh karena terlalu panjang, meskipun sebenarnya dapat dikustomisasi lebih singkat. Posting membuat formulir kontak ini merupakan bahan dokumentasi penulis serta sedikit menambah wawasan kita tentang ‘dunia’ hosting & bagaimana melakukan optimalisasi terhadap sejumlah file didalamnya. Tidak menutup kemungkinan terdapat kekeliruan dalam penyampaian atau pengkodean di atas, sehingga dibutuhkan kritik serta saran agar dapat memperbaiki posting ini.

Bahan Bacaan: How to create a built-in contact form for your WordPress theme oleh Jean-Baptiste Jung

Formulir Kontak Manual

Posted by rike No comments

Para blogger tentu sudah tidak asing lagi dengan yang namanya “Formulir Kontak”. Formulir kontak berguna sebagai media interaksi pengunjung agar terhubung langsung ke email pengelola blog. Formulir ini berbeda dengan meninggalkan komentar & memiliki skala yang lebih luas, contoh: memberikan saran berkenaan dengan blog atau permintaan posting, bertanya tentang suatu topik posting ketika komentar pada posting tersebut telah ditutup, dan sebagainya

Banyak layanan pihak ketiga yang menyediakan fasilitas ini, antara lain: EmailMeForm, Kontactr, Foxyform & FreeContactForm. Nah, sekarang bagaimana jika kita ingin membuat formulir kontak sendiri? Salah satu alternatifnya adalah dengan menggunakan PHP (Hypertext Preprocessor), seperti yang akan Optimasi Blog deskripsikan berikut.

Web Hosting

Langkah awal, kita harus memiliki hosting. Mungkin salah satu situs web yang menyediakannya secara gratis adalah 000webhost.com (jika tidak berkeberatan, taut tersebut merupakan afiliasi Optimasi Blog di 000webhost) atau dapat menggunakan hosting lain. Kemudian buat satu subdomain gratis yang disediakan oleh layanan tersebut. Silakan buka akun email sesuai dengan email yang didaftarkan pada 000webhost untuk melihat konfirmasi akun. Jika sudah, kembali ke 000webhost & beranjak ke Cpanel. Klik icon “File Manager” dan masukkan kata sandi sesuai dengan waktu pendaftaran atau ganti kata sandi berbeda (baru) dengan melakukan akses ke “View FTP Detail”. Sekarang kita berada dalam File Manager, buka berkas public_html. Hapus file “default.php”, kemudian buat file baru bernama “index.php” yang berisi Silence is golden.

<?php
// Silence is golden.
?>

Nah, sekarang subdomain gratis telah dapat kita pergunakan untuk menyimpan berbagai berkas. Selanjutnya masih di dalam berkas public_html, kita membuat file PHP yang nantinya akan dimunculkan sebagai formulir isian kontak.

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>
<?php error_reporting( 0 );?>
<?php
//Memperbaiki kesalahan pemberitahuan pada debug
$nameError = '';
$emailError = '';
$commentError = '';
//Mengecek apakah isi form sudah dikirim
if(isset($_POST['submitted'])) {
 //Mengecek apakah chaptcha rahasia terisi
 if(trim($_POST['checking']) !== '') {
  $captchaError = true;
 } else {
  //Mengecek apakah kolom nama sudah diisi
  if(trim($_POST['contactName']) === '') {
   $nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong
   $hasError = true;
  } else {
   $name = trim($_POST['contactName']);
  }
  //Mengecek apakah kolom alamat email sudah diisi dan valid
  if(trim($_POST['email']) === '')  {
   $emailError = 'Anda lupa untuk memasukkan alamat email';//Pesan error jika kolom email kosong
   $hasError = true;
  } else if (!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", trim($_POST['email']))) {
   $emailError = 'Alamat email yang Anda masukkan tidak valid';//Pesan error jika alamat email tidak valid
   $hasError = true;
  } else {
   $email = trim($_POST['email']);
  }
  //Mengecek apakah kolom isi pesan sudah disi
  if(trim($_POST['comments']) === '') {
   $commentError = 'Apakah Anda ingin mengirim pesan kosong? Silakan isi pesan Anda';//Pesan error jika kolom pesan masih kosong
   $hasError = true;
  } else {
   if(function_exists('stripslashes')) {
    $comments = stripslashes(trim($_POST['comments']));
   } else {
    $comments = trim($_POST['comments']);
   }
  }
  //Mengirimkan pesan, jika semua kolom telah diisi dengan valid
  if(!isset($hasError)) {
   $emailTo = 'email@example.com';//Alamat email tujuan, ganti dengan email anda
   $subject = 'Pesan via formulir kontak dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak
   $sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim
   $body = "Nama: $name \n\nEmail: $email \n\nIsi Pesan: $comments";//Isi Email
   $headers = 'From: Optimasi Blog <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email
   mail($emailTo, $subject, $body, $headers);
   if($sendCopy == true) {
    $subject = 'Pesan Anda dari nama blog Anda';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang
    $headers = 'From: admin blog <email@example.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya
    mail($email, $subject, $body, $headers);
   }
   $emailSent = true;
  }
 }
} ?>
<!DOCTYPE html>
<html>
<head>
<title>Formulir Kontak</title>
<link rel="stylesheet" href="/css/style.css.php"/>
</head>
<body>
<?php if(isset($emailSent) && $emailSent == true) { ?>
 <h3>Terima kasih, <?=$name;?></h3>
 <p>Pesan Anda telah dikirim, kami akan segera membalas secepat mungkin.</p>
<?php } else { ?>
 <?php if(isset($hasError) || isset($captchaError)) { ?>
  <p class="error">Maaf, tampaknya ada masalah dalam pengiriman pesan Anda, silakan coba lagi :)<p>
 <?php } ?>
 <form action="contact-form.php" id="contactForm" method="post">
  <p class="contact-form-author">
   <label for="contactName">Nama <small>*</small></label>
   <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="30" tabindex="1" class="requiredField" />
   <?php if($nameError != '') { ?>
    <span class="error"><?=$nameError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-email">
   <label for="email">Email <small>*</small></label>
   <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" size="30" tabindex="2" class="requiredField email" />
   <?php if($emailError != '') { ?>
    <span class="error"><?=$emailError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-message">
   <label for="commentsText">Pesan <small>*</small></label>
   <textarea name="comments" id="commentsText" cols="45" rows="8" tabindex="3" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
   <?php if($commentError != '') { ?>
    <span class="error"><?=$commentError;?></span>
   <?php } ?>
  </p>
  <p class="inline">
   <input type="checkbox" name="sendCopy" id="sendCopy" tabindex="4" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda.</label>
  </p>
  <p class="screenReader">
   <label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" size="10" tabindex="5" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
   </p><!--Chaptca rahasia-->
   <p class="contact-form-submitted">
    <input name="submitted" type="submit" id="submitted" tabindex="6" value="Kirim Pesan" />
   </p>
 </form><!-- #contactForm -->
<?php } ?>
</body>
</html>

Untuk kode yang berwarna merah merupakan kompres file dengan menggunakan gzip & warna biru diisi dengan email serta nama blog, sesuaikan dengan keterangan yang diberi warna hijau. Beri nama file di atas menjadi “contact-form.php” (tanpa tanda petik). Adapun <link rel="stylesheet" href="/css/style.css.php"/> akan kita buat terpisah dari file induk (contact-form.php)

Buat direktori baru dengan nama “css” (tanpa tanda petik). Masuk ke dalam direktori css, kemudian tambahkan file baru dengan nama “style.css” (tanpa tanda petik) yang isinya lebih kurang sebagai berikut.

<?php header("Content-type: text/css"); ?>
body,
input,
textarea {
 color: #444;
 font: 93.75%/1.6em Georgia, serif;
}
body {
 background: #fff;
 margin: 0;
 padding: 0;
 text-align: left;
 width: 100%;
}
body:before, body:after {
 content: "";
 display: table;
}
body:after {
 clear: both;
}
p {
 font-size: 1em;
 line-height: 1.6em;
 margin-bottom: .8em;
 margin-top: 0;
}
small,
.error {
 color: #f00;
 font-size: .8em;
 line-height: 2em;
}
h3 {
 font-size: 1.3333em;
 line-height: 1.2em;
 margin-bottom: .6em;
}
input,
textarea {
 font-size: 1em; /* Corrects font size not being inherited in all browsers */
 margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
 vertical-align: baseline; /* Improves appearance and consistency in all browsers */
 *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
input {
 line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
 *overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
 border: 0;
 padding: 0;
}
input[type=text],
input[type=email],
textarea {
 color: #666;
 border: 1px solid #ddd;
 border-radius: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
 color: #111;
}
input[type=text],
input[type=email] {
 padding: 6px;
 width: 50%;
}
input[type=text]#checking {
 width: 10%;
}
input[type="checkbox"] {
 box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
 margin-right: 6px;
 padding: 0; /* Addresses excess padding in IE8/9 */
}
label.screenReader {
 margin-right: 6px;
}
input[type="submit"] {
 border: 1px solid #ddd;
 border-color: #ccc #ccc #bbb #ccc;
 border-radius: 3px;
 background: #fafafa; /* Old browsers */
 background: -moz-linear-gradient(top,  #fafafa 60%, #e6e6e6 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* IE10+ */
 background: linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
 box-shadow: inset 0 2px 1px #fff;
 color: rgba(0,0,0,.8);
 cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
 -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
 font: 1em/1.6em Georgia, serif;
 padding: .4em .8em;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
input[type="submit"]:hover {
 background: #f5f5f5; /* Old browsers */
 background: -moz-linear-gradient(top,  #f5f5f5 60%, #dcdcdc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f5f5f5), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* IE10+ */
 background: linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */
 border-color: #bbb #bbb #aaa #bbb;
}
input[type="submit"]:focus,
input[type="submit"]:active {
 border-color: #aaa #bbb #bbb #bbb;
 box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
 box-shadow: inset 0 2px 2px rgba(0,0,0,.15);
}
textarea,
.contact-form-author input[type="text"],
.contact-form-email input[type="text"] {
 display: block;
}
textarea {
 overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
 padding: 6px 0 6px 6px;
 resize: vertical;
 vertical-align: top; /* Improves readability and alignment in all browsers */
 width: 95%;
}
@media screen and (max-width:800px) {
 body {
  font-size: .8667em;
 }
}
@media screen and (max-width:320px) {
 body {
  font-size: .8em;
 }
}
@media screen and (max-width:240px) {
 body {
  font-size: .7333em;
 }
}

Silakan Anda kustomisasi pengkodean CSS (Cascading Style Sheets) di atas, sehingga sesuai dengan keinginan dan/atau template Anda. Jangan lupa membuat satu file baru (dalam folder css) lagi untuk mengompresi CSS tersebut & beri nama “style.css.php” (tanpa tanda petik).

<?php
ob_start("ob_gzhandler");
ob_start("compress");
// required header info and character set
header("Content-type: text/css; charset: UTF-8");
// duration of cached content (Cache for 1 weeks)
$offset = 60 * 60 * 24 * 7;
$ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
// cache control to process
header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
//set etag-header
header('ETag: "'.md5($ts).'"');
// expiration header format
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
// send cache expiration header to browser
header($ExpStr);
// initialize compress function for white-space removal
ob_start("compress");
// Begin function compress
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// remove tabs, spaces, new lines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
// remove unnecessary spaces
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;}
require_once('style.css');
ob_end_flush();
?>

Dua file dalam direktori css, yakni style.css dan style.css.php dengan pemanggilan <link rel="stylesheet" href="/css/style.css.php"/> pada file contact-form.php

Sekarang formulir kontak telah siap dimanfaatkan serta diletakkan pada blog, biasanya dalam halaman kontak. Sebelumnya — mungkin ini sifatnya opsional (tambahan) — menambah beberapa pengaturan pada .htaccess agar lebih maksimal. Baris pertama umumnya telah otomatis ditambahkan, tinggal melakukan konfigurasi untuk baris-baris selanjutnya. Taut kredit khusus untuk Mutohar Alwi dalam posting Cara Setting Expired Header.

# Do not remove this line, otherwise mod_rewrite rules will stop working
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# Prevents directory  listing
IndexIgnore *

# Strong HTACCESS Protection
<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</Files>

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# BEGIN Browser Cache
<IfModule mod_mime.c>
AddType text/css .css
AddType application/x-javascript .js
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A604800
ExpiresByType application/x-javascript A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
<FilesMatch "\.(css|js)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
# END Browser Cache

Isi keseluruhan public_html (subdomain) yang terdiri dari satu folder css dan tiga buah file (.htaccess, index.php, dan contact-form.php).

Implementasi Formulir Kontak dalam Blog

Setelah melakukan beberapa langkah-langkah di atas pada hosting kita untuk mendukung fasilitas kontak. Sekarang bagaimana cara melakukan konfigurasi formulir kontak tersebut dalam blog? Cukup ringkas, buat halaman statis baru (contoh: h**p://namablog.blogspot.com/p/kontak.html) dengan beberapa kalimat sebagai pembuka. Kemudian tambahkan markah berikut di bawah kalimat pembuka.

<object type="text/html" data="h**p://namasubdomain/contact-form.php"></object>

Perhatikan namasubdomain (warna merah) harus sesuai dengan yang kita daftarkan, contoh: optimasi.netai.net, optimasi.site90.com, dan sebagainya. Kemudian tambahkan CSS berikut pada template untuk mengatur markah object & letakkan di bawah ]]></b:skin>.

<b:if cond='data:blog.url == "h**p://namablog.blogspot.com/p/kontak.html"'>
<style>
object {
  overflow: hidden;
  height:630px;
  width:100%;
}
</style>
</b:if>

Kemungkinan yang banyak diutak-atik adalah CSS object pada properti height agar formulir kontak tampil penuh, ketika memunculkan pesan error pada saat mengklik tombol “Kirim Pesan”. Taut demonstrasi dapat dilihat pada halaman Kontak Optimasi Blog. Berikut beberapa penampakkan hasil uji coba formulir komentar pada akun email pengelola blog.

Bosan membacanya? Oleh karena terlalu panjang, meskipun sebenarnya dapat dikustomisasi lebih singkat. Posting membuat formulir kontak ini merupakan bahan dokumentasi penulis serta sedikit menambah wawasan kita tentang ‘dunia’ hosting & bagaimana melakukan optimalisasi terhadap sejumlah file didalamnya. Tidak menutup kemungkinan terdapat kekeliruan dalam penyampaian atau pengkodean di atas, sehingga dibutuhkan kritik serta saran agar dapat memperbaiki posting ini.

Bahan Bacaan: How to create a built-in contact form for your WordPress theme oleh Jean-Baptiste Jung