صنع محول أكواد للالوان بنظام Hexa داخل مدونتك

صنع محول أكواد للالوان بنظام Hexa داخل مدونتك

سنضيف اضافة جميلة لمدونتك لتجعل مدونتك مميزة دوماً وهي محرر الألوان للحصول على أكود اﻷلوان بنظام Hexa بدون الحاجة لتضمين موقع داخل مدونتك !!

لاضافة المحول داخل مدونتك
1-البحث(CTRL+F) عن الوسم </head> ونلصق الكود التالي فوقه مباشرة

 /**
 * http://www.sweup.com
 */
function colorLuminance(hex, lum) {
    // Validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, "");
    if (hex.length < 6) {
        hex = hex.replace(/(.)/g, '$1$1');
    }
    lum = lum || 0;
    // Convert to decimal and change luminosity
    var rgb = "#",
        c;
    for (var i = 0; i < 3; ++i) {
        c = parseInt(hex.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00" + c).substr(c.length);
    }
    return rgb;
}
function rangeSlider(e,d){var k=document.documentElement,l=document.createElement("div"),a=document.createElement("span"),p=false,q,j,c,h;var f={value:0,vertical:false,rangeClass:"",draggerClass:"",drag:function(i){}};for(var g in f){if(typeof d[g]=="undefined"){d[g]=f[g]}}function m(r,s,i){if(r.addEventListener){r.addEventListener(s,i,false)}else{if(r.attachEvent){r.attachEvent("on"+s,i)}else{r["on"+s]=i}}}var o=d.vertical;e.className=(e.className+" range-slider "+(o?"range-slider-vertical":"range-slider-horizontal")).replace(/^ +/,"");l.className=("range-slider-track "+d.rangeClass).replace(/ +$/,"");a.className=("dragger "+d.draggerClass).replace(/ +$/,"");m(l,"mousedown",function(i){k.className=(k.className+" no-select").replace(/^ +/,"");q=l[!o?"offsetWidth":"offsetHeight"];j=l[!o?"offsetLeft":"offsetTop"];c=a[!o?"offsetWidth":"offsetHeight"];p=true;n(i);return false});m(document,"mousemove",function(i){n(i)});m(document,"mouseup",function(i){k.className=k.className.replace(/(^| )no-select( |$)/g,"");p=false});m(window,"resize",function(r){var i=a[!o?"offsetWidth":"offsetHeight"];a.style[!o?"left":"top"]=(((h/100)*l[!o?"offsetWidth":"offsetHeight"])-(i/2))+"px";p=false});function n(i){i=i||window.event;var r=!o?i.pageX:i.pageY;if(!r){r=!o?i.clientX+document.body.scrollLeft+document.documentElement.scrollLeft:i.clientY+document.body.scrollTop+document.documentElement.scrollTop}if(p&&r>=j&&r<=(j+q)){a.style[!o?"left":"top"]=(r-j-(c/2))+"px";h=Math.round(((r-j)/q)*100);d.drag(h)}}function b(){var i=a[!o?"offsetWidth":"offsetHeight"];h=((d.value/100)*l[!o?"offsetWidth":"offsetHeight"]);a.style[!o?"left":"top"]=(h-(i/2))+"px";d.drag(d.value)}l.appendChild(a);e.appendChild(l);b()};

var slider = document.getElementById('range-slider'),
    color = document.getElementById('hex-color-input'),
    preview = document.getElementById('preview-area');
rangeSlider(slider, {
    drag: function (v) {
        var lighter = colorLuminance(color.value, (v * 0.01)),
            darker = colorLuminance(color.value, -(v * 0.01));
        // Lighter...
        preview.children[0].style.backgroundColor = lighter;
        // Darker...
        preview.children[1].style.backgroundColor = darker;
        // Preview...
        preview.children[0].innerHTML = '<span>&uarr; ' + v + '% = ' + lighter + '</span>';
        preview.children[1].innerHTML = '<span>&darr; ' + v + '% = ' + darker + '<span>';
    }
}); 

2-نبحث(CTRL+F) عن الوسم ]]></b:skin> ونلصق الكود التالي فوقه مباشرة

 body {
    background-color:white;
    color:black;
    padding:30px;
}
#preview-area {
    height:100px;
    overflow:hidden;
}
#preview-area div {
    float:left;
    width:50%;
    height:inherit;
}
#preview-area div span {
    display:block;
    background-color:white;
}
p {
    display:block;
    margin:1em 0;
}
.range-slider {margin:0 auto 1em}
.range-slider-track {
  width:auto;
  height:20px;
  margin:0 auto;
  position:relative;
  cursor:e-resize;
}
.range-slider-track:before {
  content:"";
  display:block;
  position:absolute;
  top:9px;
  left:0;
  width:100%;
  height:2px;
  background-color:black;
}
.range-slider-track .dragger {
  display:block;
  width:10px;
  height:inherit;
  position:relative;
  z-index:2;
  background-color:red;
  cursor:inherit;
  /* opacity:.6; */
}
.range-slider-vertical {
  display:inline-block;
  vertical-align:middle;
  margin:0 1em 1em 0;
}
.range-slider-vertical .range-slider-track {
  cursor:n-resize;
  width:20px;
  height:100px;
}
.range-slider-vertical .range-slider-track:before {
  top:0;
  right:auto;
  left:9px;
  width:2px;
  height:100%;
}
.range-slider-vertical .range-slider-track .dragger {
  width:inherit;
  height:10px;
}
.no-select {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
 

3- نحفظ القالب ومبارك عليك
يمكنك تضمين محرر اﻷلوان في صفحة مستقلة او داخل مشاركاتك عبر محرر HTML باستخدام كود HTML التالي

 <div id="preview-area">
    <div></div>
    <div></div>
</div>
<p>Input:
    <input type="text" id="hex-color-input" value="#398" placeholder="#000000" />
</p>
<div id="range-slider"></div>
<div id="itempager" style="position:relative;"><a title="Variasi Blogger" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:35px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://sweup.com" target="_blank">&#9658;احصل عليها</a>
</div> 

معاينة حية  أدخل 6 خانات من الارقم والاحرف التالية (0,1,2,3,4,5,6,7,8,9,A,B,C,D,F,) وحرك السلايدر باللون اﻷحمر يسار ويمين لتحصل على درجات اللون الى هنا ينتهي درسنا وللحصول على جديدنا يمكنك الانضمام للمدونة من هنا واي مشاكل تواجهها يمكنك ترك تعليق أسفل التدوينة