Memasang Tool Speed Test di Blog Valid HTML5

Memasang Tool Speed Test di Blog Valid HTML5 - Sebenarnya di luaran sana, sudah banyak yang posting cara memasang tool ini di blog. Tapi, kebanyakan caranya kurang jelas. Apalagi, setelah saya lihat kodenya, ternyata ada yang bisa menyebabkan error pada validasi HTML5. Nah, sekarang saya akan berbagi cara memasang tool speed test yang valid HTML5. Tool speed test ini dari Pingdom. Yang tentunya, data-datanya lebih lengkap daripada tool speed test yang lain. Tapi, tidak ada salahnya juga bagi anda yang memasang tool speed test dari situs lain, seperti iWEBTOOL ataupun yang lainnya. Karena, ini hanya alternatif saja.

Jika anda coba mengecek kecepatan loading blog anda dari tool ini, anda akan diarahkan ke halaman dari Pingdom Tool. Setelah itu, akan muncul data-data komplit tentang blog Anda. Lebih jelasnya, silahkan pasang tool ini di blog Anda terlebih dahulu.

Cara pemasangannya cukup mudah, silahkan ikuti langkah-langkah berikut.

Sebetulnya, kode dari Pingdom Tool itu seperti ini.

<iframe src="http://external.pingdom.com/htmlbanners/tools250x140/" name="pingdomtools" width="250" height="140" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
<h1 style="font: 14px Arial, Helvetica, sans-serif">Pingdom - The Uptime Company</h1>
<p style="font: 11px Arial, Helvetica, sans-serif">Visit <a href="http://tools.pingdom.com/">Pingdom Tools</a> and test your website.</p>
</iframe>

Tapi, kode di atas bisa menyebabkan error pada validasi HTML5, karena terdapat iframe, frameborder="0", dan  scrolling="no".

Untuk itu jika ingin kodenya valid HTML5, silahkan copy kode berikut dan masukkan ke postingan mode HTML.

<div style="text-align: center;">
<div class="pingdom-tools loader" data-src="http://external.pingdom.com/htmlbanners/tools250x140/">
</div>
</div>

Lalu, simpan kode berikut di atas </body>

<b:if cond='data:blog.url == &quot;URL HALAMAN TOOL SPEED TEST&quot;'>
<style type='text/css'>
iframe{border:none}
</style>
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.pingdom-tools').each(function(){
$(this).replaceWith('<iframe class="pingdom-tools loader" src="'+$(this).data('src')+'" name="pingdomtools" width="250" height="140" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>')})},5000);
//]]>
</script>
</b:if>

Ganti URL HALAMAN TOOL SPEED TEST dengan URL halaman di mana kita menyimpan kode nya di postingan tadi. Selesai, terakhir Save template-nya.

Jika anda ingin mencobanya, Anda bisa lihat DI SINI.

Resource : http://www.pingdom.com/