Cara Membuat Template Valid HTML5 dan CSS3 Versi W3C Validator

Cara Membuat Template Valid HTML5 dan CSS3 Versi W3C Validator

Cara Membuat Template Valid HTML5 dan CSS3 Versi W3C Validator

Cara Membuat Template Valid HTML5 dan CSS3 Versi W3C Validator.  Saya pernah berjanji atau menuliskan kata-kata untuk membuat postingan dengan topik ini  pada artikel yang sudah saya buat sebelumnya dengan judul Cara Membuat Blog SEO 100% Versi Chkme.com. Nah untuk menepati janji serta ketersediaan waktu, maka saya coba tulis artikel ini dan bukan sarana untuk menggurui tetapi sebagai media pembelajaran bersama kepada kita semua sobat blogger sekalian, mungkin sebelum masuk ke topik pembicaraan ada baiknya kita terlebih dahulu mengenal apa itu valid. Urutannya begini dimulai dari kata validitas yaitu suatu ukuran yang menunjukan tingkat kesahihan suatu tes, dan suatu tes itu dikatakan valid apabila tes tersebut mengukur apa yang hendak di ukur dalam hal ini mengukur template yang digunakan apakah sudah sesuai atau belum dengan kriteria-kriteria standar yang sudah ditetapkan yang berlaku secara umum. Menurut pendapat saya jika Template yang kita gunakan sudah valid maka akan mempengaruhi Search Engine Optimization (SEO) dan SERP mengenai arti dan tujuan SEO baca artikel sebelumnya disini. dan maksud dari HTML5 itu sendiri silahkan sobat browsing di Google.com.

Sekarang kita masuki prosesnya, disini saya akan mempersempit pembahasan hanya kepada template yang saya gunakan sekarang ini sob, yang sebelumnya tidak valid HTML5 menjadi valid HTML5.

Peringatan !
Selalu buat Backup Template sobat sebelum memulai pengeditan atau memperbaikinya, untuk mencegah hal-hal yang tidak diinginkan

Langkah-langkah Membuat Template Valid HTML5 dan CSS3

Valid HTML5 Versi W3C
Cara Membuat Halaman Website Di Github.com Secara Gratis

Kita Mulai Memvaliditas HTML5 nya terlebih dahulu.

Langkah ke-1 : Pastikan sobat terlebih dahulu mengecek validitas template sobat di W3C Validator
Langkah ke-2 : Perhatikan hasilnya, dalam hal ini saya memberikan contoh hasil pada template ini, lihat screenshot.

Error Pada Template
Cara Membuat Halaman Website Di Github.com Secara Gratis

Disana terlihat terdapat 6 kesalahan dan itu hanya kebetulan saja sebab setiap template akan berbeda tingkat kesalahannya tergantung dari jenis template tersebut.

Langkah ke-3 : Masih dilaman error w3c scroll layar pc sobat kebawah dan perhatikan jenis kesalahannya, lihat screenshot.

Error pada template
Cara Membuat Halaman Website Di Github.com Secara Gratis
Disana terlihat kesalahan atau error terdapat pada tag DOCTYPE html (Attribute with the local name xmlns:data is not serializable as XML 1.0.) atau yang sejenisnya.

doctype html
Cara Membuat Halaman Website Di Github.com Secara Gratis

Solusi:

<!DOCTYPE html>
<html class='v2' dir='ltr' 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>

Ganti kode yang mirip seperti diatas menjadi seperti ini kode dibawah ini, lihat screenshot.

Solusi Pada Error HTML5
Cara Membuat Halaman Website Di Github.com Secara Gratis

<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'>
<head>

Jika terdapat kesalahan lain seperti kesalahan penempatan elemen atau kode tidak sesuai aturan seperti penempatan elemen <li id='kacang-tempe'></li> bisa sobat ganti dengan <div id="kacang-tempe"/> atau jika dianggap tidak terlalu penting hapus saja.

Langkah ke-4 : Jika dirasa semua kesalahan yang ada pada template sudah kita perbaiki coba sobat simpan template sobat dan klik kembali Tombol Revalidate pada W3C  yang terdapat pada pojok kanan bawah pada laman w3c validator dan lihat hasilnya.

Sebagai contoh setelah saya perbaiki semua kesalahan diatas maka hasil akhirnya menjadi seperti ini, lihat screenshot:
Valid HTML5
Cara Membuat Halaman Website Di Github.com Secara Gratis
Langkah ke-5 : Selesai, lanjut ke langkah berikutnya.

Cek Valid HTML5 Template yang saya gunakan setelah diperbaiki 

Sekarang Kita Masuk Ke Validitas CSS3

Pada bagian ini setelah kita membuat template kita menjadi Valid HTML5 maka kita akan di beri link untuk menguji validitas CSS3 pada template kita atau sobat dapat mengunjungi link yang saya berikan di bawah ini:


Langkah ke-1 : Cek Template sobat  dan lihat hasilnya sama seperti mengecek validitas HTML5 diatas scroll layar pc sobat sampai ke bawah dan perhatikan satu persatu kesalahanya, dan saya tekankan disni kita lihat faktor penyebabnya bukan kesalahan per point!, sebagai contoh lihat hasil validitas template ini sebelum saya perbaiki, screenshot:

