خطوات اضافة متغير تأثير الألوان التلقائي في قالب Plus UI

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

تأثير الألوان التلقائي في قالب Plus UI

مرحبا بكم متابعينا الأوفياء في موقعكم مجال الربح ، من خلال هذا المقال سنشارك معكم طريقة إضافة متغير الألوان داخل قالب plus ui بشكل سهل وإحترافي.

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

طريقة إضافة متغير الألوان داخل قالب Plus UI

يمكن استخدام "Auto Themer" كوسيلة مبتكرة لإضفاء جو مميز على موقعك، حيث يقوم بتغيير سمة الموقع كل 5 ثوانٍ، مما يمنح تجربة مستخدم فريدة تشبه الأجواء الديسكو. إليك بعض الأفكار حول كيفية استخدام هذه الميزة.

كيفية استخدام متغير الألوان "Auto Themer"

جذب الانتباه: إذا كان لديك محتوى معين ترغب في تسليط الضوء عليه، يمكنك تشغيل Auto Themer لبضع دقائق لجذب الزوار وجعلهم يتفاعلون مع الموقع.
التفاعل مع الزوار: يمكن دعوة الزوار لتجربة Auto Themer والمشاركة بآرائهم حول الألوان والتصميمات المختلفة، مما يزيد من التفاعل على موقعك.

التأثير على الإصدار المستقبلي:

بالنسبة للإصدار المستقبلي من Auto Themer، فإن ذلك يعتمد بشكل كبير على مدى استخدام الكود حاليًا:

التحديثات المستمرة: إذا زاد عدد المستخدمين بشكل ملحوظ، سيتم العمل على تحسين الكود وتقديم تحديثات بشكل دوري.
تحسين واجهة المستخدم: ستركز الترقيات المستقبلية على تحسين تجربة المستخدم في واجهة المستخدم Plus UI، مما قد يتطلب جمع ملاحظات من المستخدمين الحاليين.

نصيحة:

إذا كنت تفكر في استخدام Auto Themer، من المهم متابعة تفاعلات الزوار وتحليل ما إذا كانت هذه الميزة تضيف قيمة حقيقية لتجربتهم على الموقع. إذا كانت لديك تعليقات أو اقتراحات، يمكنك مشاركتها مع المطورين لتحسين الكود وتوسيع ميزاته في المستقبل.

اليك الآن الخطوات لإضافة هته الميزة الرائعة :

انتقل إلى لوحة تحكم Blogger.
انقر فوق زر السمة، ثم انقر فوق تحرير HTML.
عبر زر Ctrl+F ابحث عن وسم ]]></b:skin>
بعد إيجاد الوسم قم بنسخ كود 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 متغير الألوان "Auto Themer"

نأتي الآن لأهم خطوة لإضافة خاصية متغير الألوان التلقائي :

بنفس الخطوات السابقة نبحث عن هذا الكود <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 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>

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

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

ابحث بنفس الطريقة عن وسم </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>

خلاصة  :

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

مجال الربح I أفضل طرق الربح

خطوات اضافة متغير تأثير الألوان التلقائي في قالب Plus UI