كيفية تركيب أداة عجلة الألوان علي منصة بلوجر

مرحبًا بالجميع . في هذا التدوينة علي مدونة مستر ميدو سنتعلم كيفية إنشاء أداة عجلة ألوان بسطة لـ Blogger، كل ما عليك سوى اتباع الخطوات بعناية لتجنب أي خطأ. لكن أولاً دعنا نتعرف قليلاً عن عجلة ألالوان.

ما هي أداة عجلة الألوان؟

أداة عجلة اختيار الألوان هي أداة صغيرة ستساعدك في العثور على الألوان متناسقة تلقائيًا أو يدويًا تدرجًا أو قيمة HEX أو RGB أو HSV. نظرًا لسهولة استخدام الأداة وبها عدد لا يُصدق من الخيارات ، فقد أصبحت أكثر شيوعًا لدى المصممين. يبحث المصممين ومطورين الويب دائمًا عن أدوات مختلفة لمساعدتهم على إنشاء تصميمات مثالية. إحدى الأدوات الشائعة هي أداة عجلة اختيار الألوان للعثور على الألوان التي تتطابق مع التصميم بمظهر جميل. لهذا السبب يحتاج بعض المدونين تركيب عجلة الألوان على المدونات الخاصة بهم على منصة بلوجر، بحيث يمكنك استخدامها في التدوين.

كيفية تركيب أداة عجلة الألوان في بلوجر

يمكنك استخدام أداة عجلة الألوان " Color Picker " للعثور على الألوان التي تبدو متشابهة مع تصميمك و للحصول على لون مشابه للون الذي تستخدمه بالفعل. المشكلة الوحيدة هي أن هناك العديد من أدوات عجلة اختيار الألوان المختلفة بحيث يصعب العثور على أداة يمكنك الوثوق بها. في هذا الشرح التعليمي سوف اعرض لكم جميع عجلات الألوان وانت عليك الاختيار من بينهم الأداة المناسبة ليك.

شاهد أيضاً :-

خطوات تثبيت أداة عجلة الألوان لـ Blogger

توجه إلى الواجهة الرئيسية في Blogger.

• إنتقل إلى الصفحات من القائمة المنسدلة. قم بإنشاء صفحة جديدة.
• نقوم بتحويل الصفحة من عرض وضع الإنشاء إلى عرض Html.
• انسخ الكود الذي حدده , ثم ألصقه بداخل الصفحة.
• احفظ العمل

عجلة الألوان المظهر الاول

زر مشاهدة الاداة والكود الخاص بيه

مشاهدة المظهر 1

<div class="color-picker">
  <label for="colorPicker">
  <input type="color" value="#1DB8CE" id="colorPicker"/>
  </label>
</div>
<style type="text/css">
 [type='color'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  width: 11px;
  height: 11px;
  border: none;
}