Faktor Penyebab Error ke 1:

Error CSS3
Cara Membuat Halaman Website Di Github.com Secara Gratis

Faktor Penyebab Error ke 2:

Error Pada CSS3
Cara Membuat Halaman Website Di Github.com Secara Gratis
Pada kasus ke dua screenshot diatas terdapat kesalahan pada bundle.css dan font-awesome.min.css

<link href='//www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Untuk ke dua  faktor penyebab di atas dapat di atasi dengan memodifikasinya dan membuat fungsi loading dengan javascript sehingga kodenya  menjadi seperti dibawah ini.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css");loadCSS("//www.blogger.com/static/v1/widgets/1943648796-widget_css_bundle.css");
//]]>
</script>

Langkah ke-2 : Periksa kesalahan pengunaan kode pada template sobat, sebagai contoh lihat screenshot.

Cara Membuat Halaman Website Di Github.com Secara Gratis

Pada kasus screenshot diatas terdapat nilai kesalahan pada:

Pertama : #search yaitu dengan lebar -100px, solusi ganti atau hapus saja jika tidak ada pengaruh, pada template ini saya hapus!.
Kedua : .breadcrumbs yaitu kesalahan parse pada font family, solusi ganti dengan font yang terdapat pada template sobat dalam kasus ini saya ganti dengan font family Lato.
Ketiga : PopularPost, terdapat kesalahan parse pada padding, setalah saya cek ternyata tidak ada nilainya  contoh {padding: } solusi isikan nilainya sehingga menjadi misal {padding:2px;}
Keempat : Sorry, the at-rule @-webkit-keyframes is not implemented. Jika terdapat error seperti ini silahkan dihapus saja.

Langkah ke-3 : Setelah semua kesalahan kita perbaikin silahkan sobat simpan template dan coba revalidasi template sobat sekali lagi lihat hasilnya, jika masih terdapat kesalahan perhatikan apakah semua nilai kesalahan pada template kita sudah diperbaiki dengan benar dan ulangi jika perlu periksa kembali.

Selesai sudah dan sobat dapat melihat hasil validasi CSS3 pada template yang saya gunakan ini

Semua langkah-langkah diatas sudah saya terapkan dan ini semua hanyalah contoh sebuah kasus pada template yang sedang saya gunakan, jika sobat mendapatkan kendala dalam memvalidasi template sobat, sedangkan untuk menggantinya dengan template yang sudah valid sobat tidak mau, kata orang sudah terlanjur sayang hehehehe, yuk kita diskusikan dikolom komentar, tetapi jika ada sobat yang tidak mau pusing-pusing maka tinggal sobat ganti saja dengan template yang memang sudah valid, banyak kok versi gratisnya yang bisa kita download, dan untuk template yang valid dan gratis lihat pada postingan saya di Best 10 White and Clean Responsive Blogger Template.


Demikianlah Tutorial mengenai Cara Membuat Template Valid HTML5 dan CSS3 Versi W3C Validator, semoga ada manfaatnya ya, dan saya sangat senang Jika ada sobat Blogger yang ingin berdiskusi seputar Postingan ini atau Postingan tentang Dunia Kebun Sawit, silahkan tinggalkan komentar sobat di kolom komentar blog ini. saya akan sangat senang meresponnya, terimakasih salam Antoncabon.

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

12 Comments Add Comment

mas link untuk cek valid html5 nya mungkin ga usah pake www karna jadi error link nya, saya sudah coba cek blog saya tadinya sempet mau coba cara diatas tapi ternyata terdapat 43 error jadi saya urungkan niat saya karna takut terjadi hal yang tidak diinginkan.

Balas

@Mba Yuli, nanti lain kali kalu mau edit template jangan lupa untuk di backup terlebih dahulu, karena jika sewaktu di edit atau diperbaiki terjadi error pada template, tinggal kita kembalikan ke bentuk awalnya dengan backup yang sudah dibuat tadi.... makasih ya dah mampir, good luck selamat mencoba dan jangan takut!...

Balas

asyik....,template saya sudah valid html5 dan css3.
sebetulnya kalau kita telaten dan teliti serta mau belajar,dari hasil pengecekkan saja sudah di kasih tau kesalahan dan cara memperbaikinya.

Balas

mantap, itu dia pointnya masbro, belajar dan belajar serta sabar...

Balas

wah sangat berguna di terapkan di blog saya yang belum valid HTML5nih pak...artikelnya keren-keren ih

Balas

wah om Cilembu Thea berlebihan memujinya, kerenan artikel di blog om Cilembu lagi....

Balas

terima kasih atas informasinya mas sangat berguna sekali untuk saya...:)

Balas

Sama-sama mas atau mba nih Aiizahh.... senang melihat postingan ini ada manfaatnya... :)

Balas

jadi gw harus bilang waow gitu oom reo hihihihi :)

Balas

hihi jadi tempat belajar nih, saya juga lagi coba coba buat template sendiri dengan dasar template bawaan blog

Balas

hihihi iya... saya juga belajar bikin template nih... masih belum sebagus seperti template yang sudah dishare oleh para master, makanya blm mau saya share heheheheehe....

Balas
Add Comment

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×