Membuat Tool Instruksi Warna Di Blog Valid Html5

Jika Anda seorang blogger yang suka kutak-katik tampilan blog, tentunya Anda memerlukan sebuah tool untuk mendapat arahan warna. Banyak cara untuk mendapat arahan warna, baik dengan photoshop ataupun dengan aplikasi lainnya.

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

Kode dari tool arahan warna yang biasa dipakai untuk disimpan di blog biasanya akan ibarat arahan 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 arahan warna di blog akan tampak ibarat gambar di bawah ini.

Nah untuk menciptakan arahan di atas menjadi valid HTML5, kita hanya perlu memakai arahan embed object dan file swf serta style untuk mengatur sizenya. Sehingga dari kode-kode embed di atas yang tidak mengecewakan banyak dapat menjadi lebih simple dan tentunya valid HTML5 ibarat 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 arahan 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 arahan <center> namun silahkan gunakan arahan <div style="text-align:center"> sehingga menjadi ibarat 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 arahan warna ini responsive, silahkan simak DI SINI

Selamat mencoba....

Sumber https://www.kompiajaib.com/

Share this post