Cara Memperbaiki Validasi HTML Error Blogger (Update)

Cara Memperbaiki Validasi HTML Error pada Template Blogger. Memperbaiki Validasi merupakan hal yang bisa membuat galau banget. Terutama bagi yang masih Newbie. Saya sendiri pengalaman berhari-hari mengorbankan waktu, bahkan segalanya jadi lupa daratan gara-gara banyaknya Error pada kode HTML Template Blogger.

Namun ada kepuasan tersendiri jika saya berhasil membuat Template Blog Saya Lulus Validasi. Namun Bagi yang masih ragu untuk memperbaiki Kode-kode yang Error, ada beberapa pertanyaan yang biasanya akan ditanya oleh blogger.

Apa itu Markup Validation?

Cara Memperbaiki Validasi HTML Error pada Template Blogger

Mayoritas halaman Website di World Wide Web tertulis dengan bahasa komputer seperti bahasa HTML yang Terdiri dari struktur teks, konten, multimedia, template, dan lain-lain.

Setiap bahasa memiliki tata bahasa, kosa kata, struktur tersendiri. Setiap Bahasa harus tertulis dengan aturan. Maka semua bahasa (termasuk HTML) yang tidak sesuai dengan aturan bahasa HTML akan dianggap Error, alias ada kesalahan dalam aturan bahasa.

Dalam Proses Verifikasi akan memeriksa/mengecek kesalahan. Istilah tersebut bisa disebut Validasi. Apabila bahasa HTML dalam template sukses lulus, maka disebut Valid.

http://validator.w3.org mendefinisikan " validasi markup " sebagai proses pemeriksaan dokumen Web terhadap tata bahasa yang standart.

Apa Manfaat dari Lulusnya Validasi Template kita?

Manfaatnya tidak begitu sangat mempengaruhi trafick/pengunjung yang datang ke Wesite, namun Validasi ini lebih tertuju pada elektabilitas Website. Berikut Manfaat Lulus Validasi Template:

#1. Loading page lebih cepat. Jika halaman web Anda terdapat kesalahan html, maka akan memakan waktu lebih lama untuk mesin pencari melakukan proses menampilkan halaman Website.

#2. Lebih Kompatibilitas terhadap Browser. Kompatiilitas adalah keadaan untuk menyesuaikan diri. Artinya Website anda bisa cepat menyesuaikan dengan Browser karena lebih ramah. Sebuah Website yang valid lebih mungkin untuk dapat diakses oleh semua jenis browser, platform.

#3. Professional. Lulus Validasi melambangkan ke-profesional-an Website. Website yang Lulus Validasi lebih terlihat profesional, walaupun pernyataan ini tidak 100% benar. Namun bagi seorang Web-Disainer adalah masalah yang terpenting.

#4. SEO Friendly. Kode Website Anda teratur, bersih dari kode yang Error memungkinkan Search Engine untuk lebih cepat menjaring Halaman Website Anda.

Bagaimana Cara mengurangi Validasi yang Error?

Saya akan memberikan beberapa langkah untuk mengurangi Validasi, semua langkah ini berdasarkan pengalaman yang sudah saya praktekan dan beberapa referensi lainnya dan diterapkan di Blogger. Saya akan membuat Demonya, menggunakan Alamat www.nawwafshop.co.vu yang sangat banyak Errornya. Kondisi sebelum diperbaiki.

Langkah Pertama

Silahkan Sobat menuju ke Template, kemudian Edit HTML. Carilah kode ini, untuk mempermudah gunakan CTRL+F.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ganti dengan Kode ini

<!DOCTYPE html>

Langkah Kedua

Setelah tahap pertama, kemudian cari kode

<html expr:dir='data:blog.languageDirection' 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'>

Kemudian ganti dengan kode dibawah ini, dan save.

<html dir='ltr' lang='id' xmlns='http://www.w3.org/1999/xhtml'>

Langkah Ketiga

Menurut saya Kode ini adalah penyumbang terbesar Error. Perlu diingat, Setiap Anda menambahkan Widget baru, maka cari kode ini, dan Hapus. Hapus Semua kode ini!

<b:include name='quickedit'/>

Untuk menjaga tetap valid, pastikan hapus kode ini, apabila anda menambahkan Widget baru.

Langkah Keempat

Silahkan Anda mengecek ke validator.w3.org, tinggal berapa Error yang ada! Belum cukup puas! Apabila Anda menemukan Peringatan (seperti gambar ini), Anda Harus memasang Alt Gambar.

An "img" element must have an "alt" attribute, except under certain conditions.

Maksudnya

Sebuah elemen "img" harus memiliki atribut "alt", kecuali dalam kondisi tertentu.

kode yang Standart

 <img src='Url Gambar' alt='alt gambar'/>

Contoh kode img Standart

 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNCKZomrReqAh_-WJST8PbU4hoD9bDFJslmIBWNK4sbagIDW5veRsfZT6palmCNPw82Ah6PgQLI9A_-myMuuTHV-tmi-XmoxYGkkDG6RwJiF7j55ZuSFGPUlieZNHDmdcElBLqFY-sluk/s1600/1.jpg' alt='Blogger'/>

Langkah kelima

Apabila Anda menemukan Peringatan Error Seperti gambar ini, maka Anda harus menambahkan kode berikut.

Anda mencari kode <b:skin> kemudian tambahkan kode berikut, tepat diatas kode <b:skin>.

<link href='https://www.blogger.com/static/v1/widgets/3028179046-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;!-- <style type='text/css'/> --&gt;

