Membuat Tool Kode Warna Di Blog Valid HTML5

Membuat Tool Kode Warna Valid HTML5
Jika Anda seorang blogger yang suka kutak-katik tampilan blog, tentunya Anda memerlukan sebuah tool untuk mendapatkan kode warna. Banyak cara untuk mendapatkan kode warna, baik dengan photoshop ataupun dengan aplikasi lainnya.

Namun ada juga sebuah tool yang berbasis file swf yang bisa kita simpan di blog kita. Dan tool ini sudah banyak juga digunakan dan disimpan di blog, namun banyak yang tidak menyadari bahwa kodenya ternyata tidak valid HTML5.

Kode dari tool kode warna yang biasa digunakan untuk disimpan di blog biasanya akan seperti kode di bawah ini.


<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="420" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie"><param value="High" name="quality"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object> <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess"><param value="http://www.2createawebsite.com/build/col.swf" name="movie"><param value="high" name="quality"><param value="#ffffff" name="bgcolor"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>

Dan penampakan tool kode warna di blog akan tampak seperti gambar di bawah ini.

Tool kode warna

Nah untuk membuat kode di atas menjadi valid HTML5, kita hanya perlu menggunakan kode embed object dan file swf serta style untuk mengatur sizenya. Sehingga dari kode-kode embed di atas yang lumayan banyak bisa menjadi lebih simple dan tentunya valid HTML5 seperti berikut ini.


<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/color.swf"></object>
<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/col.swf"></object>

Untuk mengetes validasi HTML5 dari tool kode warna ini, silahkan coba test halaman tool Kode Warna Kompi Ajaib DI SINI.

Agar toolnya berada di tengah halaman postingan (baik di halaman postingan biasa atau statis), hindari penggunaan kode <center> namun silahkan gunakan kode <div style="text-align:center"> sehingga menjadi seperti ini.


<div style="text-align:center">
<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/color.swf"></object>
<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/col.swf"></object>
</div>

Jika ingin kode warna ini responsive, silahkan simak DI SINI

Selamat mencoba....

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