Cara Membuat Tool Kode Warna Valid HTML5 di Blog

Cara Membuat Tool Kode Warna Valid HTML5 di Blog

Seringkali saya melihat menu tool kode warna di beberapa blog yang saya kunjungi. Ternyata tool tersebut juga terdapat di blog milik para master blogger, seperti kompi ajaib, kangismet, dll.

Kebanyakan tool kode warna yang bertebaran di google tidak valid HTML5. Padahal untuk membuat tool kode warna yang valid HTML5 cukup mudah dan kali ini akan saya bagikan tutorial cara membuatnya. Selain valid HTML5, tool kode warna yang saya bagikan ini juga responsive, jadi nggak usah khawatir karena tool ini bisa diakses di semua perangkat.

Mau tau tampilan tool kode warnanya kayak gimana? untuk Anda yang penasaran dengan tampilannya, silahkan Anda lihat penampakannya di bawah ini sekalian di coba-coba.

Cara Membuat Tool Kode Warna Valid HTML5 di Blog

1. Buka Blogger > Template > Edit HTML
2. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>
3. Simpan Template

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

4. Setelah itu letakkan kode HTML di bawah ini di tempat Anda ingin menampilkan tool kode warna. Jika ingin menampilkan pada postingan atau halaman statis (laman), silahkan letakkan kode di bawah ini pada mode HTML.

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

5. Publikasikan postingan atau halaman statis.

Sekian tutorial Cara Membuat Tool Kode Warna yang Responsive dan Valid HTML5 di Blog. Semoga bermanfaat.

Leave a Reply