الصفحة الرئيسية
اضافات بلوجر

كيفية إضافة تبديل شبكة المنشورات في قالب Plus UI بسهولة

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

قالب 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>

    تحذير! لا تقم بإزالة الرصيد من الكود، لأنه لن يظهر على موقع الويب الخاص بك.

  5. إضافة CSS للتخطيطات اضغط على Ctrl + F مرة أخرى وابحث عن ]]></b:skin> العلامة.

  6. قم بلصق الكود التالي أعلى

     ]]></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. ما عليك سوى اتباع التعليمات الموضحة أدناه.

  7. تنفيذ 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>

  8. انقر فوقأيقونة لحفظ التغييرات.

الخاتمة

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

الاسالة شائعة

1. ما هي ميزة التبديل بين الشبكة والقائمة في المدونات؟

الميزة الرئيسية هي تحسين تجربة المستخدم عبر تقديم خيارات عرض تناسب احتياجات كل زائر.

2. هل يؤثر التبديل بين التخطيطات على سرعة المدونة؟

نعم، يمكن أن يؤثر. لذا يُنصح باستخدام التحميل البطيء وتقليل حجم الصور لتحسين الأداء.

3. كيف يمكنني جعل التبديل يعمل تلقائيًا وفق الجهاز المستخدم؟

يمكن ذلك عبر تضمين كود JavaScript يتحقق من حجم الشاشة ويُعين التخطيط الأنسب.

4. هل يؤثر اختيار التخطيط على ترتيب المدونة في نتائج البحث؟

لا يؤثر التخطيط بشكل مباشر، لكن تحسين تجربة المستخدم يزيد من بقاء الزوار ويعزز ترتيب الموقع.

5. هل يمكنني تخصيص أزرار التبديل لتناسب تصميم المدونة؟

بالطبع! يمكنك استخدام CSS لتغيير ألوان الأزرار وحجمها لتتناسب مع هوية مدونتك البصرية.

جرب هذه الخطوات اليوم، ولاحظ كيف يمكن لهذا التعديل الصغير أن يصنع فرقاً كبيراً في أداء مدونتك!
وفي النهاية!

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

تنويه!

المحتوى محمي بموجب قانون DMCA. يمنع نسخ أو إعادة نشر المحتوى دون إذن مسبق.
جميع الحقوق محفوظة © أصل للمعلوميات.

إرسال تعليق