قالب Plus UI يُعد من بين أفضل قوالب Blogger التي تقدم تصميماً عصرياً وسرعة أداء عالية. قد يحتاج بعض المدونين إلى تبديل شبكة المنشورات لتسهيل التنقل بين تصميمات الشبكة (Grid Layout) المختلفة، ما يوفر تجربة قراءة متكاملة للمستخدمين. هذه الميزة تتيح لك عرض المحتوى بطريقة ديناميكية تجعل زوار مدونتك يشعرون بالتجديد والراحة أثناء التصفح. لكن كيف يمكن إضافة هذا التبديل بسهولة؟ دعنا نتعمق في الخطوات ونشرح كل ما تحتاج لمعرفته بطريقة بسيطة وبأمثلة واقعية. و يوفر قالب Plus UI أساسًا ممتازًا للتخصيص، مما يسمح لك بالتبديل بين تخطيطات الشبكة الفردية والمزدوجة لمنشورات مدونتك. سيرشدك هذا الدليل خلال إضافة ميزة تبديل للتبديل بسلاسة بين هذه التخطيطات، مما يعزز كل من الوظائف والجماليات.
 |
| كيفية إضافة تبديل شبكة المنشورات في قالب Plus UI بسهولة |
لماذا تستخدم التبديل لتخطيطات الشبكة؟
قبل الخوض في التنفيذ، دعنا نستكشف فوائد وجود مفتاح تبديل لتخطيطات الشبكة:
تجربة المستخدم : إن توفير خيارات التخطيط للقراء يمكن أن يلبي تفضيلات مختلفة، مما يؤدي إلى تحسين المشاركة.
الجماليات : يمكن للتخطيطات المختلفة تسليط الضوء على جوانب مختلفة من المحتوى الخاص بك، مما يجعل مدونتك جذابة بصريًا.
الوظائف : يمكنك التبديل بين التخطيطات بسهولة دون تغيير هيكل مدونتك بالكامل.
دليل خطوة بخطوة
الخطوة 1: إعداد هيكل HTML قم بتسجيل الدخول إلى لوحة تحكم Blogger ثم انتقل إلى المظاهر .
الخطوة 2: انقر على الرمز الموجود بجوار زر التخصيص .
الخطوة 3: الآن اضغط على Ctrl + F
وابحث عن الوسم داخل قالب مدونتك، وستظهر لك الكود التالي بعد البحث.
<h2 class='title dt'><data:messages.latestPosts/></h2>الخطوة 4: الآن استبدل الكود أدناه.
<div class='tn-credit' made-by='WIKIFORTECH | YouTube' style='display: none;'/><h2 class='title'><data:messages.latestPosts/></h2><div class='gridMode dt'><label> Grid <input id='toggleSwitch' type='checkbox'/><svg class='line' id='toggleIcon' viewBox='0 0 24 24'><path d='M10 4H14C18.42 4 22 7.58 22 12C22 16.42 18.42 20 14 20H10C5.58 20 2 16.42 2 12C2 7.58 5.58 4 10 4Z'/><path class='svgG' d='M10 16C12.2091 16 14 14.2091 14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 14.2091 7.79086 16 10 16Z'/></svg></label></div>تحذير! لا تقم بإزالة الرصيد من الكود، لأنه لن يظهر على موقع الويب الخاص بك.
الخطوة 4: إضافة CSS للتخطيطات اضغط على Ctrl + F مرة أخرى وابحث عن ]]></b:skin> العلامة.
الخطوة 5: قم بلصق الكود التالي أعلى
]]></b:skin> العلامة.
.gridMode label{display:flex;align-items:center;cursor:pointer;font-size:var(--widgetT);font-weight:var(--widgetTw);position:relative}.gridMode svg{width:22px;height:22px;margin:0 8px}.gridMode input{display:none}.svgG{fill:var(--themeC);stroke:var(--themeC)}.drK .svgG{fill:var(--darkU);stroke:var(--darkU)}@media (min-width: 501px){.gridMode{display:none}الآن كل ما نحتاجه هو إضافة كود JavaScript. ما عليك سوى اتباع التعليمات الموضحة أدناه.
الخطوة 6: تنفيذ JavaScript للتبديل ابحث عن </body> العلامة. ستكون في نهاية كود المصدر الخاص بقالبك.
انسخ الكود أدناه والصقه فوق العلامة.
<script>/*<![CDATA[*/function I(){var k=['2umXePN','956958WDVogi','4378940jbSFvb','.tn-credit','318126VsjICm','toggleIcon','9KGAOCb','classList','body','oneGrd','toggleState','toggleSwitch','62704ndWcTe','innerHTML','remove','<path\x20d=\x27M10\x204H14C18.42\x204\x2022\x207.58\x2022\x2012C22\x2016.42\x2018.42\x2020\x2014\x2020H10C5.58\x2020\x202\x2016.42\x202\x2012C2\x207.58\x205.58\x204\x2010\x204Z\x27/><path\x20class=\x27svgG\x27\x20d=\x27M10\x2016C12.2091\x2016\x2014\x2014.2091\x2014\x2012C14\x209.79086\x2012.2091\x208\x2010\x208C7.79086\x208\x206\x209.79086\x206\x2012C6\x2014.2091\x207.79086\x2016\x2010\x2016Z\x27/>','<path\x20d=\x27M10\x204H14C18.42\x204\x2022\x207.58\x2022\x2012C22\x2016.42\x2018.42\x2020\x2014\x2020H10C5.58\x2020\x202\x2016.42\x202\x2012C2\x207.58\x205.58\x204\x2010\x204Z\x27/><path\x20class=\x27svgG\x27\x20d=\x27M14\x2016C16.2091\x2016\x2018\x2014.2091\x2018\x2012C18\x209.79086\x2016.2091\x208\x2014\x208C11.7909\x208\x2010\x209.79086\x2010\x2012C10\x2014.2091\x2011.7909\x2016\x2014\x2016Z\x27/>','6295416AAcCyT','onload','getItem','28xijTGJ','add','2333815xqfuzV','WIKIFORTECH\x20|\x20YouTube','made-by','change','addEventListener','off','getAttribute','421098MUvyAx','Credit\x20removed\x20or\x20modified!\x20Please\x20restore\x20the\x20original\x20credit\x20to\x20use\x20this\x20functionality.','checked','setItem','getElementById'];I=function(){return k;};return I();}var b=L;(function(J,P){var g=L,w=J();while(!![]){try{var h=-parseInt(g(0xae))/0x1+-parseInt(g(0x91))/0x2*(-parseInt(g(0x92))/0x3)+parseInt(g(0x9d))/0x4+parseInt(g(0xa7))/0x5+-parseInt(g(0x95))/0x6*(parseInt(g(0xa5))/0x7)+-parseInt(g(0xa2))/0x8*(-parseInt(g(0x97))/0x9)+-parseInt(g(0x93))/0xa;if(h===P)break;else w['push'](w['shift']());}catch(Q){w['push'](w['shift']());}}}(I,0x7e49c));function L(J,P){var w=I();return L=function(h,Q){h=h-0x90;var g=w[h];return g;},L(J,P);}function updateIcon(J){var R=L,P=document[R(0x90)](R(0x96));J?P[R(0x9e)]=R(0xa1):P['innerHTML']=R(0xa0);}document['getElementById'](b(0x9c))[b(0xab)](b(0xaa),function(){var K=b;const J=document['querySelector'](K(0x94));if(J&&J['getAttribute']('made-by')===K(0xa8)){var P=document[K(0x99)];this['checked']?(P[K(0x98)][K(0x9f)](K(0x9a)),updateIcon(!![]),localStorage[K(0xb1)](K(0x9b),'on')):(P[K(0x98)][K(0xa6)](K(0x9a)),updateIcon(![]),localStorage['setItem'](K(0x9b),K(0xac)));}else alert(K(0xaf));}),window[b(0xa3)]=function(){var X=b,J=localStorage[X(0xa4)](X(0x9b)),P=document[X(0x90)](X(0x9c));const w=document['querySelector'](X(0x94));w&&w[X(0xad)](X(0xa9))===X(0xa8)?J==='on'?(P[X(0xb0)]=!![],document[X(0x99)]['classList']['remove'](X(0x9a)),updateIcon(!![])):(P[X(0xb0)]=![],document[X(0x99)][X(0x98)][X(0xa6)](X(0x9a)),updateIcon(![])):alert(X(0xaf));};/*]]>*/</script>الخطوة 7: انقر فوقأيقونة لحفظ التغييرات.
الأسئلة الشائعة
1. ما هي ميزة التبديل بين الشبكة والقائمة في المدونات؟
الميزة الرئيسية هي تحسين تجربة المستخدم عبر تقديم خيارات عرض تناسب احتياجات كل زائر.
2. هل يؤثر التبديل بين التخطيطات على سرعة المدونة؟
نعم، يمكن أن يؤثر. لذا يُنصح باستخدام التحميل البطيء وتقليل حجم الصور لتحسين الأداء.
3. كيف يمكنني جعل التبديل يعمل تلقائيًا وفق الجهاز المستخدم؟
يمكن ذلك عبر تضمين كود JavaScript يتحقق من حجم الشاشة ويُعين التخطيط الأنسب.
4. هل يؤثر اختيار التخطيط على ترتيب المدونة في نتائج البحث؟
لا يؤثر التخطيط بشكل مباشر، لكن تحسين تجربة المستخدم يزيد من بقاء الزوار ويعزز ترتيب الموقع.
5. هل يمكنني تخصيص أزرار التبديل لتناسب تصميم المدونة؟
بالطبع! يمكنك استخدام CSS لتغيير ألوان الأزرار وحجمها لتتناسب مع هوية مدونتك البصرية.
خاتمة
إضافة تبديل شبكة المنشورات في قالب Plus UI ليس مجرد تعديل تقني، بل هو استثمار في تحسين تجربة المستخدم. باستخدام هذه الميزة، ستتمكن من تلبية أذواق قرائك المتنوعة وجعلهم يشعرون بأن مدونتك ديناميكية ومريحة. جرب هذه الخطوات اليوم، ولاحظ كيف يمكن لهذا التعديل الصغير أن يصنع فرقاً كبيراً في أداء مدونتك!.
