طريقة إضافة كود اللوان Hexa | لمدونات بلوجر

بسم الله الرحمن الرحيم 

زوار ومتابعي المدونة 

السلام عليكم ورحمة الله وبركاته 

اليوم سوف نتعرف في درسنا هذا  على طريقة إضافة كود اللوان لمدونات بلوجر 

- طريقة التركيب :

1- ادخل إلى مدونتك | واختر تحرير قالب .

2- ابحث عن الوسم  </head>

3- ضع الكود التالي فوقه :

 /*** http://www.homeblog7.blogspot.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 = '↑ ' + v + '% = ' + lighter + '';
        preview.children[1].innerHTML = '↓ ' + v + '% = ' + darker + '';
    }
});

//]]>  

4- إبحث عن الوسم ]]></b:skin>

 5- ضع الكود التالي فوقه :

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

 

6- احفظ القالب .

7- ادخل إلى تخطيط | صفحات | ضمن الكود التالي في صفحة مستقلة  عبر محرر HTML واللصق الكود التالي في صندوق HTML :

 <div id="preview-area">
<div>
</div>
<div>
</div>
</div>
Input:
    <input id="hex-color-input" placeholder="#000000" type="text" value="#398" />

<div id="range-slider">
</div>
<div id="itempager" style="position: relative;">
<a href="http://homeblog7.blogspot.com/" style="bottom: 10px; color: #666666; display: block!important; font: normal bold 8px Arial,Sans-Serif!important; opacity: 1!important; position: absolute; right: 35px; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,.1); visibility: visible!important;" target="_blank" title="Variasi Blogger">►احصل عليها</a>
</div>
 

- عاين الاضافة .