Membuat Pagerank Checker Tool Valid HTML5

Pagerank Checker Tool Valid HTML5
Menjelang update Pagerank Google season kedua di tahun 2014 ini, kita membuat Pagerank Checker Tool sebagai alat untuk memeriksa Pagerank blog kita. 

Salah satu penyedia online Pagerank Checker Tool ini adalah Prchecker.info yang menyediakan sebuah tool untuk disimpan di blog. Namun setelah saya coba ternyata toolnya tidak valid HTML5, nah untuk itu kini kita akan membuat Pagerank Checker Tool ini menjadi valid HTML5.

Penempakan Pagerank Checker Tool dari Prchecker.info ini seperti gambar di bawah ini.

Screenshot Pagerank Checker Tool

Dan kodenya seperti berikut:


<div style="text-align:center;">
<table cellspacing="1" style="margin:10px auto 40px;width:400px;border:1px solid #DDD;text-align:center;">
<tr><td style="background:#D1FFA4;vertical-align:middle;">
<p style="font-size:11px;font-family:Verdana;margin:0px;padding:2px;color:#666;"><strong>Check Page Rank of your Web site pages instantly:</strong></p>
</td></tr>
<form action="http://www.prchecker.info/check_page_rank.php" method="post" style="margin:0px;padding:0px;">
<tr><td style="border:1px solid #CCC;padding:10px;background:#DDD;">
<input type="hidden" name="action" value="docheck">
<input type="text" value="http://" name="urlo" maxlength="150" style="width:250px;padding:1px 2px 2px 3px;margin-right:10px;font-size:13px;font-family:Arial;">
<input type="submit" name="submit" value=" Check PR " style="width:80px;font-size:11px;font-family:Arial;padding:1px;">
</td></tr>
</form>
<tr><td>
<p style="margin:0px;padding:3px 0px 1px 0px;color:#AAA;font-size:9px;font-family:Verdana;">This page rank checking tool is powered by <a href="http://www.prchecker.info/" target="_blank">Page Rank Checker</a> service</p>
</td></tr></table>
</div>

Dan dari kode di atas ternyata menyebabkan sekitar 5 buah error pada validasi HTML5. Untuk itu saya sudah merubah beberapa kode agar valid HTML5 namun tampilannya tetap sama. Dalam HTML5, kode form tidak boleh berada dalam kode table, untuk itu saya rubah kode table-nya menjadi div.

Nah bagi yang ingin menyimpan Pagerank Checker Tool valid HTML5, silahkan gunakan kode di bawah ini dan simpan di halaman statis.


<div style="text-align:center;">
<div style="margin:10px auto 40px;width:394px;border:1px solid #DDD;text-align:center;padding:2px">
<div style="background:#D1FFA4;vertical-align:middle;">
<p style="font-size:11px;font-family:Verdana;margin:0px;padding:3px 2px;color:#666;"><strong>Check Page Rank of your Web site pages instantly:</strong></p>
</div>
<div style="border:1px solid #CCC;padding:10px;background:#DDD;margin:2px 0 1px">
<form action="http://www.prchecker.info/check_page_rank.php" method="post" target="_blank" style="margin:0px;padding:0px;">
<input type="hidden" name="action" value="docheck">
<input type="text" value="http://" name="urlo" maxlength="150" style="width:250px;padding:1px 2px 2px 3px;margin-right:10px;font-size:13px;font-family:Arial;outline:none">
<input type="submit" name="submit" value=" Check PR " style="width:80px;font-size:11px;font-family:Arial;padding:3px 1px 2px;cursor:pointer">
</form>
</div>
<div>
<p style="margin:0px;padding:4px 0px;color:#AAA;font-size:9px;font-family:Verdana;">This page rank checking tool is powered by <a href="http://www.prchecker.info/" target="_blank" rel="nofollow" title="Page Rank Checker">Page Rank Checker</a> service</p>
</div></div>
</div>

Untuk mencobanya silahkan masuk di sini Check PAGE RANK of Website Pages Instantly

You Might Also Like:

How to style text in Disqus comments:
  • 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 Hide Parser
Disqus Comments