يمكنك الان شراء مساحة اعلانية علي موقعنا معرفه المزيد

اعلان

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

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

اهلا وسهلا بكم في شرح جديد ومميز علي مدونة مستر ميدو واليوم سنقدم شرحًا شاملاً لإضافة متغير الألوان التلقائي في قالب 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"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

عن الكاتب

عبدالحميد ميدو، مصمم فلاتر سنابشات ومنشئ محتوى رقمي بخبرة تزيد عن 7 سنوات. لدي شغف بأحدث التقنيات، اهتمامًا خاصًا بلغات البرمجة كـ Python, JS وCSS.

تعليقان (2)

  1. شكرا لك جميل جدا، ولكن لدي طلب بسيط هل يمكنك شرح طريقة اضافة القوانين في صندوق التعليقات كما اضفته انت 🌹.
    1. وأهلا وسهلا اخي يسعدني تعليقك، طلبك ابسط واسهل اني اكتب عنه مقال.
      تواصل معي عبر واتساب من صفحة اتصل بنا، لشرح الطريقة لك.
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.