Cara Membuat Material Color Picker di Blog | Mudah Digunakan

Cara Membuat Material Color Picker di Blog | Mudah Digunakan

Blogger Tools

SobatMasbro

September 27, 2020

SobatMasbro - Pada saat ini banyak blogger atau pembuat website yang berlomba-lomba dalam mendesain tampilannya. Baik dari segi fitur, tampilan, dan masih banyak lagi.

Seorang blogger pasti menginginkan hingga mencari tampilan agar website mereka semakin elegan. Maka dari itu mereka harus menciptakan websitenya menjadi yang bagus dipandang oleh pengunjungnya.

Saat ini saya akan mengambil contoh, misalnya website tersebut harus diperindah menggunakan warna yang bagus. Mulai dari header, sidebar, post, widget, tool lainnya, footer dan masih banyak lagi.

Nah kali ini saya akan membagikan sebuah tool yang berguna bagi sobat semua yaitu Cara Membuat Material Color Picker di Blog. Untuk step-step pemasangannya sobat ikuti langkah dibawah ini.

Kelebihan

1. Warna lengkap.
2. Terdapat 2 kode pewarnaan hex dan rgb
3. Kode otomatis tercopy saat diklik.
4. Mudah digunakan & Responsive.

Cara Membuat Material Color Picker

• Buka blogger.com > Halaman.
• Buat Halaman baru dan beri judul.
• Pilih bagian HTML bukan Compose.
• Copy dan paste kode dibawah ini.

<div class="colorpicker-sobatmasbro">
  <header>
    <svg height="80px" viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <style>
      circle { opacity: 0.8; }
    </style>
    <circle cx="32" cy="50" r="30" fill="#4DD0E1"></circle>
    <circle cx="68" cy="34" r="30" fill="#FFF04D"></circle>
    <circle cx="60" cy="68" r="30" fill="#F84D8A"></circle>
  </svg>
    <span class="pickersobatmasbro"> Material Color Picker</span>
  </header>

    <span class="pickersobatmasbrotwo"><strong>Pilihlah warna yang anda cari dan klik otomatis kode warna akan ter-copy<br>Klik 'hex' untuk mengubah ke 'rgb' dipojok kanan atas</strong></span>
  <div id="container">
    <section id="controls">
      <div class="col">
        <div id="mode-selector" class="clickable hint--bottom" aria-label="Toggle modes" onclick="changeOutput()">
          <div id="current-output">hex</div>
          <div><i class="fa fa-retweet"></i></div>
        </div>
      </div>
      <div class="col">
        <input id="pin-state" type="checkbox" />
        <label id="pin" for="pin-state" class="clickable hint--bottom-left" aria-label="Pin to keep visible"><i class="fa fa-thumb-tack"></i></label>
        <div id="hide" class="clickable hint--bottom" aria-label="Hide"><i class="fa fa-close"></i></div>
        <div id="close" class="clickable hint--bottom-left" aria-label="Quit"><i class="fa fa-power-off"></i></div>
      </div>
    </section>

    <div id="key">
      <div class="color" style="background-color:#FFF; color: #000;" data-series=""> White </div>
      <div class="color" style="background-color:#000; color: #FFF" data-series=""> Black </div>
    </div>

    <div id="tooltip" class="hidden">
      Color
    </div>
    <textarea id="clipboard" readonly></textarea>
  </div>
<div class="footersobatmasbro"><strong><script>
footblogsobatmasbro=new Date();
thnsobatmasbro=footblogsobatmasbro.getFullYear();
document.write("Copyright &copy; 2017-"+thnsobatmasbro);
</script> | Material Color Picker | Published by <a href="https://sobatmasbro.blogspot.com" target="_blank" title='Klik untuk mampir ke Blog Sobat Masbro' >Blog Sobat Masbro</a></strong></div>
</div>

