Membuat Tool Kode Warna Valid HTML5 dan Responsive

Kode warna sangat dibutuhkan oleh seorang blogger yang senang mendesain tampilan blog. Kode warna itu sangatlah banyak karena warnanya saja sudah bermacam-macam jadi, apalagi kodenya. Saya sendiri pun sering lupa dengan kode warna yang sering saya pakai sehingga saya harus bolak-balik mencari tool aplikasi kode warna. Hingga pada suatu saat saya lelah dan timbul keinginan untuk memiliki tool tersebut. Singkat cerita, akhirnya saya bisa memasang tool HTML Color Picker di blog saya. Tool ini untuk mendapatkan kode warna yang dicari. 

Anda ingin memasang tool kode warna (HTML Color Picker)? penasaran dengan bentuknya? ingin mencoba aplikasinya? oke, silakan coba dulu dan cek validasi HTML5 dan responsivitas Aplikasi HTML Color Picker disini jika sudah, Anda bisa melanjutkan membaca postingan ini.

Untuk membuat tool tersebut menjadi Valid HTML5 Anda hanya perlu menggunakan kode embed object dan file .swf serta style untuk menentukan ukurannya. Kode warna yang valid HTML5 sangatlah sederhana. Silakan Copy kode di bawah ini dan Paste di kotak JavaScript/ HTML blog Anda.

<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>

Eits, tawaran saya belum sampai disitu, Anda ingin juga kan punya tool kode warna yang Responsive? Jika ingin tool kode warna responsive, silakan gunakan kode di bawah ini.

<div style="text-align: center;">
<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="https://googledrive.com/host/0Bz4YdwRI3rnCc01fUWNaNGNHbjQ/"></object> </div>
</div>
<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="https://googledrive.com/host/0Bz4YdwRI3rnCNDVYN2tlcFF1b3c/"></object> </div>
</div>
</div>

Dan jangan lupa tambahkan kode CSS berikut di atas ]]></b:skin> agar toolnya benar-benar Responsive.

.color-code{text-align: center;margin:20px auto;width:60%;}
.color-responsive {position: relative;padding-bottom: 100%;height: 0;overflow: hidden}
.color-responsive object {position: absolute;top: 0;left: 0;width:100%;height:100%;border:0}

Selesai.
Silakan lihat juga Cara Memasang HTML Color Picker Semoga Bermanfaat.

===

Terima Kasih Telah Berkunjung
Judul: Membuat Tool Kode Warna Valid HTML5 dan Responsive
Ditulis Oleh YuliaaargH™
Jika mengutip harap berikan LINK AKTIF yang menuju pada artikel Membuat Tool Kode Warna Valid HTML5 dan Responsive ini. Sesama Blogger mari saling menghargai. Untuk menjalin silaturahmi, silakan berkomentar agar saya dapat BLOGWALKING ke blog Anda. Terima kasih atas perhatiannya.