Cara Membuat Tool Warna HTML Di Blog

Pada artikel sebelumnya, renz sudah membagikan tutorial cara membuat box convert html atau parse html. Pada kesempatan kali ini renz akan membagikan cara membuat tool warna html di blog, yang dijamin work nya karena sudah di uji coba renz sendiri.






Dengan memasang kode warna html sendiri, sobat gausah bulak balik ke situs yang menyidiakan kode warna, tinggal sobat buat aja sendiri di blog . Dan juga kalau ada pengunjung blog sobat yang sedang mencari tool kode warna html dia bisa terbantu oleh tool yang sobat buat.

Kode warna html ini hampir sama dengan fitur Flat UI color, cuma kode warna yang akan kita buat ini lebih lengkap malah paling lengkap.
Langsung saja yuk ketutorialnya.
Demo

• Pertama-tama sobat login dulu ke blogger.com
• Masuk ke template terus klik edit html
• Sobat copy kode dibawah ini dan letakan diatas kode ]]></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;
}

• Ubah kode yang saya tandai merah, dan paskan ukuran dari tool kode warna html dengan template yang sobat pake. (Untuk cara ini kita lewati dulu sebelum tool nya benar-benar jadi)

• Sesudah memasang css diatas, sekarang sobat buat laman/pages baru, dan letakan kode dibawah ini di mode html laman/pages yang sobat buat, jangan lupa dikasih judulnya dulu ya.

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

• Sampai di sini sobat sudah selesai membuat tool warna html. Silahkan langsung di publish dan lihat hasilnya
• Jangan lupa paskan ukuran tool nya dengan template sobat yang sudah saya singgung diatas.

Jika ada pertanyaan dan masih bingung dengan tutorial atau ada kesalahan dan hasilnya tidak muncul coba sobat ikuti dulu tutorial diatas dengan benar, jika masih tidak muncul silahkan berkomentar dibawah, nanti langsung renz balas.
Semoga bermamfaat.