How to Make Color Picker Tool on Blogger
Sometimes when we start to get saturated with the look of the blog, whether it's widget size or color design, then the way to get rid of that boredom is to make a few changes. The changes that will start to be visible are usually in the color. Then to find the type of color we want, of course we will look for color picker tools that are widely provided online on many sites.
Changing colors on templates or other sections of the blog does not require special skills. You simply copy the desired color code and paste it into the CSS code and it will automatically change the color of the selected HTML display. Choosing the right color also does not require special skills, you simply copy the color code through the color picker tool that is widely available on several websites.
What if then you want to create your own color picker tool and install it on a static blog page. This has been done a lot by many bloggers, including the site of the TelecomYaar blog itself. The reason for installing this color picker is so that we no longer have to frequently pacing to a website provider of the tool.
Here, I will share 2 different types of styles on this Color Picker Tool. If you are interested in installing it on your blog, please select the style that you think is suitable to be installed as a color picker tool on static page.
Install the first Color Picker Tool
<div ng-app="app">
<color-picker color="foo"></color-picker>
<p style="margin-top: 10px; width: 100%;">color: {{ foo }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
'use strict';
angular.module('app', ['colorPicker']);
}());
</script>
<style>
.ng-scope {text-align: center;}
* {
box-sizing: border-box;
}
body {
text-align: center;
padding-top: 75px;
}
.color-picker {
display: inline-block;
position: relative;
}
.color-picker input { display: none; }
.canvas-wrapper {
border-radius: 1000px;
overflow: hidden;
}
.indicator {
top: calc(50% - 2rem);
left: 50%;
display: block;
position: absolute;
background-color: transparent;
transform: translate3d(-50%,-2rem,0);
pointer-events: none;
}
.indicator .selected-color {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 30%;
border-radius: 1000px;
z-index: -1;
background-color: #fff;
-webkit-filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}
</style>
<script>
(function(){
'use strict';
angular.module('app', ['colorPicker']);
angular.module('colorPicker', [])
.directive('colorPicker', [function () {
var updateEventListenerTargets = ['touchstart','touchmove','mouseup','mousemove'],
clientX, clientY,
mousedown = 0;
function ColorPicker() {
// Initialize at center position with white
this.ngModel = '#ffffff';
}
ColorPicker.$inject = [];
return {
restrict: 'E',
controller: ColorPicker,
bindToController: true,
controllerAs: 'colorPicker',
scope: {
ngModel: '=color'
},
replace: true,
template: [
'<div class="color-picker">',
'<canvas width="230px" height="230px"></canvas>',
'<span class="indicator">',
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="64" viewBox="0 0 25 32">',
'<path fill="#ffffff" d="M12.528 0c-6.943 0-12.528 5.585-12.528 12.528 0 10.868 12.528 19.472 12.528 19.472s12.528-9.585 12.528-18.792c0-6.868-5.66-13.208-12.528-13.208zM12.528 21.434c-4.981 0-9.057-4.075-9.057-9.057s4.075-9.057 9.057-9.057 9.057 4.075 9.057 9.057-4.075 9.057-9.057 9.057z"></path>',
'</svg>',
'<span class="selected-color"></span>',
'</span>',
'</div>'
].join(''),
link: function (scope, el, attrs, colorPicker) {
var canvas = el.find('canvas')[0];
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = x;
var counterClockwise = false;
for(var angle=0; angle<=360; angle+=1){
var startAngle = (angle-2)*Math.PI/180;
var endAngle = angle * Math.PI/180;
context.beginPath();
context.moveTo(x, y);
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.closePath();
var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0,'hsl('+angle+', 10%, 100%)');
gradient.addColorStop(1,'hsl('+angle+', 100%, 50%)');
context.fillStyle = gradient;
context.fill();
}
var updateColorPicker = function(e){
e.preventDefault();
if (e.type === 'mousemove' && !mousedown) { return; }
clientX = (e.clientX) ? e.clientX : e.changedTouches[0].clientX;
clientY = (e.clientY) ? e.clientY : e.changedTouches[0].clientY;
var canvasOffset = canvas.getBoundingClientRect();
var canvasX = Math.floor(clientX - canvasOffset.left);
var canvasY = Math.floor(clientY - canvasOffset.top);
// get current pixel
var imageData = context.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var indicator = el.find('span')[0];
var selectedColor = indicator.getElementsByClassName('selected-color')[0];
if(!pixel[pixel.length - 1]) {
return;
}
var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
colorPicker.ngModel = '#' + ('0000' + dColor.toString(16)).substr(-6);
indicator.style.left = canvasX + 'px';
indicator.style.top = canvasY - 32 + 'px';
selectedColor.style.backgroundColor = colorPicker.ngModel;
scope.$apply(function(){
colorPicker.ngModel = colorPicker.ngModel;
});
};
for (var i=0, len = updateEventListenerTargets.length; i<len; i++) {
canvas.addEventListener(updateEventListenerTargets[i], updateColorPicker, false);
}
canvas.addEventListener('mousedown', function(){
mousedown = 1;
}, false);
document.addEventListener('mouseup', function(){
mousedown = 0;
}, false);
}
};
}]);
}());
</script>Install the second Color Picker Tool
<iframe frameborder="0" src="https://raw.githack.com/onbloging/kompi-html/master/color-palettes2.html" style="height: 575px; width: 100%;" title="Color Palette"></iframe>
<style type="text/css">#sidebar-wrapper{display:none !important;}#midsidebar-wrapper{display:none !important;}</style>
<style type="text/css">#main-wrapper{width:100%!important;float:left;margin:0;} .post{width:100%} </style>How to Make a Color Picker Tool on Blogger Static Page
- Log in to your Blogger Account select Pages and click New page
- Write on the title of the page first. For example here I wrote "Color Picker". It's up to you to write the page title you want and then click Publish.
- Go back to the page you have created and select the HTML view (next to compose).
- Copy and Paste all the code from one of the color picker tools above into the HTML page.
- Finally click Upadate.
Now please check the results by going to the page you have created.
This is a tutorial on how to make a color picker tool static page on a blog. Hopefully useful. Thank you.
Comments