<style>
.pickersobatmasbro{font-size:40px}.pickersobatmasbrotwo{font-size:18px;padding:15px 0px 20px 0px;text-align:center}.footersobatmasbro{font-size:15px;padding:30px 0px 15px 0px}#container{width:370px;max-width:370px;height:410px;position:relative;box-shadow:10px 10px 24px -12px rgba(0,0,0,0.75)}.colorpicker-sobatmasbro{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center;font-family:'arial'}#key{display:flex;position:absolute;flex-direction:column;height:60px;width:80px;right:0;bottom:0}#key>div{display:flex;justify-content:center;align-items:center;text-align:center;height:100%}#tooltip{display:flex;justify-content:center;align-items:center;text-align:center;flex-direction:column;position:fixed;min-width:150px;height:40px;top:0;left:0;padding:10px;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);z-index:2;font-size:12px;border-radius:4px}#clipboard{position:fixed;z-index:-1;top:-370px}#controls{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:#263238;height:30px;font-size:18px;padding:2px;border-radius:5px 5px 0 0}#controls .col{display:flex;flex-direction:row;justify-content:center;color:#fff}#controls .col *{margin:0 2px}#pin-state{display:none}#pin-state:checked~label{color:#00b8d4}#pin:hover{color:#84ffff}#hide:hover{color:#ffea00}#close:hover{color:#ff1744}#mode-selector{display:flex;user-select:none}#mode-selector:hover{color:#00e5ff}#current-output{font-size:18px}.cell{width:20px;height:20px;border:0px solid rgba(0,0,0,0.25);line-height:1.5em}.cell:hover{z-index:1;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.row{display:flex;width:100%;font-size:12px}.gutter.cell{width:90px;text-align:center}.color{cursor:pointer}.arrow{width:0;height:0;cursor:pointer;-webkit-user-select:none}.arrow.left{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid white}.arrow.right{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid white}.arrow.left:hover{border-left:10px solid #00e5ff}.arrow.right:hover{border-right:10px solid #00e5ff}.clickable{cursor:pointer}.hidden{opacity:0;z-index:-1 !important}header{display:flex;align-items:center}a,a:visited{color:#2196f3}*{box-sizing:border-box}
</style>

