Cara Membuat Color Picker Responsive di Halaman Statis Blog

Cara membuat color picker responsive di halaman statis blog. Siang sob, kali ini saya akan berbagi tutorial bagaimana cara membuat color picker responsive. Jika anda sering mengunjungi blog milik mbak Arlina, anda pasti akan menjumpai web tools color picker ini sob. Nah, anda yang penasaran bagaimana cara membuatnya, jangan khawatir sob, saya akan membagikan tutorialnya.

Cara Membuat Color Picker Responsive

Baca juga Cara Memasang Widget Recent Post Slider di Blog.

Sebelum membahas cara membuat color picker responsive, anda harus tahu dan paham terlebih dahulu mengenai color picker. Color picker ini adalah sebuah tool untuk mengetahui berbagai jenis warna lebih cepat dan lebih mudah. Sangat cocok bagi anda yang sering memodifikasi blog, terutama memodifikasi warna. Color picker ini memiliki tampilan yang cantik dan nyaman untuk dipandang. Jadi, sangat cocok dipasang di blog manapun. Bagaimana, anda tertarik sob?

Sebentar sob, saya belum selesai menjelaskan. Hehe.. Tool color picker ini sudah responsive sob, bisa menyesuaikan besar kecilnya layar. Dan code color picker ini hanya menggunakan kode HTML dan CSS. Jadi tidak akan mempengaruhi kecepatan loading blog. Nah, mungkin hanya itu sedikit penjelasan dari saya sob, silahkan simak langkah-langkahnya dibawah ini.

Memasang Color Picker Responsive

1. Silahkan buka dashboard blog sobat.

2. Buatlah postingan baru atau sobat bisa meletakkan di halaman stati langsung (Laman).

3. Setelah terbuka lembar halaman, silahkan anda copas kode dibawah ini, lalu letakkan didalam lembar kosong tersebut.

<li style="background: #5C97BF;">Kode Warna #5C97BF

</li>

<li style="background: #4B77BE;">Kode Warna #4B77BE

</li>

<li style="background: #1F3A93;">Kode Warna #1F3A93

</li>

<li style="background: #2574A9;">Kode Warna #2574A9

</li>

<li style="background: #67809F;">Kode Warna #67809F

</li>

<li style="background: #34495E;">Kode Warna #34495E

</li>

<li style="background: #3A539B;">Kode Warna #3A539B

</li>

<li style="background: #1E8BC3;">Kode Warna #1E8BC3

</li>

<li style="background: #6BB9F0;">Kode Warna #6BB9F0

</li>

<li style="background: #22313F;">Kode Warna #22313F

</li>

<li style="background: #336E7B;">Kode Warna #336E7B

</li>

<li style="background: #19B5FE;">Kode Warna #19B5FE

</li>

<li style="background: #89C4F4;">Kode Warna #89C4F4

</li>

<li style="background: #2C3E50;">Kode Warna #2C3E50

</li>

<li style="background: #3498DB;">Kode Warna #3498DB

</li>

<li style="background: #22A7F0;">Kode Warna #22A7F0

</li>

<li style="background: #94E0EE;">Kode Warna #94E0EE

</li>

<li style="background: #52B3D9;">Kode Warna #52B3D9

</li>

<li style="background: #59ABE3;">Kode Warna #59ABE3

</li>

<li style="background: #26A65B;">Kode Warna #26A65B

</li>

<li style="background: #1E824C;">Kode Warna #1E824C

</li>

<li style="background: #00B16A;">Kode Warna #00B16A

</li>

<li style="background: #2ABB9B;">Kode Warna #2ABB9B

</li>

<li style="background: #4DAF7C;">Kode Warna #4DAF7C

</li>

<li style="background: #03A678;">Kode Warna #03A678

</li>

<li style="background: #26C281;">Kode Warna #26C281

</li>

<li style="background: #019875;">Kode Warna #019875

</li>

<li style="background: #3FC380;">Kode Warna #3FC380

</li>

<li style="background: #16A085;">Kode Warna #16A085

</li>

<li style="background: #2ECC71;">Kode Warna #2ECC71

</li>

<li style="background: #C5EFF7;">Kode Warna #C5EFF7

</li>

<li style="background: #C8F7C5;">Kode Warna #C8F7C5

</li>

<li style="background: #049372;">Kode Warna #049372

</li>

<li style="background: #36D7B7;">Kode Warna #36D7B7

</li>

<li style="background: #66CC99;">Kode Warna #66CC99

</li>

<li style="background: #1BA39C;">Kode Warna #1BA39C

</li>

<li style="background: #1BBC9B;">Kode Warna #1BBC9B

