Cara Membuat Widget Color Picker


Pada kesempatan yang berbahagia ini, saya akan membagikan tutorial cara membuat widget color picker di blog sobat.

Color picker - atau bahasa mudahnya mengambil warna, adalah istilah pada komputer yang digunakan untuk mengambil kode warna dan menggunakannya.

Untuk widget ini, saya mendapatkannya dari blog milik ArlinaDzgn. Saya hanya memodifikasi sedikit CSS yang ada pada kodenya.

Nah, berikut langsung saja kita simak pembahasannya;
  1. Pertama, masuk ke Blogger Dashboard
  2. Pada Menu di sebelah kiri pilih Halaman
  3. Buat Halaman Baru dan isi Judul
  4. Ganti tampilan postingan Compose laman menjadi HTML
  5. Lalu paste kode berikut
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <div class="color-widget" onclick="colorPick(event)">
    <form id="pick">
    <input id="coloredvalue" onclick='SelectAll("coloredvalue")' tabindex="-1" placeholder="Pick your color and copy" style="color:#ccc" readonly>
    </form>
    </div>
    <style scoped>#main-wrapper{padding:0;width:100%;border:0}#comments,#menu-wrap,#sidebar-wrapper{display:none;margin-top:0;margin:0}#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important}#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important}.post-container{padding:15px 0}.post,.post-body{background-position:center!important}.post-body p{margin:0}div#disqus_thread{display:none}#artikel,#blog1,.blog-posts{background-position:center!important}#pick{background-color:#f9f9f9;color:#ccc;margin:0;padding:0;padding-top:20px;transition:all .6s cubic-bezier(.694,.0482,.335,1)}.color-widget{background-color:#fff;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;left:0;width:100%;height:100%;padding:0;-moz-sizing:border-box;box-sizing:border-box}.row{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;opacity:.9;transition:all .6s cubic-bezier(.694,.0482,.335,1)}.row.visible{opacity:1}.shades{position:relative;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;height:0;opacity:0;transition:all .6s cubic-bezier(.694,.0482,.335,1)}.shades.visible{height:50px;opacity:1}.back,.color{-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;position:relative;margin:0;padding:0;border:none;cursor:pointer;transition:all .6s cubic-bezier(.694,.0482,.335,1)}.back:focus,.color:focus{outline:0}.back:hover:before,.color:hover:before{content:'';position:absolute;background-color:inherit;box-shadow:0 0 10px rgba(0,0,0,.2);z-index:1;top:-4px;left:-4px;right:-4px;bottom:-4px}.back:hover .icon,.color:hover .icon{z-index:1}.color.active:before,.color.active:hover:before{display:none}.back{background-color:#fff}.color.active{z-index:1}.shades{z-index:2;margin-right:.5px}.icon{font-family:arial;font-weight:700;color:#999;position:absolute;top:50%;left:50%;font-size:50px;line-height:50px;margin-left:-24px;margin-top:-25px}.blackout{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:none;transition:background-color .1s ease-in}.blackout.visible{background-color:rgba(0,0,0,.7);pointer-events:auto}input#coloredvalue{background:#f9f9f9;color:#ccc;border:none;padding:8px}input#coloredvalue:focus{border-color:none}#coloredvalue{cursor:pointer;top:0;left:0;right:0;bottom:0;width:100%;padding:0;margin:0;outline:0;border:0;box-pack:center;box-align:center;-ms-flex-pack:center;-ms-flex-align:center;-moz-box-pack:center;-moz-box-align:center;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;font-family:Tahoma,sans-serif;font-size:300%;color:#ccc;font-weight:700;text-align:center}</style>
    <script>var activateColor,buildWidget,cancelColor,colors,_0x236c=["data-hex","getAttribute","target","value","coloredvalue","getElementById","remove","visible","removeClass","active",".color.active","find",".color-widget",".blackout",".shades","name","data",".row","parents",'<div class="shades">\n</div>\n',"length","append","background-color","css","attr",'<button class="color"></button>',"addClass","before","keys",'<div class="row visible">\n</div>\n',"data-name",'<button class="back" title="arlinadesign.blogspot.com"><div class="icon"></div>\n</button>',"hasClass","stopPropagation","currentTarget","click",".color",".back",'<div class="blackout">\n</div>\n',"#fde0dc","#f9bdbb","#f69988","#f36c60","#e84e40","#e51c23","#dd191d","#d01716","#c41411","#b0120a","#ff7997","#ff5177","#ff2d6f","#e00032","#fce4ec","#f8bbd0","#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#ff80ab","#ff4081","#f50057","#c51162","#f3e5f5","#e1bee7","#ce93d8","#ba68c8","#ab47bc","#9c27b0","#8e24aa","#7b1fa2","#6a1b9a","#4a148c","#ea80fc","#e040fb","#d500f9","#aa00ff","#ede7f6","#d1c4e9","#b39ddb","#9575cd","#7e57c2","#673ab7","#5e35b1","#512da8","#4527a0","#311b92","#b388ff","#7c4dff","#651fff","#6200ea","#e8eaf6","#c5cae9","#9fa8da","#7986cb","#5c6bc0","#3f51b5","#3949ab","#303f9f","#283593","#1a237e","#8c9eff","#536dfe","#3d5afe","#304ffe","#e7e9fd","#d0d9ff","#afbfff","#91a7ff","#738ffe","#5677fc","#4e6cef","#455ede","#3b50ce","#2a36b1","#a6baff","#6889ff","#4d73ff","#4d69ff","#e1f5fe","#b3e5fc","#81d4fa","#4fc3f7","#29b6f6","#03a9f4","#039be5","#0288d1","#0277bd","#01579b","#80d8ff","#40c4ff","#00b0ff","#0091ea","#e0f7fa","#b2ebf2","#80deea","#4dd0e1","#26c6da","#00bcd4","#00acc1","#0097a7","#00838f","#006064","#84ffff","#18ffff","#00e5ff","#00b8d4","#e0f2f1","#b2dfdb","#80cbc4","#4db6ac","#26a69a","#009688","#00897b","#00796b","#00695c","#004d40","#a7ffeb","#64ffda","#1de9b6","#00bfa5","#d0f8ce","#a3e9a4","#72d572","#42bd41","#2baf2b","#259b24","#0a8f08","#0a7e07","#056f00","#0d5302","#a2f78d","#5af158","#14e715","#12c700","#f1f8e9","#dcedc8","#c5e1a5","#aed581","#9ccc65","#8bc34a","#7cb342","#689f38","#558b2f","#33691e","#ccff90","#b2ff59","#76ff03","#64dd17","#f9fbe7","#f0f4c3","#e6ee9c","#dce775","#d4e157","#cddc39","#c0ca33","#afb42b","#9e9d24","#827717","#f4ff81","#eeff41","#c6ff00","#aeea00","#fffde7","#fff9c4","#fff59d","#fff176","#ffee58","#ffeb3b","#fdd835","#fbc02d","#f9a825","#f57f17","#ffff8d","#ffff00","#ffea00","#ffd600","#fff8e1","#ffecb3","#ffe082","#ffd54f","#ffca28","#ffc107","#ffb300","#ffa000","#ff8f00","#ff6f00","#ffe57f","#ffd740","#ffc400","#ffab00","#fff3e0","#ffe0b2","#ffcc80","#ffb74d","#ffa726","#ff9800","#fb8c00","#f57c00","#ef6c00","#e65100","#ffd180","#ffab40","#ff9100","#ff6d00","#fbe9e7","#ffccbc","#ffab91","#ff8a65","#ff7043","#ff5722","#f4511e","#e64a19","#d84315","#bf360c","#ff9e80","#ff6e40","#ff3d00","#dd2c00","#efebe9","#d7ccc8","#bcaaa4","#a1887f","#8d6e63","#795548","#6d4c41","#5d4037","#4e342e","#3e2723","#eceff1","#cfd8dc","#b0bec5","#90a4ae","#78909c","#607d8b","#546e7a","#455a64","#37474f","#263238","#fafafa","#f5f5f5","#eeeeee","#e0e0e0","#bdbdbd","#9e9e9e","#757575","#616161","#424242","#212121","#000000","#ffffff"];function colorPick(c){var x=c[_0x236c[2]][_0x236c[1]](_0x236c[0]);return document[_0x236c[5]](_0x236c[4])[_0x236c[3]]=x,cancelColor()}colors=null,cancelColor=function(){var c,x,_;return c=(_=$(_0x236c[12]))[_0x236c[11]](_0x236c[13]),_[_0x236c[11]](_0x236c[10])[_0x236c[8]](_0x236c[9]),(x=_[_0x236c[11]](_0x236c[14]))[_0x236c[8]](_0x236c[7]),c[_0x236c[8]](_0x236c[7]),setTimeout(function(){return x[_0x236c[6]]()},1e3)},activateColor=function(c){var x,_,f,e,a,d,b,o,r;for(cancelColor(),x=$(_0x236c[12])[_0x236c[11]](_0x236c[13]),d=c[_0x236c[16]](_0x236c[15]),f=c[_0x236c[18]](_0x236c[17]),e=$(_0x236c[19]),b=0,o=(r=colors[d])[_0x236c[20]];o>b;b++)a=r[b],(_=$(_0x236c[25]))[_0x236c[24]](_0x236c[0],a),_[_0x236c[23]](_0x236c[22],a),e[_0x236c[21]](_);return f[_0x236c[27]](e),c[_0x236c[26]](_0x236c[9]),x[_0x236c[26]](_0x236c[7]),setTimeout(function(){return e[_0x236c[26]](_0x236c[7])},0)},buildWidget=function(){var c,x,_,f,e,a,d,b,o,r,t,n,l,i,u,s,v;for(e=$(_0x236c[12]),t=Object[_0x236c[28]](colors),i=[],b=u=0;3>=u;b=++u)f=$(_0x236c[29]),e[_0x236c[21]](f),i[b]=f;for(a=-1,l=0,n=function(){return 5===(a+=1)&&(l+=1,a=0),l},o=s=0,v=t[_0x236c[20]];v>s;o=++s)r=t[o],4===o&&(c=$(_0x236c[31]),i[n()][_0x236c[21]](c)),_=$(_0x236c[25]),d=colors[r][5],_[_0x236c[24]](_0x236c[30],r),_[_0x236c[24]](_0x236c[0],d),_[_0x236c[23]](_0x236c[22],d),i[n()][_0x236c[21]](_);return x=$(_0x236c[38]),e[_0x236c[21]](x),e[_0x236c[11]](_0x236c[13])[_0x236c[35]](function(c){return c[_0x236c[33]](),cancelColor()}),e[_0x236c[11]](_0x236c[37])[_0x236c[35]](function(c){return c[_0x236c[33]]()}),e[_0x236c[11]](_0x236c[36])[_0x236c[35]](function(c){var x;return c[_0x236c[33]](),(x=$(c[_0x236c[34]]))[_0x236c[32]](_0x236c[9])?cancelColor():activateColor(x)})},colors={Red:[_0x236c[39],_0x236c[40],_0x236c[41],_0x236c[42],_0x236c[43],_0x236c[44],_0x236c[45],_0x236c[46],_0x236c[47],_0x236c[48],_0x236c[49],_0x236c[50],_0x236c[51],_0x236c[52]],Pink:[_0x236c[53],_0x236c[54],_0x236c[55],_0x236c[56],_0x236c[57],_0x236c[58],_0x236c[59],_0x236c[60],_0x236c[61],_0x236c[62],_0x236c[63],_0x236c[64],_0x236c[65],_0x236c[66]],Purple:[_0x236c[67],_0x236c[68],_0x236c[69],_0x236c[70],_0x236c[71],_0x236c[72],_0x236c[73],_0x236c[74],_0x236c[75],_0x236c[76],_0x236c[77],_0x236c[78],_0x236c[79],_0x236c[80]],"Deep Purple":[_0x236c[81],_0x236c[82],_0x236c[83],_0x236c[84],_0x236c[85],_0x236c[86],_0x236c[87],_0x236c[88],_0x236c[89],_0x236c[90],_0x236c[91],_0x236c[92],_0x236c[93],_0x236c[94]],Indigo:[_0x236c[95],_0x236c[96],_0x236c[97],_0x236c[98],_0x236c[99],_0x236c[100],_0x236c[101],_0x236c[102],_0x236c[103],_0x236c[104],_0x236c[105],_0x236c[106],_0x236c[107],_0x236c[108]],Blue:[_0x236c[109],_0x236c[110],_0x236c[111],_0x236c[112],_0x236c[113],_0x236c[114],_0x236c[115],_0x236c[116],_0x236c[117],_0x236c[118],_0x236c[119],_0x236c[120],_0x236c[121],_0x236c[122]],"Light Blue":[_0x236c[123],_0x236c[124],_0x236c[125],_0x236c[126],_0x236c[127],_0x236c[128],_0x236c[129],_0x236c[130],_0x236c[131],_0x236c[132],_0x236c[133],_0x236c[134],_0x236c[135],_0x236c[136]],Cyan:[_0x236c[137],_0x236c[138],_0x236c[139],_0x236c[140],_0x236c[141],_0x236c[142],_0x236c[143],_0x236c[144],_0x236c[145],_0x236c[146],_0x236c[147],_0x236c[148],_0x236c[149],_0x236c[150]],Teal:[_0x236c[151],_0x236c[152],_0x236c[153],_0x236c[154],_0x236c[155],_0x236c[156],_0x236c[157],_0x236c[158],_0x236c[159],_0x236c[160],_0x236c[161],_0x236c[162],_0x236c[163],_0x236c[164]],Green:[_0x236c[165],_0x236c[166],_0x236c[167],_0x236c[168],_0x236c[169],_0x236c[170],_0x236c[171],_0x236c[172],_0x236c[173],_0x236c[174],_0x236c[175],_0x236c[176],_0x236c[177],_0x236c[178]],"Light Green":[_0x236c[179],_0x236c[180],_0x236c[181],_0x236c[182],_0x236c[183],_0x236c[184],_0x236c[185],_0x236c[186],_0x236c[187],_0x236c[188],_0x236c[189],_0x236c[190],_0x236c[191],_0x236c[192]],Lime:[_0x236c[193],_0x236c[194],_0x236c[195],_0x236c[196],_0x236c[197],_0x236c[198],_0x236c[199],_0x236c[200],_0x236c[201],_0x236c[202],_0x236c[203],_0x236c[204],_0x236c[205],_0x236c[206]],Yellow:[_0x236c[207],_0x236c[208],_0x236c[209],_0x236c[210],_0x236c[211],_0x236c[212],_0x236c[213],_0x236c[214],_0x236c[215],_0x236c[216],_0x236c[217],_0x236c[218],_0x236c[219],_0x236c[220]],Amber:[_0x236c[221],_0x236c[222],_0x236c[223],_0x236c[224],_0x236c[225],_0x236c[226],_0x236c[227],_0x236c[228],_0x236c[229],_0x236c[230],_0x236c[231],_0x236c[232],_0x236c[233],_0x236c[234]],Orange:[_0x236c[235],_0x236c[236],_0x236c[237],_0x236c[238],_0x236c[239],_0x236c[240],_0x236c[241],_0x236c[242],_0x236c[243],_0x236c[244],_0x236c[245],_0x236c[246],_0x236c[247],_0x236c[248]],"Deep Orange":[_0x236c[249],_0x236c[250],_0x236c[251],_0x236c[252],_0x236c[253],_0x236c[254],_0x236c[255],_0x236c[256],_0x236c[257],_0x236c[258],_0x236c[259],_0x236c[260],_0x236c[261],_0x236c[262]],Brown:[_0x236c[263],_0x236c[264],_0x236c[265],_0x236c[266],_0x236c[267],_0x236c[268],_0x236c[269],_0x236c[270],_0x236c[271],_0x236c[272]],"Blue Grey":[_0x236c[273],_0x236c[274],_0x236c[275],_0x236c[276],_0x236c[277],_0x236c[278],_0x236c[279],_0x236c[280],_0x236c[281],_0x236c[282]],Grey:[_0x236c[283],_0x236c[284],_0x236c[285],_0x236c[286],_0x236c[287],_0x236c[288],_0x236c[289],_0x236c[290],_0x236c[291],_0x236c[292],_0x236c[293],_0x236c[294]]},$(function(){return buildWidget()})</script>
    <script>$("body").on("click",function(){$("#coloredvalue").select()}),$("input").click(function(c){$(this).focus().select(),$(this).keypress(function(c){c.preventDefault()})})</script>
  6. Lalu Simpan dan Publish laman.
  7. Selesai

Demikian tutorial cara membuat widget color picker di blog.
Semoga bermanfaat.

Posting Komentar