Cara Membuat Blogspot Valid HTML5

Posted by Mahesa Putra on Sunday, June 17, 2012

Cara Membuat Template Blogspot Valid HTML5


Setelah berhasil memvalidasi blog ini sebagai template valid HTML5 akhirnya Saya memutuskan untuk memposting tutorial mengenai Cara Membuat Template Blogspot Valid HTML5 atau Cara Membuat Blogspot Valid HTML5.

Yang saya terapkan dalam tutorial membuat blogspot template valid html5 ini saya sesuaikan dengan apa yang pernah saya praktekan secara langsung, untuk kebenaran kode-kodenya saya belum berani mengatakan bahwa kode-kode yang saya terapkan dalam tutorial membuat blogspot valid html5 yang saya buat ini adalah kode yang benar 100% karena kode yang saya terapkan hanya kode-kode HTML5 yang saya dapatkan dari HTML5 Tutorial di w3schools.com/html5/, sedangkan menurut informasi yang saya dapatkan dari W3schools tersebut bahwa HTML5 masih belum sempurna untuk diterapkan pada semua browser, jadi masih menunggu update dari para developernya.

Jika Anda masih tetap ingin menggunakan cara yang saya terapkan dalam menerapkan HTML5 di blogger silakan ikuti cara membuat template blogspot valid html5 di validator.w3.org berikut ini:

Pertama yang harus Anda lakukan adalah dengan cara mengubah struktur header template blogspot Anda menjadi seperti dibawah ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='tutorial mengenai Cara Membuat Template Blogspot Valid HTML5 atau Cara Membuat Blogspot Valid HTML5 dari blog mahesaputra-id.blogspot.com' name='description'/>
<meta content='Template HTML5 Blogspot, HTML5 Tutorial, Valid HTML5, Valid XHTML, Blogspot SEO Friendly HTML5' name='keywords'/></b:if>

<link href='http://mahesaputra-id.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http://mahesaputra-id.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://mahesaputra-id.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<b:skin>
Keterangan: 
  • Ganti meta content description dan keywords yang berwarna merah-biru dengan deskripsi dan keyword blog Anda
  • Ganti link/url yang berwarna merah dengan link/url blog Anda
  • Save Template (Note: setiap kali Anda mengedit template pastikan kode bagian header template Anda sama persis dengan kode diatas pada saat akan nge save atau menyimpannya.
Berhubung artikel ini lumayan panjang, maka pembahasan lebih lanjut mengenai cara membuat template blogspot valid html5 akan saya teruskan pada posting berikutnya dan agar tidak ketinggalan update artikel ini silakan subscribe lewat menu rss feed diatas ok.

Sambil menunggu update berikutnya jangan lewatkan artikel-artikel sebelumnya antara lain seperti  Cara Menerapkan HTML 5 di Template Blogspot, Cara Membuat Google Custom Search Valid HTML5, Cara Membuat Tombol Google+1 Valid HTML5 di W3C, Rel Atribut Valid HTML5 Untuk Semua Browser

{ 14 comments... read them below if any or add comment }

agil95en said...

ok sob lanjutkan postingannya :)

Trik Mahal dan bayar said...

mengubah struktur header template blogspot bisa jadi valid html5 di w3schools nih .. mau aku coba ah ..

Walman Boomtemplate.com said...

Mantap, info yg menarik.. Memang valid HTML terkait erat terhadap SEO OnPage.. Portal khusus untuk kumpulan templates valid, Visit Free Blogger Templates Valid .. Smoga brmanfaat.

tutorial Blogspot said...

sangat bermanfaat sob.. errornya jadi berkurang

Erma wati said...

salam kenal mas, saya mau tanya tentang template blog saya yang masih ada error di kode CSS Style, saya udah kasih penutup seperti ini <style type='text/css'> tapi juga dianggap error, tolong kasih masukannya mas, supaya template blog saya valid html5, makasih sebelumnya, kunjungi juga blog saya di http://ermawatisweet.blogspot.com

Artabez.Cam said...

ternyata gampang ya kawan caranya...

makasih kawan dah berbagi..

Nasrullah said...

thanks sob

Cii Koo said...

gan, mau nanya nii....
kan pada HTML5 ada penambahan < section >,< article >,< aside >. Nah, kmaren saya coba < div > saya ubah ke < section >,< article >,< aside > tapi kok di dashboard tab "Tata Letak" gakk muncul element"nya ya?
bisa kasih solusinya nggak.

Mahesa Putra said...

@Cii Koo: html5 tag belum sepenuhnya diterapkan dan didukung semua browser dan hanya browser terkenal saja yang mendukungnya jadi untuk tag-tag seperti itu sementara jangan diterapkan dulu sebelum benar2 penggunaan html5 sudah final untuk diterapkan dari developernya. Penggunaan tag div lebih recommended untuk html5 saat ini karena masih didukung semua browser.

Mahesa Putra said...

@Erma Wati Sweet: Salam kenal juga. Itu harus di disable manual tapi saya agak ribet ngejelasinnya, nanti kalo udah sempat saya share caranya, ok!

Uchiha Melvin said...

Ternyata banyak juga yang bikin tutor Valid HTML5 selain saya T.T
Semoga kita dapet bersaing secara sehat :D

Yang semangat ya sob, Blogger Indonesia harus tetap berjuang jangan mau kalah sama Blogger luar negri ^^

-------------------------------------------
Blogwalking
http://zone-uchiha.blogspot.com/

membuat template valid html 5 said...

sangat bermanfaat dalam membantu seo om page blo kita!

Anonymous said...

saya akan coba prektekin deh..mudah-mudahan berhasil...
o...ya apa sih mamfaatnya kalu udah valid HTML5



adi purnama said...

Keren gan
Terima Kasih