</li>

<li style="background: #65C6BB;">Kode Warna #65C6BB

</li>

<li style="background: #BFBFBF;">Kode Warna #BFBFBF

</li>

<li style="background: #ABB7B7;">Kode Warna #ABB7B7

</li>

<li style="background: #DADFE1;">Kode Warna #DADFE1

</li>

<li style="background: #95A5A6;">Kode Warna #95A5A6

</li>

<li style="background: #C5DCE2;">Kode Warna #C5DCE2

</li>

<li style="background: #BDC3C7;">Kode Warna #BDC3C7

</li>

<li style="background: #EEEEEE;">Kode Warna #EEEEEE

</li>

<li style="background: #D2D7D3;">Kode Warna #D2D7D3

</li>

<li style="background: #F0E2C5;">Kode Warna #F0E2C5

</li>

<li style="background: #EB9532;">Kode Warna #EB9532

</li>

<li style="background: #E67E22;">Kode Warna #E67E22

</li>

<li style="background: #F27935;">Kode Warna #F27935

</li>

<li style="background: #F9BF3B;">Kode Warna #F9BF3B

</li>

<li style="background: #F7CA18;">Kode Warna #F7CA18

</li>

<li style="background: #F9690E;">Kode Warna #F9690E

</li>

<li style="background: #F39C12;">Kode Warna #F39C12

</li>

<li style="background: #D35400;">Kode Warna #D35400

</li>

<li style="background: #F4D03F;">Kode Warna #F4D03F

</li>

<li style="background: #F5AB35;">Kode Warna #F5AB35

</li>

<li style="background: #EB974E;">Kode Warna #EB974E

</li>

<li style="background: #F2784B;">Kode Warna #F2784B

</li>

<li style="background: #F4B350;">Kode Warna #F4B350

</li>

<li style="background: #E87E04;">Kode Warna #E87E04

</li>

<li style="background: #E74C3C;">Kode Warna #E74C3C

</li>

<li style="background: #CF000F;">Kode Warna #CF000F

</li>

<li style="background: #C0392B;">Kode Warna #C0392B

</li>

<li style="background: #D64541;">Kode Warna #D64541

</li>

<li style="background: #EF4836;">Kode Warna #EF4836

</li>

<li style="background: #96281B;">Kode Warna #96281B

</li>

<li style="background: #D91E18;">Kode Warna #D91E18

</li>

<li style="background: #E26A6A;">Kode Warna #E26A6A

</li>

<li style="background: #FF0000;">Kode Warna #FF0000

</li>

<li style="background: #F22613;">Kode Warna #F22613

</li>

<li style="background: #E08283;">Kode Warna #E08283

</li>

<li style="background: #9B59B6;">Kode Warna #9B59B6

</li>

<li style="background: #8E44AD;">Kode Warna #8E44AD

</li>

<li style="background: #BE90D4;">Kode Warna #BE90D4

</li>

<li style="background: #BF55EC;">Kode Warna #BF55EC

</li>

<li style="background: #9A12B3;">Kode Warna #9A12B3

</li>

<li style="background: #913D88;">Kode Warna #913D88

</li>

<li style="background: #722D6A;">Kode Warna #722D6A

</li>

<li style="background: #740A4E;">Kode Warna #740A4E

</li>

</ul>

</div>

/* COLOR PICKER */

#colorpicker ul.MC{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}

#colorpicker ul.MC li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}

#colorpicker ul.MC li:hover{z-index:4}

#colorpicker ul.MC li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}

#colorpicker ul.MC li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}

#colorpicker ul.MC li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}

#colorpicker ul.MC li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}

#colorpicker ul.MC li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}

#colorpicker ul.MC li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}

@media screen and (max-width:800px){#colorpicker ul.MC li{width:33.3%;line-height:normal}}

@media screen and (max-width:640px){#colorpicker ul.MC li{width:50%}}

@media screen and (max-width:480px){#colorpicker ul.MC li{width:100%}}

</style>

4. Setelah dipasang di halaman statis blog anda, silahkan anda klik Publikasikan. Lihat hasilnya.
5. Taraaa.. Blog anda sekarang telah terpasang web tools color picker responsive.

Untuk melihat demonya silahkan klik dibawah ini.

Demo

Oke.. Mudah kan sob? Demikian tutorial saya mengenai Cara Membuat Color Picker Responsive. Semoga bermanfaat bagi anda sob. Terimakasih.

Cara Membuat Color Picker Responsive di Halaman Statis Blog

Memasang Color Picker Responsive

Related Posts

Comments

Formulir Kontak