عدد مشاهدات الموضوع:
لاضافة المحول داخل مدونتك
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>↑ ' + v + '% = ' + lighter + '</span>';
preview.children[1].innerHTML = '<span>↓ ' + 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">►احصل عليها</a>
</div>
معاينة حية أدخل 6 خانات من الارقم والاحرف التالية (0,1,2,3,4,5,6,7,8,9,A,B,C,D,F,) وحرك السلايدر باللون اﻷحمر يسار ويمين لتحصل على درجات اللون
الى هنا ينتهي درسنا وللحصول على جديدنا يمكنك الانضمام للمدونة من هنا واي مشاكل تواجهها يمكنك ترك تعليق أسفل التدوينةالموضوع الاصلي /http://www.sweup.com/2014/09/hexa-encoding-color.html
اضافة رائعه شكرا على الطرح
ردحذفلكن لم افهم فائدتها للاسف
ان كنت مصمم ويب فانت لابد ان تحتاج الى تضمين الوان في قالبك وهذه الاضافة من باب الاستغناء عن مواقع توليد الالوان بنظام HEXA
حذفممممم جيد جداً شكرا على ردك
حذفهيه ليست اضافة ضروريه كما اعتقد