Tips Membuat Halaman Posting Valid HTML5

Masih banyak hal yang harus dilakukan, agar blog valid di halaman posting. Saat ini akan saya coba rinci satu per satu. Bagi sobat yang akan melakukan validasi, saya sarankan jangan tergesa-gesa, santai saja dan lakukan dengan tenang.
Dibawah ini, hal-hal yang perlu diperhatikan agar halaman posting valid HTML5.
Breadcrumb
Saat ini sudah banyak tutorial tentang breadcrumbs yang SEO friendly, tapi kebanyakan masih menggunakan markup rdfa, untuk membuatnya valid html5 sobat harus menggunakan markup microdata. Silahkan kunjungi : Breadcrumbs SEO Friendly dan valid HTML5Gambar / Image
Apabila sobat mengupload gambar pada postingan, biasanya akan muncul kode seperti ini (pada mode HTML)<div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-XJW14wKp0n4/Ujs4FVUJRrI/AAAAAAAAFgs/s_wh3yLA0Yw/s1600/abstract2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="177" src="http://2.bp.blogspot.com/-XJW14wKp0n4/Ujs4FVUJRrI/AAAAAAAAFgs/s_wh3yLA0Yw/s320/abstract2.jpg" width="320" /></a></div>
hapus
imageanchor="1"
, dan ganti border="0"
dengan alt="keterangan gambar"
.Intinya, ketika menyimpan gambar pada postingan atau widget, jangan menggunakan
border="0"
. Hal yang wajib ditambahkan adalah alt="keterangan gambar"
lebih bagus lagi menggunakan tag title
. Sebagai contoh menampilkan gambar yang baik:<img alt="ipad4" src="http://blogspot.com/ipad4.png" title="Ipad Terbaru"/>
Tombol Like / Share
Gunakan tombol Like Facebook / Twitter / Google Plus yang valid HTML5. (baca tutorial : Membuat Tombol Twitter, Google +1, dan Like Facebook Valid HTML5)Related Posts
Ada beberapa script yang saya temui pada related posts ini error vaidasi. Diantara penyebabnya adalah karena label menggunakan 2 kata atau lebih seperti Tutorial Blogger, dengan kondisi seperti itu, membuat white space yang seharusnya Tutorial%20Blogger. Bagi sobat yang menggunakan script ini, saya sarankan untuk membuat label hanya dengan 1 kata saja. Apabila sudah banyak label dengan 2 kata atau lebih, silahkan gunakan Related Posts Valid HTML5.Widget
Untuk validasi widget sebetunya sudah dibahas pada artikel yang lalu. yang pasti selalu menghapus<b:include name='quickedit'/>
setelah menambah widget baru.Ada hal lain yang harus diperhatikan yaitu ketika menambah kode pada widget, banyak tutorial yang menyatukan antara kode CSS, HTML dan JavaScript di widget. Misalnya kode Recent Post dengan Avatar, Blog Pager menjadi Judul, dll.
Sebagai gambaran seperti ini :
<style type="text/css">
.home-link{display:none} #blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;font-family:Arial, sans-serif;} #blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;font-family:Arial, sans-serif;}
</style>
<script type="text/javascript">
$(document).ready(function(){ var olderLink = $("a.blog-pager-older-link").attr("href"); $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { var olderLinkTitle = $("a.blog-pager-older-link").text(); $("a.blog-pager-older-link").text(olderLinkTitle + "\u2192");//rgt });
</script>
Kode
<style type="text/css">
inilah yang menyababkan error, untuk solusinya tambahkan scoped
atau scoped=''
atau scoped='scoped'
. Inilah yang dinamakan Boolean Attribute. Maka kode yang benar menjadi :<style type="text/css" scoped>
Komentar
Inilah penyumbang error terbanyak pada validasi. Dengan menggunakan komentar standar blogger, akan susah melakukan validasi. Oleh karena itu, untuk membuat halaman posting menjadi valid HTML5, ada 2 alternatif yang saya tawarkan :1. Gunakan Komentar Google Plus; atau
2. Gunakan Threaded Comments Hack
Apabila sobat menggunakan Thread Comments Hack Valid HTML5, ada beberapa langkah yang harus sobat lakukan dalam validasi html5 ini.
1. Cari semua kode yang seperti di bawah ini (ada beberapa kode)
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' scrolling='no' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
hapus kode-kode berikut ini :
- allowtransparency='true'
- frameborder='0'
- src=''
- scrolling='no'
- width='100%'
- style='display: none'
2. Cari kode seperti ini :
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
ganti dengan :
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src'/>
</b:if>
Untuk kekurangannya, Insya Allah menyusul. Semoga bermanfaat....
139 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
style type="text/css" scoped
template tidak bisa menyimpan, mungkin yang benar pake kode seperti ini:
style scoped='scoped' type='text/css'
Tinggal 1 wungkul..
No p element in scope but a p end tag seen
Kudu dikumahaken siga kitu teh kang ?
semua coment bilangnya ada link aktif.
happy blogging mas.
Line 459, Column 68: Attribute xmlns:v not allowed here.
div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#
Line 459, Column 68: Attribute with the local name xmlns:v is not serializable as XML 1.0.
div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'
Line 587, Column 23: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
Line 590, Column 182: Bad value 100% for attribute width on element iframe: Expected a digit but saw % instead.
…t='410' id='comment-editor' name='comment-editor' src='' width='100%'>iframe
Syntax of non-negative integer:
Line 590, Column 182: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.
…t='410' id='comment-editor' name='comment-editor' src='' width='100%'>iframe
Line 590, Column 182: The frameborder a…
//validator.w3.org/check?uri=http%3A%2F%2Fblog.kangismet.net%2F2013%2F09%2Ftips-membuat-halaman-posting-valid-html5.html%3Fm%3D1&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=1&No200=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.2#jumpbar
:)
http://python113.blogspot.com/
tetapi saya masih ada masalah kang
mohon bantuannya memberikan solusi di http://validator.w3.org/check?uri=http%3A%2F%2Fpeluangbisnisberjangka.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices
terdapat 3 error, antara lain:
- Line 20, Column 123: Bad value application/rsd xml for attribute type on element link: Expected whitespace or a semicolon but saw x instead.
- Line 1949, Column 31: script element between head and body.
- Line 1949, Column 31: Cannot recover after last error. Any further errors will be ignored.
coba naikin dikit...
http://prntscr.com/2yy6f6
makasih sebelumnya kang :D
rubah character & pada baris 30 kolom 128.
kl yang saya liat sih ada di
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=8474408940953096697&zx=c9520aae-ac48-4e74-94ab-273bdffd1e7b' />
jadi rubah charracter yang ada pada code di atas dengan &a-mp; << hilangkan tanda "-" karena di sini jg langsung k konversi :D
CMIIW...
Mau nanya ni kang, kenapa ya stelah saya hapus kode-kode sesuai perintah diatas, lalu saya pratinjau saya lihat aman-aman saja, trus saya save. tapi kenapa ya mas setelah saya tutup edit template, lalu saya buka lagi kode yang saya hapus tadi nongol kembali, alias kembali seperti semula, untuk sobat blogger yang lain jika tidak keberatan coba lihat kembali kode-kode yang dihapus sesuai petunjuk yang diberikan kang ismet di atas, jika kode template blogger sobat yang dihapus tersebut tidak kembali seperti semula, berarti ada masalah dengan template saya, dan jika sobat tidak keberatan mari kita diskusikan permasalahan ini, contoh kode yang kembali seperti semula alias nongol kembali pada template seperti :
div class='post-share-buttons goog-inli…
http://sweetbullshits.blogspot.com/
https://lh6.googleusercontent.com/-7ZTpQYRkyXI/UtKCV3kcttI/AAAAAAAAAuE/6bTa1tnYvd0/w500-h200-no/errorvalid.jpg
atau harus ditulis <HTML> doang? @@,
<HTML expr:dir='data:blog.languageDirection'>
masalah di comment thread, nih kang.. [link]http://validator.w3.org/check?uri=http%3A%2F%2Fblueflat.blogspot.com%2F2014%2F01%2Fhello-world.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices[/link]
Line 941, Column 82: & did not start a character reference. (& probably should have been escaped as &.)
…m/rearrange?blogID=8097032622518101615&widgetType=Followers&widgetId=Followers…
udahdi cari di temnplate gx ada cari yang mana ?
Line 629, Column 23: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
<a name='comment-form'></a>
Line 942, Column 71: & did not start a character reference. (& probably should have been escaped as &.)
…nt-iframe.g?blogID=5165916540263085140&postID=5732509798227655125' id='comment…
maaf kang, saya cuman mau bantu aja hehe :)
butuh solusi
<b:include name='quickedit'/>
di tunggu kunjungan baliknya kang http://alajato.com/
:D
No p element in scope but a p end tag seen
apa lagi yang kudu dicari ya???
url di http://www.hbr-online.com
Salam hangat dari balikpapan.
Soal nya Sitepmap html5 responsive yang lain pada gk beres smuanya.
ada pun sitemap html5 responsive yang beredar , polos amat. jadi gk menarik untuk dilihat
mohon respone nya yah kang . salam #PALMAHUTABARAT :)
Ditunggu update-nya
ohh ya kang ane pengin yg lasung praktis upload langsung jadi dan langsung valid gimana yah??
tanpa harus <img alt="ipad4" src="http://blogspot.com/ipad4.png" title="Ipad Terbaru"/> biar lebih praktis gitu
Error Line 992, Column 30: xmlParseEntityRef: no name
if (window.iframes && iframes.open) {
✉
Error Line 992, Column 31: xmlParseEntityRef: no name
if (window.iframes && iframes.open) {
✉
Error Line 1045, Column 49: xmlParseEntityRef: no name
…(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { windo…
✉
Error Line 1045, Column 50: xmlParseEntityRef: no name
…BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window…
Selalu ditunggu tutorialnya
padahal seo sudah 100%
alamt rizaldi-do.blogspot.com kang ismet... cara menjadikan & menjadi amp bgmna ?
matur nuwun
<script type='text/javascript'>
//<![CDATA[
$('.comment_body p').each(function () {
$('i[rel="pre"]').replaceWith(function () {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
});
//]]>
</script>
tetap gk bisa? bravoseo.blogspot.com
//<![CDATA[
$("#comment_block").each(function(){$('i[rel="pre"]',this).replaceWith(function(){return $("<pre></pre>").append($("<code></code>").append($(this).contents()))});$('i[rel="code"]',this).contents().unwrap().wrap("<code/>")});
//]]>
https://lh3.googleusercontent.com/-qrOERhYlDPw/Uj5U4KGQBmI/AAAAAAAAHbE/QsrJyq7zwoQ/s937/Postingan%2520Valid%2520HTML5.jpg
yang blog ini kang http://www.mestiqui.com/
Keren postingannya kang :D , lumayan komplitin HTML5 di blog saya, nuhun kang :)
ketika saya mencari kata responive pada search akang, benar sudah pas apa yang mau saya cari..
tapi ketika saya membuka pada page 5 dan 6 kok isi content nya sama dengan yang ada di page 4 dan page 5 dan 6 hilang ketika mengklik page 5 dan 6
mohon ditindak lanjuti itu apa ada kesalahan pengeditan atau koneksi saya yang kurang hebat ya....
bermanfaat banget,hehehe :D
nanti Validasi CSS3 ya kang. haha
taop banget dah ..
teruskan om ..