[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

[type='color']::-webkit-color-swatch {
  border: none;
}
.color-picker {
 padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
</style>
<script type="text/javascript">
//<![CDATA[
/* Color Picker JavaScript By mr-medo.net */
document.querySelectorAll('input[type=color]').forEach(function(picker) {

  var targetLabel = document.querySelector('label[for="' + picker.id + '"]'),
    codeArea = document.createElement('span');

  codeArea.innerHTML = picker.value;
  targetLabel.appendChild(codeArea);

  picker.addEventListener('change', function() {
    codeArea.innerHTML = picker.value;
    targetLabel.appendChild(codeArea);
  });
});
  
//]]>
</script>

عجلة الألوان المظهر الثاني

زر مشاهدة الاداة والكود الخاص بيه

مشاهدة المظهر 2

<!--HTML-->
<div class="container-CPT" id="app">
	<header :class="{'colour-header-dark': lightness &gt; 70 || alpha &lt; 25}" :style="{backgroundColor: hsla}" class="colour-header">
		{{hsla}}
	</header>
	<div :class="{'colour-body-dark': lightness &gt; 90 || alpha &lt; 5}" class="body colour-body">
		<div class="colour-slider">
			<ranger :default="hue" :max="360" :thumb-color="hsla" :track-background="hueGradient" v-model="hue"></ranger>
			<div class="colour-value">
				{{ hue }}
			</div>
		</div>
		<div class="colour-slider">
			<ranger :default="saturation" :thumb-color="hsla" :track-background="satGradient" v-model="saturation"></ranger>
			<div class="colour-value">
				{{ saturation }}
			</div>
		</div>
		<div class="colour-slider">
			<ranger :default="lightness" :thumb-color="hsla" :track-background="lightGradient" v-model="lightness"></ranger>
			<div class="colour-value">
				{{ lightness }}
			</div>
		</div>
		<div class="colour-slider">
			<ranger :default="alpha" :thumb-color="hsla" :track-background="alphaGradient" v-model="alpha"></ranger>
			<div class="colour-value">
				{{ alpha }}
			</div>
		</div>
	</div>
</div>

<!--CSS-->
<style>
.container-CPT{flex:1 0 auto;margin:50px 0;max-width:350px;border-radius:10px;background-color:#f3f3f3;overflow:hidden;}
.ranger{position:relative;width:100%}
.ranger-control{position:absolute;height:0;width:100%;overflow:hidden;opacity:0;pointer-events:none}
.ranger-control:focus+.ranger-magic .ranger-magic-thumb{box-shadow:0 0 0 7px rgba(106,106,123,0.1)}
.ranger-magic{position:relative;height:7px;border-radius:7px;background-color:#c5cdd5}
.ranger-magic-thumb{position:absolute;z-index:5;top:50%;height:24px;width:24px;box-shadow:0 0 0 0 rgba(106,106,123,0);border-radius:50%;background-color:currentColor;color:#6a6a7b;transform:translate(-50%,-50%);transition:left 0.15s,background-color 0.15s,transform 0.2s,box-shadow 0.5s ease-in-out}
.ranger-magic-thumb:active{box-shadow:0 0 0 10px rgba(106,106,123,0.2)}
.ranger-magic-thumb:active::after{height:65%;width:65%}
.ranger-magic-thumb:hover{transform:translate(-50%,-50%) scale(1.2);cursor:pointer}
.ranger-magic-thumb::after{content:"";position:absolute;left:50%;top:50%;height:50%;width:50%;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%);transition:0.4s}
.colour-slider{display:flex;align-items:center;margin-bottom:1rem;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}
.colour-value{flex:0 0 40px;text-align:right;pointer-events:none}
.colour-header{display:flex;align-items:flex-end;justify-content:flex-end;height:100px;padding:10px 30px;color:#fff;z-index:0}
.colour-header-dark{color:#444}
.colour-body{padding:30px;transition:0.35s}
.colour-body-dark{background-color:#525260;color:#fff}
</style>

<!--javascript JS-->
<script id="ranger" type="text/x-template">
	<div class="ranger">
		<input 
			ref="control"
			v-model="value"
			:min="min" 
			:max="max"
			class="ranger-control" 
			readonly="readonly"
			type="range"
			@input="$emit('input', value)"
		>
		<div 
			ref="track" 
			:style="{background: trackBackground}"
			class="ranger-magic" 
			@click="trackClicked">
			<div 
				ref="thumb"
				:style="{left: `calc(${value} / ${max} * 100%)`, color: thumbColor}"
				class="ranger-magic-thumb" 
				@mousedown="thumbDown"
				@touchstart="thumbDown"
				@mouseup="thumbUp"
				@touchend="thumbUp"
				@click="thumbClick"
			></div>
		</div>
	</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<!--partial-->
<script>
console.clear();

Vue.component('ranger', {
  props: {
    default: String,
    min: {
      type: Number,
      default: 0 },

    max: {
      type: Number,
      default: 100 },

    trackBackground: String,
    thumbColor: String },

  data() {
    return {
      value: 0 };

  },
  mounted() {
    if (this.default) {
      this.value = this.default;
    }
  },
  methods: {
    setThumbLocation(e) {
      const width = this.$refs.track.getBoundingClientRect().width;
      const left = this.$refs.track.getBoundingClientRect().left;
      const pos = e.x - left || e.touches[0].pageX - left;
      const percent = pos / width * 100;
      let thumbLeft = parseInt(percent / 100 * this.max);

      if (thumbLeft < this.min) {
        return this.min;
      } else if (thumbLeft > this.max) {
        return this.max;
      } else {
        return thumbLeft;
      }
    },
    trackClicked(e) {
      if (e.target === this.$refs.track) {
        this.thumbMove(e);
      }
    },
    thumbMove(e) {
      this.value = this.setThumbLocation(e);
      this.$emit('input', this.value);
    },
    thumbDown(e) {
      document.addEventListener('mousemove', this.thumbMove);
      document.addEventListener('touchmove', this.thumbMove);
      document.addEventListener('mouseup', this.thumbUp);
    },
    thumbUp(e) {
      document.removeEventListener('mousemove', this.thumbMove);
      document.removeEventListener('touchmove', this.thumbMove);
      document.removeEventListener('mouseup', this.thumbUp);
      this.$refs.control.focus();
    },
    thumbClick() {
      this.$refs.control.focus();
    } },

  template: '#ranger' });


new Vue({
  el: '#app',
  data() {
    return {
      hue: 207,
      saturation: 100,
      lightness: 71,
      alpha: 100 };

  },
  computed: {
    hsla() {
      return `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`;
    },
    hueGradient() {
      return `linear-gradient(90deg, 
				hsla(0, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100}) 0%,
				hsla(71, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100}) 20%,
				hsla(142, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100}) 40%,
				hsla(213, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100}) 60%,
				hsla(284, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100}) 80%,
				hsla(355, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100}) 100%)`;
    },
    satGradient() {
      return `linear-gradient(90deg, 
				hsla(${this.hue}, 0%, ${this.lightness}%, ${this.alpha / 100}) 0%,
				hsla(${this.hue}, 100%, ${this.lightness}%, ${this.alpha / 100}) 100%)`;
    },
    lightGradient() {
      return `linear-gradient(90deg, 
				hsla(${this.hue}, ${this.saturation}%, 0%, ${this.alpha / 100}) 0%, 
				hsla(${this.hue}, ${this.saturation}%, 50%, ${this.alpha / 100}) 50%, 
				hsla(${this.hue}, ${this.saturation}%, 100%, ${this.alpha / 100}) 100%)`;
    },
    alphaGradient() {
      return `linear-gradient(90deg, 
				hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 0) 0%, 
				hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1) 100%)`;
    } } });
</script>

عجلة الألوان المظهر الثالث

زر مشاهدة الاداة والكود الخاص بيه

مشاهدة المظهر 3

<center>  
  <!--main section-->  
 <section class="mt-3" id="main">  
      <div class="container mainbox">  
           <div class="row">  
                <div class="col text-center">  
                     <h2 class="title text-uppercase font-weight-bold">  
                          Gradient Color Code Generator  
                     </h2>  
                    
         <br />  
                     <input class="color1 my-4 mr-4" name="color1" type="color" value="#f7f7f7" />  
                     <input class="color2" name="color2" type="color" value="#F7EFFF" />  
                     <h4 class="subtitle text-uppercase font-weight-bold">  
                          Current CSS Background  
                     </h4>  
                     <h5 class="current-bg font-weight-bold my-4"></h5>  
                     <p class="copy-property lead font-italic">Click here to copy!</p>  
             
         <br />  
                     <button class="random-btn btn btn-light btn-lg mt-3 p-3">  
                          Generate random  
                     </button>
                  
                            
                  
                </div>  
           </div>  
      </div>  
 </section>  
 <!--end of main section-->   
</center>
<style type="text/css">     
  body 
 .title {  
   border-left: 0px solid #00FF0D;  
   border-right: 0px solid #00FF0D;  
   border-radius: 0px 0px 0px 0px;  
   color: #fff;  
   padding: 8px;  
   font-size: 22px;  
   text-align: center;  
 }  
 .subtitle {  
      font-family: "Kanit", sans-serif;  
      color: black;  
 }  
 .title {  
      letter-spacing: 0.4em;  
 }  
 .subtitle {  
      letter-spacing: 0.2em;  
 }  
 .color1,  
 .color2 {  
      width: 3em;  
      height: 3em;  
      cursor: pointer;  
 }  
 .current-bg {  
      font-family: "Source Code Pro", monospace;  
 }  
 .copy-property {  
      color: black;  
      cursor: grab;  
 }  
 .copy-property:active {  
      cursor: grabbing;  
 }  
 .random-btn {  
      color: black;  
      border-radius: 1rem;  
      transition: all 0.3s ease-in-out;  
 }  
 .random-btn:hover {  
      background: steelblue;  
      border: 1px solid steelblue;  
      color: white;  
      transform: scale(1.1);  
 }  
 .adspacebytechnicalarp {  
   padding: 2em;  
   box-shadow: 0 5px 15px rgba(0,0,0,.16);  
   border-radius: 5px;  
   margin-top: 1em;  
   background: #fff;  
   text-align: left;  
 }  
  </style>
<script language="Javascript">    
 const htmlBody = document.querySelector(".mainbox");  
 const color1 = document.querySelector(".color1");  
 const color2 = document.querySelector(".color2");  
 const currentSelection = document.querySelector(".current-bg");  
 const copyProperty = document.querySelector(".copy-property");  
 const randomButton = document.querySelector(".random-btn");  
 function setGradient() {  
      htmlBody.style.background = `linear-gradient(to right, ${color1.value}, ${color2.value})`;  
      currentSelection.textContent = `${htmlBody.style.background};`;  
 }  
 function generateRandom() {  
      const randomColor1 = Math.random().toString(16).slice(2, 8).toUpperCase();  
      const randomColor2 = Math.random().toString(16).slice(2, 8).toUpperCase();  
      color1.value = `#${randomColor1}`;  
      color2.value = `#${randomColor2}`;  
      setGradient();  
 }  
 function copyText() {  
      const text = currentSelection.innerText;  
      let temp_element = document.createElement("textarea");  
      document.body.appendChild(temp_element);  
      temp_element.value = text;  
      temp_element.select();  
      document.execCommand("copy");  
      document.body.removeChild(temp_element);  
 }  
 window.addEventListener("load", setGradient);  
 color1.addEventListener("input", setGradient);  
 color2.addEventListener("input", setGradient);  
 copyProperty.addEventListener("click", copyText);  
 randomButton.addEventListener("click", generateRandom);   
</script>

عجلة الألوان المظهر الرابع

زر مشاهدة الاداة والكود الخاص بيه

مشاهدة المظهر 4

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

  .adspacebytechnicalarp {
padding:2em;
box-shadow:0 5px 15px rgba(0,0,0,.16);
border-radius:5px;
margin-top:1em;
background:#fff;
text-align:left;
color:red;
}

  
  .ng-scope {text-align: center;}
  * {
  box-sizing: border-box;
}
.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>

		<div class="adspacebytechnicalarp arpContainer">
			  Place you Ad Code 1     
		</div>
<br />

<h3 style="text-align: center;"><span style="color: red;">List of Best Color Palettes Collection</span></h3>

<iframe frameborder="0" height="1080" layout="fixed-height" noloading="" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" src="https://raw.githack.com/IamArpain/free-blogger-scripts/IamArpain-start-1/scripts/color-palettes2.html" title="Color Palette" width="100%"><br />
    <amp-img noloading src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbHUTOzTzCEyJZoqVzQHro_s1VF09suz4l1d1nKMKGu_aRb3Zl7I1F9leedsdbtLtI0LIUe5eQK2SK7gv3HDg3PeZw7TjecCvN_LElW1GwsV5e3H-nUZSOyFP6-8QWivomGouznLBGjY/s1600/placeholder.png"
             layout="fixed-height"
             height="575"
             width="auto"
             placeholder><br />
    </amp-img><br />
  </iframe>

ينتهي هنا موضوعنا عن "كيفية تركيب أداة عجلة الألوان علي منصة بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية