Home
Blogger
Tutorial

Membuat Material Design Color Palette di Halaman Statis Blog

Membuat Material Design Color Palette di Halaman Statis Blog - Material Design Color Palette merupakan kumpulan warna yang dapat sobat gunakan untuk mendesain atau mempercantik tampilan elemen blog dengan pilihan warna yang dapat sobat pilih dengan hanya dengan 1 klik saja. Material Design Color Palette bisa di bilang juga color pcker yang artinya sobat hanya perlu mengklik salah satu warna yang sobat kehendaki, dan dengan warna pilihan yang sobat pilih, maka otomatis kode warnanya akan otomatis tersalin.

Dengan kata lain Material Design Color Palette ini akan mmpermudah sobat untuk menulis sebuah kode dari warna tanpa harus mencarinya melalui web penyedia kode warna untuk html. Namun perlu sobat ingat, dalam memilih sebuah warna sobat perlu memperhatikan wanra background dari sebuah elemen harus kontras dengan warna teks agar perpaduan dari warna background / latar sesuai dengan warna teks yang digunakan (user friendly) dan nyaman dibaca.

Material Design Color Palette ini dari Material Design yang kemudian di modifikasi oleh Kang Andy agar supaya bisa di pasang di blog dengan mudah dan berfungsi seperti aslinya. Dan di dalam Material Design Color Palette ini juga sudah di sisipkan script clipboard.js yang fungsnya untuk mempermudah sobat untuk menyalin kode hex warna yang di pilih dengan hanya satu klik saja.

Live Demo
Setelah sobat melihat live demonya dan ingin memasangnya di halaman statis blog sobat, silahkan ukuti tutorial berikut :

Material Design Color Palette untuk Blog AMP

Login ke Blogger > Halaman/Page > Copy Paste kode dibawah ini (Mode HTML)

<amp-iframe noloading title="Color Palette"


              src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/color-palettes2.html"


              height="575"


              layout="fixed-height"


              frameborder="0"


              sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">


    <amp-img noloading src="https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"


             layout="fixed-height"


             height="575"


             width="auto"


             placeholder>


    </amp-img>


  </amp-iframe>

Simpan / Publish

Pastikan di halamannya sudah ada amp-iframe.js

Material Design Color Palette untuk Blog AMP

Login Blogger > Halaman/Page > Copy Paste kode dibawah ini (Mode HTML)

<iframe title="Color Palette" src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/color-palettes2.html" frameborder="0" style="height:575px;width:100%"></iframe>

Simpan / Publish

Demikian tutorial Cara Membuat dan Memasang Material Design Color Palette di Halaman Statis Blog kali ini semoga bermanfaat. Selamat Mencoba dan Salam Luar Biasa.
Join The Conversation