<script type='text/javascript'>
//<![CDATA[
"use strict";const CONTAINER_WIDTH=370,TOOLTIP_WIDTH=140,TOOLTIP_HEIGHT=40,State={output:["hex","rgb"],index:0,tooltipEle:document.getElementById("tooltip"),currentColor:null,pinnedEle:document.getElementById("pin-state"),lastTooltip:0,tooltipLock:!1},colors={Red:[["50","#FFEBEE"],["100","#FFCDD2"],["200","#EF9A9A"],["300","#E57373"],["400","#EF5350"],["500","#F44336"],["600","#E53935"],["700","#D32F2F"],["800","#C62828"],["900","#B71C1C"],["A100","#FF8A80"],["A200","#FF5252"],["A400","#FF1744"],["A700","#D50000"]],Pink:[["50","#FCE4EC"],["100","#F8BBD0"],["200","#F48FB1"],["300","#F06292"],["400","#EC407A"],["500","#E91E63"],["600","#D81B60"],["700","#C2185B"],["800","#AD1457"],["900","#880E4F"],["A100","#FF80AB"],["A200","#FF4081"],["A400","#F50057"],["A700","#C51162"]],Purple:[["50","#F3E5F5"],["100","#E1BEE7"],["200","#CE93D8"],["300","#BA68C8"],["400","#AB47BC"],["500","#9C27B0"],["600","#8E24AA"],["700","#7B1FA2"],["800","#6A1B9A"],["900","#4A148C"],["A100","#EA80FC"],["A200","#E040FB"],["A400","#D500F9"],["A700","#AA00FF"]],DeepPurple:[["50","#EDE7F6"],["100","#D1C4E9"],["200","#B39DDB"],["300","#9575CD"],["400","#7E57C2"],["500","#673AB7"],["600","#5E35B1"],["700","#512DA8"],["800","#4527A0"],["900","#311B92"],["A100","#B388FF"],["A200","#7C4DFF"],["A400","#651FFF"],["A700","#6200EA"]],Indigo:[["50","#E8EAF6"],["100","#C5CAE9"],["200","#9FA8DA"],["300","#7986CB"],["400","#5C6BC0"],["500","#3F51B5"],["600","#3949AB"],["700","#303F9F"],["800","#283593"],["900","#1A237E"],["A100","#8C9EFF"],["A200","#536DFE"],["A400","#3D5AFE"],["A700","#304FFE"]],Blue:[["50","#E3F2FD"],["100","#BBDEFB"],["200","#90CAF9"],["300","#64B5F6"],["400","#42A5F5"],["500","#2196F3"],["600","#1E88E5"],["700","#1976D2"],["800","#1565C0"],["900","#0D47A1"],["A100","#82B1FF"],["A200","#448AFF"],["A400","#2979FF"],["A700","#2962FF"]],LightBlue:[["50","#E1F5FE"],["100","#B3E5FC"],["200","#81D4FA"],["300","#4FC3F7"],["400","#29B6F6"],["500","#03A9F4"],["600","#039BE5"],["700","#0288D1"],["800","#0277BD"],["900","#01579B"],["A100","#80D8FF"],["A200","#40C4FF"],["A400","#00B0FF"],["A700","#0091EA"]],Teal:[["50","#E0F2F1"],["100","#B2DFDB"],["200","#80CBC4"],["300","#4DB6AC"],["400","#26A69A"],["500","#009688"],["600","#00897B"],["700","#00796B"],["800","#00695C"],["900","#004D40"],["A100","#A7FFEB"],["A200","#64FFDA"],["A400","#1DE9B6"],["A700","#00BFA5"]],Cyan:[["50","#E0F7FA"],["100","#B2EBF2"],["200","#80DEEA"],["300","#4DD0E1"],["400","#26C6DA"],["500","#00BCD4"],["600","#00ACC1"],["700","#0097A7"],["800","#00838F"],["900","#006064"],["A100","#84FFFF"],["A200","#18FFFF"],["A400","#00E5FF"],["A700","#00B8D4"]],Green:[["50","#E8F5E9"],["100","#C8E6C9"],["200","#A5D6A7"],["300","#81C784"],["400","#66BB6A"],["500","#4CAF50"],["600","#43A047"],["700","#388E3C"],["800","#2E7D32"],["900","#1B5E20"],["A100","#B9F6CA"],["A200","#69F0AE"],["A400","#00E676"],["A700","#00C853"]],LightGreen:[["50","#F1F8E9"],["100","#DCEDC8"],["200","#C5E1A5"],["300","#AED581"],["400","#9CCC65"],["500","#8BC34A"],["600","#7CB342"],["700","#689F38"],["800","#558B2F"],["900","#33691E"],["A100","#CCFF90"],["A200","#B2FF59"],["A400","#76FF03"],["A700","#64DD17"]],Lime:[["50","#F9FBE7"],["100","#F0F4C3"],["200","#E6EE9C"],["300","#DCE775"],["400","#D4E157"],["500","#CDDC39"],["600","#C0CA33"],["700","#AFB42B"],["800","#9E9D24"],["900","#827717"],["A100","#F4FF81"],["A200","#EEFF41"],["A400","#C6FF00"],["A700","#AEEA00"]],Yellow:[["50","#FFFDE7"],["100","#FFF9C4"],["200","#FFF59D"],["300","#FFF176"],["400","#FFEE58"],["500","#FFEB3B"],["600","#FDD835"],["700","#FBC02D"],["800","#F9A825"],["900","#F57F17"],["A100","#FFFF8D"],["A200","#FFFF00"],["A400","#FFEA00"],["A700","#FFD600"]],Amber:[["50","#FFF8E1"],["100","#FFECB3"],["200","#FFE082"],["300","#FFD54F"],["400","#FFCA28"],["500","#FFC107"],["600","#FFB300"],["700","#FFA000"],["800","#FF8F00"],["900","#FF6F00"],["A100","#FFE57F"],["A200","#FFD740"],["A400","#FFC400"],["A700","#FFAB00"]],Orange:[["50","#FFF3E0"],["100","#FFE0B2"],["200","#FFCC80"],["300","#FFB74D"],["400","#FFA726"],["500","#FF9800"],["600","#FB8C00"],["700","#F57C00"],["800","#EF6C00"],["900","#E65100"],["A100","#FFD180"],["A200","#FFAB40"],["A400","#FF9100"],["A700","#FF6D00"]],DeepOrange:[["50","#FBE9E7"],["100","#FFCCBC"],["200","#FFAB91"],["300","#FF8A65"],["400","#FF7043"],["500","#FF5722"],["600","#F4511E"],["700","#E64A19"],["800","#D84315"],["900","#BF360C"],["A100","#FF9E80"],["A200","#FF6E40"],["A400","#FF3D00"],["A700","#DD2C00"]],Grey:[["50","#FAFAFA"],["100","#F5F5F5"],["200","#EEEEEE"],["300","#E0E0E0"],["400","#BDBDBD"],["500","#9E9E9E"],["600","#757575"],["700","#616161"],["800","#424242"],["900","#212121"]],BlueGrey:[["50","#ECEFF1"],["100","#CFD8DC"],["200","#B0BEC5"],["300","#90A4AE"],["400","#78909C"],["500","#607D8B"],["600","#546E7A"],["700","#455A64"],["800","#37474F"],["900","#263238"]],Brown:[["50","#EFEBE9"],["100","#D7CCC8"],["200","#BCAAA4"],["300","#A1887F"],["400","#8D6E63"],["500","#795548"],["600","#6D4C41"],["700","#5D4037"],["800","#4E342E"],["900","#3E2723"]]},container=document.getElementById("container");for(let e in colors){const F=document.createElement("section");F.className="row",colors[e].forEach((t,n)=>{const o=createCell(t[0],t[1]);F.appendChild(o),"500"===t[0]&&F.insertBefore(createCell(t[0],t[1],!0,e),F.childNodes[0])}),container.appendChild(F)}function createCell(e,F,t,n){const o=document.createElement("div");return o.className="cell color",t&&(o.innerHTML=`<span>${n}</span>`,o.className+=" gutter"),o.setAttribute("data-series",e),o.style.backgroundColor=F,o.style.color=luminance(F,"#fff","#444"),o}function copyColor(e){if(null!==State.currentColor){State.tooltipLock=!0;const e=State.tooltipEle,F="Copied to clipboard!";State.lastTooltip=performance.now(),e.className="";const t=document.getElementById("clipboard");let n;t.innerHTML=n=State.currentColor,t.select();try{document.execCommand("copy");let t=e.innerHTML;e.innerHTML="Copied to clipboard!",setTimeout(function(){State.tooltipLock=!1,e.innerHTML===F&&(e.innerHTML=t)},1e3)}catch(e){console.log(e)}}}function changeOutput(){State.index++,State.index===State.output.length&&(State.index=0),document.getElementById("current-output").innerHTML=State.output[State.index]}function closeApp(){State.sharedObj.quit()}function hideApp(){State.sharedObj.hide()}function togglePinned(){State.sharedObj.pinned=State.pinnedEle.checked}function rgbToHex(e,F,t){return"#"+((1<<24)+(parseInt(e)<<16)+(parseInt(F)<<8)+parseInt(t)).toString(16).slice(1)}function hexToRgb(e){const F=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return F?{r:parseInt(F[1],16),g:parseInt(F[2],16),b:parseInt(F[3],16)}:null}function luminance(e,F,t){const n=hexToRgb(e);return(299*n.r+587*n.g+114*n.b)/1e3>=128?t:F}document.body.addEventListener("mousemove",e=>{const F=State.tooltipEle;let t;if(e.target.className.indexOf("color")>-1)t=e.target;else{if(!(e.target.parentNode.className.indexOf("color")>-1))return F.className="hidden",void(State.currentColor=null);t=e.target.parentNode}State.lastTooltip=performance.now();const n=t.style.backgroundColor,o=t.getAttribute("data-series"),A=/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/.exec(n);let E,l=rgbToHex(A[1],A[2],A[3]);switch(State.output[State.index]){case"rgb":E=n;break;case"hex":E=l}F.style.backgroundColor=E,State.tooltipLock||(F.innerHTML=`<span style='font-size:1.2em'>${E}</span>${o}`),F.style.color=luminance(l,"#fff","#000"),State.currentColor=E;let r=e.clientX-70,a=e.clientY-40-10;r<0?r=e.clientX+30:r>230&&(r-=65),a<0&&(a=e.clientY+25),F.style.top=a+"px",F.style.left=r+"px",F.className=""}),document.body.addEventListener("click",copyColor),document.body.addEventListener("touchend",copyColor),document.onkeydown=(e=>{27===e.keyCode&&hideApp()}),setInterval(function(){performance.now()-State.lastTooltip>=2e3&&(tooltip.className="hidden")},2e3);
</script>

• Publikasikan, dan lihat hasilnya.

• DEMO

Oke sob cukup sekian tutorial yang saya bagikan saat ini mengenai Cara Membuat Material Color Picker di Blog.

Jika ada yang ditanyakan atau kesulitan, silahkan berkomentar dibawah ini. semoga bermanfaat, terima kasih, dan sampai jumpa.

SobatMasbro September 27, 2020