-->

How To Add A Colour Picker Tool In Blogger

How To Add A Colour Picker Tool In Blogger

A color code generator tool is very important for choosing the appropriate color. Many blog users need to get a color code when changing their template or widget color
 And blog designers also need a color code generator for best color matching.

If you also want to install color picker tool in your website or blog. So with the help of the staps mentioned in this article, you can easily install the color picker tool in your blog or website.

How To Add A Colour Picker Tool In Blogger

  • On the Blogger Dashboard, go to the Pages page.
  • Create or open your Contact Page.
  • Switch to HTML mode. Click on the HTML button.
  • Paste the code below into the code window below your content.

<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>

  • before publish your post see a preview of your blog post.
  • If preview is correct then simply publish it.
ViewCloseComments
Cancel