×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Halaman Color Picker Responsive dengan HTML5


Color picker jika diartikan kedalam bahasa Indonesia yang berarti Pemilihan Warna. Apa gunanya color picker ? ya seperti namanya untuk pemilihan warna atau dalam pembuatan skema warna, color picker biasanya ditemukan didalam perangkat lunak grafik atau online.

Color picker juga dapat kamu miliki sendiri dengan membuatnya dihalaman web kamu khususnya halaman blogger, color picker akan menampilkan warna secara detail, misalkan seperti warna HEX dan RGB. Color picker biasanya ditemukan disebuah aplikasi atau software editor, selain ditemukan diaplikasi atau software editor, bukan hanya editor saja yang menggunakan color picker tersebut, para desainer web juga menggunakan color picker untuk menemukan warna warna unik dan menarik yang akan berguna untuk memperindah website mereka.

Untuk memiliki sebuah halaman color picker, kamu dapat mengikuti tutorial dibawah ini, namun color picker yang saya sajikan di artikel ini mungkin berbeda dengan color picker yang sering kamu temui, karna yang saya sajikan sangatlah sederhana, namun jika kamu tetap ingin mencobanya yuk ikuti tutorial dibawah ini.

Cara Membuat Halaman Color Picker HTML5

  1. Pertama Login dulu ke Blogger,
  2. Pada dashboard blogger, pilih Halaman/Page➜ Buat Halaman Baru➜ Dalam Mode Penulisan Pilih "HTML" bukan "Compose", Kemudian Copy Kode dibawah ini   
    <input id="inputColor" type="color" value="#ff1a1a" />
    <button onclick="getColor()">Get Color</button>
    <br />
    <div id="colorHex">
    </div>
    <div id="colorRGB">
    <script>
    function getColor() {
        document.getElementById("colorHex").innerHTML = 'HEX : ' + document.getElementById("inputColor").value;
        document.getElementById("colorRGB").innerHTML = 'RGB : '+ hexToRgb(document.getElementById("inputColor").value);
    }
    function hexToRgb(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        var r = parseInt(result[1], 16);
        var g = parseInt(result[2], 16);
        var b = parseInt(result[3], 16);
        return 'RGB('+r+','+g+','+b+')'; 
    }
    </script>
    </div>
  3. Sebelum dipublish silahkan tambahkan terlebih dahulu kata katanya diatas Color Picker tersebut, agar ketika seseorang menggunakan color picker milik kamu, tidak kesusahan.
Sekian tutorial singkat yang dapat saya bagikan, jika kamu ingin meminta atau request tutorial silahkan berkomentar atau langsung saja hubungi saya melalui contact form yang tersedia diwebsite ini. 

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

12 Responses to "Cara Membuat Halaman Color Picker Responsive dengan HTML5"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. thanks tutorilanya gan. bermanfaat! otw praktek saya... heheh
    by : aorlin

    ReplyDelete
  2. keren tutorialnya, work diterapkan , thk y fr tutorial

    ReplyDelete
    Replies
    1. Makasih kalau bermanfaat

      Jan lupa berkunjung kembali hu

      Delete
  3. Keren nih boleh dicoba 👍.

    ReplyDelete
  4. Tambah ilmu lagi nih
    Tampilan keren, mudah diikuti dan enak dibaca.
    Nanya dikit: jadi color picker ini fungsinya mengetahui kode warna unik ya? yg bisa diterapkan di html blog masing-masing?

    ReplyDelete
    Replies
    1. Makasih kalau bermanfaat :D

      Yup tutor ini dapat diterapkan keseluruh html blog masing masing

      Delete
  5. Wah ilmu yang bermanfaat ini hu makasih sudah share tutorialnya Hehehe makin mantap deh blognya

    ReplyDelete
  6. Artikelnya keren nih om, cara membuat color picker, jadi tidak perlu jauh jauh kalau kita sedang mendesain projek

    ReplyDelete
  7. HTML color picker dihalaman sendiri lebih mantep liatnya.

    Terimakasih telah berbagi.

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With