Tips dan Trick Supaya Blog Tetap Valid HTML5 Bagian II

Blog, Tips, Trick

Belum ada komentar

Pada postingan yang sebelumnya saya sudah memberikan tricknya tapi untuk yang sekarang kita akan kupas tuntas agar Blog tetap Valid HTML5, trick ini saya dapatkan waktu berkunjung ke Kang Ismet.

Anda sering mengupload gambar? ingin gambar yang anda upload tetap valid?
Pengen tau solusinya yuk lanjut ke TKP...

Bila anda upload ke dalam postingan maka kode gambar masih bawaan blog seperti contoh dibawah ini

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoswP5so9dG_ebWsDaHO6-e8RJ7Eae7wc4TVLaaPkUMNinisU-kO-0Km_9TdknPPNDyjMQy-JtURyro1AltEObrW9ImSiPpRfFojGQxtNpEarASo3qCIi6uzB63X3Fw-8r28H1aTYhcl3r/s1600/abstract2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoswP5so9dG_ebWsDaHO6-e8RJ7Eae7wc4TVLaaPkUMNinisU-kO-0Km_9TdknPPNDyjMQy-JtURyro1AltEObrW9ImSiPpRfFojGQxtNpEarASo3qCIi6uzB63X3Fw-8r28H1aTYhcl3r/s320/abstract2.jpg" width="320" /></a></div>

• Delete imageanchor="1", dan ganti border="0" dengan alt="keterangan gambar".

Kesimpulannya, 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 dan valid.

<img alt="Catatan Cand" src="http://1.bp.blogspot.com/-DJj3dy-CYdY/Ux6e54W7p7I/AAAAAAAAAiQ/nRzF9bAimm8/s1600/Cara+Membuat+Counter+Box+Pada+Label+-+CatatanCand.JPG" title="Catatan Cand" />

Untuk validasi widget sebelumnya sudah saya bahas pada artikel sebelumnya. yang pasti selalu menghapus <b:include name='quickedit'/> setelah menambah widget baru.

Anda harus memperhatikan ketika menambah kode pada widget, banyak tutorial yang menyatukan antara kode CSS, HTML dan JavaScript di widget. Misalnya  Recent Post dengan Avatar

• Seperti contoh dibawah 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>

• <style type="text/css"> inilah yang menyababkan error, agar tidak error anda harus menggantinya dengan kode yang seperti dibawah ini

<style type="text/css" scoped>

• Apabila anda menggunakan fitur Thread Comments maka anda harus delete beberapa bagian dari kodenya
• Cari kode script dibawah ini

<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%'/>

• Cari dan delete kode dibawah ini :

• allowtransparency='true'
• frameborder='0'
• src=''
• scrolling='no'
• width='100%'
• style='display: none'

• Masih berlanjut, cari kode seperti ini

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

• Ganti kode diatas dengan kode yang dibawah ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>

• Klik simpan dan lihat hasilnya

Semoga bermanfaat bagi anda

Sumber : http://blog.kangismet.net/2013/09/tips-membuat-halaman-posting-valid-html5.html