Membuat Tool Kode Warna Valid HTML5 dan Responsive

Jumat, 07 Maret 2014

Membuat Tool Kode Warna Valid HTML5 dan Responsive di Blog - Setelah kemaren saya meng-share cara memasang tool kode warna di blog , tapi tutorial kemaren masih ada kekurangan yaitu belum valid , bagi anda yang ingin memasang tool kode warna di blog dan ingin tetap valid silahkan simak tutorialnya . tutoril ini saya ambil dari mas adhy pemilik blog kompi ajaib . namun kali ini saya menambahinya dengan membuat tool tersebut menjadi responsive . ini dia demo toolnya

Cara Memasang Tool Kode Warna di Blog

Pertama ada pasang dulu CSS nya diatan kode </style> maupun ]]></b:skin>

.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;
}

NOTE:
Untuk mengatur width (lebar) Toll tersebut silahkan ubah ukuran 60 % pada kode berikut

.color-code{text-align: center;margin:20px auto;width:60%;}

Silahkan sesuaikan dengan lebar halaman postingan Anda, jika tampilannya agak kecil silahkan tambahkan persentase-nya

Setelah anda memasang CSSnya sekarang saat anda pasang Html nya untuk memanggil Css tersebut

<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="http://www.2createawebsite.com/build/color.swf"></object>
</div></div>
<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="http://www.2createawebsite.com/build/col.swf"></object>
</div>
</div>

Langkah terakhir simpan template dan lihat hasilnya ( untuk hasilnya anda bisa lihat toll diatas

Demikian artikel saya kali ini tentang Cara Membuat Tool Kode Warna Valid HTML5 dan Responsive . semoga tutorial tersebut bermanfaat bagi anda . spesial thank to +Adhy Suryadi

resource : http://www.kompiajaib.com/2014/03/membuat-tool-kode-warna-di-blog-valid.html