Langkah keenam

Hal paling dasar adalah kesalahan terhadap kode strip (---).

Kode HTML

<!-------- Gue Emang Keren --------> Kode Strip yang salah

<!-- Gue Emang Keren --> Kode Strip yang benar

Kode CSS

</*------- Gue Emang Keren --------*/ Kode Strip yang salah
 

/* Gue Emang Keren */ Benar

Langkah ketujuh

Pada gambar diatas menunjukkan ada element yang Error, cara mengatasinya dengan menghapus kode trbidi="on". Dimana letaknya? Anda bisa melacaknya melalui 'Edit Template HTML' dan di setiap Postingan. Bagaimana cara menghapus trbidi="on" di Postingan? Lihat pada gambar!

Jika Anda menginginkan semua Valid, Hapus semuanya! Capek dech!

Langkah kedelapan

Perintah diatas menunjukkan setiap kode & seharusnya tertulis & Caranya, Anda masuk 'Edit HTML' kemudian cari kode &, kemudian ganti dengan & . Jika tidak menemukannya, Cari juga disetiap 'kode widget' (Tata Letak).

Langkah terakhir

Hapus beberapa kode, seperi kode meta tag yang tidak Standart, kode (border="0"), dan lain-lain.
Perhatihan juga perintah setiap Validator. Dan Jangan putus asa.

Selesai tutorial yang singkat ini, dan hasil Akhirnya dari Validasi www.nawwafshop.co.vu adalah...

Kondisi setelah di perbaiki

"Catatan yang harus di Ingat!!! Setiap validasi HTML5 bukan sesuatu yang sempurna. Validasi ini hanya kode-kode yang mengikuti peraturan penyusunan kode tersebut. Jangan sampai Anda menjadi Galau, gara-gara hal ini. Enjoy saja!"

Apabila ada kesalahan, silahkan hubungi Author.
Referensi: validator.w3.org, leemunroe.com.

Versi Update: Rabu, 14 Januari 2015 , Klik http://www.fahmirabbani.com/2015/01/cara-validasi-html-blog-di-blogger.html

Bookmark and Share it:

26 Comments

Yang langkah kedua sebaiknya diganti menjadi kode ini mas:

<HTML>

daripada kode itu.

Terima kasih sarannya,

Silahkan saja..., semuanya tutorial yang diatas yang saya demokan buat diterapkan di www.nawwaf.co.vu saja...,

mas validation output blog saya banyak sekali mas, saya tidak mnegerti semua maksudnya. mohon bantuannya mas

homepage sudah bersih sedang singlepage masih dinyatakan banyak error, perlu diperbaiki kah... thansk.. tutornya..

sangat membantu sekali, terima kasih pencerahanya

langkah diatas banyak berpengaruh di homepage, namun untuk setiap halaman posting tidak menjamin semuanya valid !!!

Saya sendiri sekarang tidak begitu terlalu fokus dengan KESEMPURNAAN VALIDASI HTML karena yang terpenting itu STRATEGI SEO dengan RUTIN UPDATE ARTIKEL YANG BERMUTU!!

Terimakasih gan, udah dimana2, sangat bermanfaat ni

Terimakasih gan, udah nyari dimana2 eh... ketemunya disini, sangat bermanfaat ni

Thanks gan, . sangat berguna, .

kunjungi blog ane gan, . http://lokerberbagi.blogspot.com/

bookmark dulu gan,bagus artikelnya.ntar baca dan praktekan maklu blog baru dan lg belajar $\o/$

saya rasa ini bagus.. tapi ada sedikit masalah.

Salam

bermanfaat sekali gan postingannya,,,memang mantab patut dicoba, tapi memang masih agak sulit dalam memperbaiki semua kesalahan, tapi ya harus berjung terus, terimakasih banyak gan, salam kenal

Wah parah bangat om diblog saya ini http://instalmi.blogspot.com/ banyak baunget yang error. ada ngak cara yg lebih simpel memperbaikinya ?

Terima kasih sudah membantu, alhamdulillah sudah valid meskipun di single post belum belum mengerti
http://www.supernewbi.com/2015/01/bisnis-bagi-pemula.html

terima kasih ....mudah mudahan bog saya ga eror lagi...Blog saya ( hasbulohaljawani@gmail.com )

Makasih, gan.. Sudah kurang eror-nya..
Tapi yang langkah ke-5 kok seperti ga ada efeknya?

Hahahha bagian pesan bawahnya itu loh gan bener bangettt ahahaha
Udah stress duluan ngelihat banyak error

Bdw, makasih ya gan $\o/$ $\o/$ $\o/$ $\o/$

www.viapedo.com

Makasih mas akhirnya error hilang 1

www.khaeruncorporation.com

makasih mas hilang erornya
http://wewongganteng.blogspot.com/

This comment has been removed by a blog administrator.

makasih mas
sangat membantu

ini dia yg dcari... blog saya juara...errornya buanyak. mau iktin langkahnya, semangaaat meski capeee deh. terimakasih mas sgt membantu.

saya cuman bisa bilang sempurna gan, $\o/$

plis kak tolong bantu saya, template saya error, buat pasang template baru tulisannya kayak gini " Kami tidak dapat menyimpan template Anda.

Template Anda tidak dapat diuraikan karena template tidak terbentuk dengan baik. Pastikan semua elemen XML ditutup dengan benar. pesan kesalahan XML:
(SyntaxError) : expected expression, got '<' "

wahh bagus gan postingngannya bermanfaat