Membuat template blogspot harus memperhatikan HTML yang menjadi dasar sebuah website blog. Bila sudah mengalami updating dalam HTML menjadi HTML5, anda harus mengikutinya. Hal ini untuk mendukung HTML ke teknologi terbaru seperti teknologi multimedia dan lainnya. Sekarang ini, HTML masih dalam update di HTML5. Jadi, anda harus menggunakan HTM5 sebagai pembuatan template blogspot. Tidak banyak perubahan yang terjadi di HTML5 dari standar HTML awal. Menariknya, template blog bawaan blogger memang sudah dirancang sesuai HTML5. Jadi, anda tidak perlu berupaya melakukukan update.
Pengaturan Areah <HEAD> Template Blogspost
Berikut adalah standar HTML5 di area <head> untuk pembuatan template blogspot sesuai buku “Proyek Membangun Responsive Web Design” oleh Husein Alatas.1. <html lang="en">
Pengaturan ini memang dianggap sepele karena sekedar mencantumkan kode html yang disertai “lang=’en’”. Tetapi itulah yang mungkin diterapkan dalam pembuatan template blogspot. Memang, ada template blogspot yang tidak memakai pengaturan ini. tujuannya hanya sebagai simbol penyesuaian bahwa bahasa yang dipakai memang sesuai perintah. Kalau misalkan berbahasa Indonesia, tentu template harus diberi kode lang=”id” dan lainnya sesuai kode bahasa masing-masing negara.
2. <meta charset="utf-8">
Menunjukkan karakter ecoding yang digunakan. Bila misalkan mengandung perintah utf-8 alias Unicode utf-8 berarti itulah karakter ecodingnya. Namun banyak blogger yang menyelipkan di xml dengan pengkodean seperti ini: <?xml version="1.0" encoding="UTF-8" ?>.
3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
Tag di atas berguna untuk pemaksaan atas browser yang bandel alias browser yang masih menggunakan versi jadul seperti Internet Eksplorer agar bisa menyesuaikan dengan versi alias teknologi terkini. Penulisan lain dari beberapa template seperti ini: <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
Pada dasarnya, viewport adalah sebuah alat yang bertujuan untuk menampilkan sebuah halaman web. Apapun berangkatnya, mulai dari PC sampai hp, memang menggunakan viewport sehingga mampu menampilkan sebuah halaman website. Sedangkan tag viewport sendiri adalah pengaturan bagaimana layar ditampilkan di dalam browser, biasanya untuk ditampilkan di mobile atau tablet yang ukurannya kecil.
Content="width=device-width” untuk mengatur tampilan lebar awal pada sebuah browser yang disesuaikan dengan tampilan lebar sebuah mobile device. Tentunya, anda membutuhkan nilai yang ditandai dengan initial-scale=1 sebagai pengatur layar zoom pada saat ditampilkan. Biasanya ditentukan angka 1 karena itu ukuran yang paling normal dan umum.
Namun ada penulisan kode viewport seperti ini: <meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/>
Elemen-Elemen Baru Yang Ada di HTML5 DI Blogspot
Setiap template blogspot sudah memenuhi standar HTML5. Untuk itu, anda tidak boleh berjalan sendiri dalam pembuatan blog. Apalagi, anda membuat template lewat CMS bawaan blogger atau wordpress, anda harus mematuhi hal ini.1. <article>
Elemen <article> bertujuan untuk konten, apapun jenis kontennya. Memang, bertuliskan “article”. Tetapi, itu tidak terpaku hanya pada artikel. Intinya adalah bagian pos yang lazim digunakan dalam banyak blog. Namun, CMS bawaan blogger pun memiliki memiliki elemen <article> namun kode perintahnya adalah <article class='post'> yang akan mengarah pada CSS .post bawaan template blogger.
2. <section>
Elemen <section> melingkupi widget-widget bawaan blogger. Artinya, elemen ini kotak bagunan blogspot yang akan menyempurnakan template blogspot. Ada kotak bagian header, post, sidebar, footer, navigasi dan sebagainya. Tapi elemen bawaan blogger adalah seperti ini:
<b:section class='center' id='center' preferred='yes'>
<b:widget id='HTML2' locked='false' title='.' type='HTML'>
<section>
</b:widget>
</b:section>
Tanpa menggunakan <section> anda masih bisa menampilkan hasil pengkodean di halaman web. Tetapi, anda tidak bisa membuat suatu widget yang akan tampil di bagian tata letak.
1. <nav>
Elemen <nav> biasanya tidak disertai elemen <section> karena hal itu akan rusak bila kode navigasi dimasukkan dalam suatu widget. Artinya, kode navigasi untuk menu harus diletakkan langsung di badan HTML yang akan memunculkan menu-menu.
2. <aside>
Halaman konten alias artikel harus terpisah dengan sidebar. Pemisahan ini harus menggunakan kode <aside>. Pemisahan ini mungkin juga bertujuan untuk membangun template blog yang SEO friendly sehingga optimasi konten tidak diganggu dengan tampilan sidebar.
Untuk pengaturan kodenya seperti ini.
<aside id='sidebar-wrapper'>
<div class='sidebar-container'>
<b:section class='sidebar' id='sidebar' preferred='yes' />
<b:widget id='HTML3' locked='false' title='Sponsor' type='HTML'>
<div class='sidebar-container'>
</aside>
EmoticonEmoticon