Plus UI v3.0: أكواد وإضافات بلوجر لتخصيص احترافي وزيادة سرعة الموقع

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

Plus UI v3.0، أكواد بلوجر، إضافات بلوجر، تخصيص احترافي، تحسين السرعة

ميزات قالب Plus UI

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

ملاحظة حول وضع HTML

العديد من هذه الميزات تعمل فقط في وضع HTML، ولا تعمل عند التبديل إلى وضع "الكتابة العادي".
في صفحة تحرير المقال، ابحث عن أيقونة ⋯ (النقاط الثلاث) في الزاوية اليمنى السفلية من العنوان.
اضغط عليها لتظهر لك خيارين: عرض HTML وعرض الكتابة.
اختر عرض HTML لرؤية الكود المصدري للمقال.
الصق الكود الذي تريده في المكان المناسب من المقال.
يمكنك الآن تعديل الكود حسب احتياجاتك.

نصيحة! احفظ نسخة احتياطية من مقالك قبل التعديل على كود HTML لتجنب أي أخطاء غير متوقعة.

تنسيق الفقرات في قالب Plus UI

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

أنواع الفقرات

1. الفقرات العادية

استخدم العلامة <p> لإضافة فقرات أساسية إلى مقالتك:

<p>هذه فقرة عادية</p>

2. فقرات بمسافة بادئة

تتيح لك هذه الميزة إضافة مسافة بادئة للسطر الأول من الفقرة:

<p class='pIndent'>هذه فقرة بمسافة بادئة للسطر الأول</p>

3. فقرات بحرف كبير منسدل

حإضافة حرف زخرفي كبير في بداية الفقرة: حرف كبير منسدل في بداية الفقرة

<p><span class='dropCap'>ح</span>رف كبير منسدل في بداية الفقرة</p>

ملاحظة! الحرف المنسدل يعمل بشكل أفضل مع الفقرات الطويلة.

4. فقرات المراجع والمصادر

المصدر:
www.example.com

<p class='pRef'>المصدر:<br> www.example.com</p>

كيفية استخدام الفقرات

حدد نوع الفقرة المناسب لمحتواك.
انسخ الكود المطلوب.
الصقه في محرر HTML.
استبدل النص المثال بالنص الخاص بك.

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

تخصيص وعرض الصور في قالب Plus UI

يقدم قالب Plus UI عدة طرق متقدمة لعرض الصور، مما يتيح لك إنشاء معارض صور احترافية وتفاعلية. فيما يلي أهم الخيارات المتاحة:

أنواع عرض الصور

1. الصور القياسية

<!--[ Standard image ]-->
<img class='full' alt='وصف_الصورة' width='1280' height='720' src='رابط_الصورة'/>

ملاحظة! إضافة class='full' تزيل الهوامش الأفقية وتجعل الصورة متجاوبة مع جميع أحجام الشاشات.

2. الصور مع التعليقات التوضيحية

طريقتان لعرض الصور مع تعليقات:

الطريقة الأولى (مدعومة من بلوجر):

انقر على هذه الصورة

<!--[ Image with Caption ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='وصف_الصورة' src='رابط_الصورة'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>تعليق_الصورة_هنا</td>
    </tr>
  </tbody>
</table>

الطريقة الثانية (HTML5):

<!--[ Image with Caption ]-->
<figure>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <figcaption>تعليق_الصورة_هنا</figcaption>
</figure>

<!--[ Image with Caption ]-->
<figure>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <figcaption>التسمية التوضيحية هنا</figcaption>
</figure>

تحذير! لإلغاء تأثير Lightbox لصورة معينة، أضف السمة data-lightbox='false'

4. معرض الصور الشبكي

<!--[ Images with Grid Layout ]-->
<div class='psImg grImg'>
  <img alt='وصف_الصورة' src='رابط الصورة'/>
  <img alt='وصف_الصورة' src='رابط الصورة'/>
  <img alt='وصف_الصورة' src='رابط الصورة'/>
  <img alt='وصف_الصورة' src='رابط الصورة'/>
</div>

5. الصور مع زر "إظهار الكل"

إظهار الكل

<!--[ Images with Show All Function ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>

<div class='psImg hdImg'>
  <img alt='وصف_الصورة' src='رابط الصورة'/>
  <img alt='وصف_الصورة' src='رابط الصورة'/>
  <img alt='وصف_الصورة' src='رابط الصورة'/>
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='وصف_الصورة' src='رابط الصورة'/>
    <!--[ Button to activate ]-->
    <label for='hideImg1' aria-label='Show all images'>إظهار الكل</label>
  </div>
  <!--[ Hide the rest of images here ]-->
  <div class='psImg shImg'>
    <img alt='وصف_الصورة' src='رابط الصورة'/>
    <img alt='وصف_الصورة' src='رابط الصورة'/>
    <img alt='وصف_الصورة' src='رابط الصورة'/>
    <img alt='وصف_الصورة' src='رابط الصورة'/>
  </div>
</div>

6. الصور مع تخطيط التمرير

<!--[ Images with Scroll Layout (Style 1) ]-->
<div class='glImg'>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
  <img alt='وصف_الصورة' src='رابط_الصورة'/>
</div>

7. التحميل البطيء للصور

تحسين سرعة الصفحة بتأجيل تحميل الصور:

<!--[ Lazyload Image ]-->
<img class='lazyload' alt='وصف_الصورة' data-src='رابط_الصورة' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

نصيحة! لا تستخدم التحميل البطيء للصورة الأولى في المقالة لتحسين تجربة المستخدم.

كيفية استخدام أنواع الصور

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

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

أشكال الروابط والأزرار في قالب Plus UI

يقدم قالب Plus UI مجموعة متنوعة من أنماط الروابط والأزرار التي تساعدك في تحسين تجربة المستخدم وتوجيه الزوار. فيما يلي الخيارات المتاحة:

1. الروابط الخارجية

تمييز الروابط التي تؤدي لمواقع خارجية لإعلام المستخدمين:

رابط خارجي عادي: زيارة الموقع

<a class='extL' href='رابط_الموقع' rel='nofollow noreferrer noopener' target='_blank'>عنوان_الرابط</a>

الأنماط البديلة:

رابط خارجي بديل: زيارة الموقع

<a class='extL alt' href='رابط_الموقع' rel='nofollow noreferrer noopener' target='_blank'>عنوان_الرابط</a>

رابط خارجي ثانوي: زيارة الموقع

<a class='extL sec' href='رابط_الموقع' rel='nofollow noreferrer noopener' target='_blank'>عنوان_الرابط</a>

ملاحظة!

جميع الروابط الخارجية تفتح في نافذة جديدة وتحوي خاصية nofollow لأغراض SEO.

2. الأزرار التفاعلية

تصميمات مختلفة للأزرار حسب الغرض منها:

زر أساسي: زر عادي

<!--[ Button ]-->
<a class='button' href='الرابط_هنا'>عنوان_الرابط</a>

زر مخطط: زر مخطط

<!--[ Button outlined ]-->
<a class='button ln' href='الرابط_هنا'>عنوان_الرابط</a>

زر تحميل: تحميل الملف

<!--[ Button with download icon ]-->
<a class='button' href='الرابط_هنا'><i class='icon dl'></i>تحميل_الملف</a>

زر معاينة: عرض تجريبي

<!--[ Button with demo icon ]-->
<a class='button' href='الرابط_هنا'><i class='icon demo'></i>عرض_تجريبي</a>

3. مربعات التحميل

لعرض ملفات للتحميل بطريقة منظمة:

ملف_ضغط.zip 2.5MB

دليل_الاستخدام.pdf 1.8MB

<div class='dlBox'>
  <span class='fT' data-text='نوع_الملف'></span>
  <div class='fN'>
    <span>اسم_الملف.zip</span>
    <span class='fS'>حجم_الملف</span>
  </div>
  <a class='button' href='رابط_التحميل'><i class='icon dl'></i></a>
</div>

نصيحة! يمكنك تغيير نوع الملف الظاهر بتعديل قيمة data-text (يدعم: zip, pdf, doc, xls, ppt, img, vid, audio)

كيفية استخدام الروابط والأزرار

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

هذه العناصر التفاعلية تساعد في تحسين واجهة المستخدم وتوجيه الزوار لإجراءات محددة بفعالية أكبر.

أشكال الاقتباسات والتنبيهات في قالب Plus UI

يقدم القالب أنماطاً متعددة لعرض الاقتباسات والتنبيهات بشكل جذاب وواضح:

1. أنماط الاقتباسات

الاقتباس الأساسي:

نص الاقتباس هنا
المصدر

<blockquote>
  <p>نص الاقتباس هنا</p>
  <span>المصدر</span>
</blockquote>

الاقتباس بالنمط الأول (s1):

نص الاقتباس هنا
المصدر

<blockquote class='s1'>
  <p>نص الاقتباس هنا</p>
  <span>المصدر</span>
</blockquote>

الاقتباس بالنمط الثاني (s2):

نص الاقتباس هنا
المصدر

<blockquote class='s2'>
  <p>نص الاقتباس هنا</p>
  <span>المصدر</span>
</blockquote>

2. أنماط التنبيهات والملاحظات

ملاحظة عادية:

عنوان الملاحظة
هذا تنبيه عادي للملاحظات العامة والمعلومات الإضافية.

<p class='note'><b>ملاحظة!</b><br/> هذا تنبيه عادي للملاحظات العامة والمعلومات الإضافية. </p>

تحذير:

عنوان التحذير
هذا تنبيه مهم يحتوي على تحذير أو تنبيه هام.

<p class='note wr'><b>تحذير!</b><br/> هذا تنبيه مهم يحتوي على تحذير أو تنبيه هام. </p>

تنبيهات متقدمة:

افتراضيتنبيه عادي بدون تصنيف محدد.

<div class='alert'><b>افتراضي</b>تنبيه عادي بدون تصنيف محدد.</div>

معلومات!تنبيه خاص بالمعلومات العامة.

<div class='alert info'><b>معلومات!</b>تنبيه خاص بالمعلومات العامة.</div>

تحذير!تنبيه تحذيري هام.

<div class='alert warning'><b>تحذير!</b>تنبيه تحذيري هام.</div>

نجاح!تنبيه لإظهار نجاح عملية ما.

<div class='alert success'><b>نجاح!</b>تنبيه لإظهار نجاح عملية ما.</div>

خطأ!تنبيه لإظهار وجود خطأ ما.

<div class='alert error'><b>خطأ!</b>تنبيه لإظهار وجود خطأ ما.</div>

تنبيهات مخططة:

معلومات!تنبيه معلومات بإطار خارجي.

<div class='alert info outline'><b>معلومات!</b>تنبيه معلومات بإطار خارجي.</div>

تحذير!تنبيه تحذيري بإطار خارجي.

<div class='alert warning outline'><b>تحذير!</b>تنبيه تحذيري بإطار خارجي.</div>

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

كيفية استخدام الاقتباسات والتنبيهات

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

هذه العناصر تساعد في تنظيم المحتوى وجذب انتباه القارئ لأجزاء معينة من النص، مما يحسن تجربة القراءة والفهم.

أشكال الجداول والأكواد والعناصر التفاعلية في قالب Plus UI

1. الجداول المتقدمة

اسم	موضع	مكتب	عمر	تاريخ البدء	مرتب
تايجر نيكسون	مهندس النظام	إدنبرة	61	2011/04/25	$320,800
غاريت وينترز	محاسب	طوكيو	63	2011/07/25	$170,750
أشتون كوكس	مؤلف تقني مبتدئ	سان فرانسيسكو	66	2009/01/12	$86,000

<!--[ Table ]-->
<div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>اسم</th>
        <th>موضع</th>
        <th>مكتب</th>
        <th>عمر</th>
        <th>تاريخ البدء</th>
        <th>مرتب</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>تايجر نيكسون</td>
        <td>مهندس النظام</td>
        <td>إدنبرة</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>غاريت وينترز</td>
        <td>محاسب</td>
        <td>طوكيو</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>أشتون كوكس</td>
        <td>مؤلف تقني مبتدئ</td>
        <td>سان فرانسيسكو</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>

خصائص الجداول:

sticky: تثبيت رأس الجدول عند التمرير
bordered: إضافة حدود للجدول
stripped: تلوين متناوع للصفوف
hovered: تأثير عند تمرير المؤشر على الصفوف
primary/warning/success/error: ألوان مختلفة لرأس الجدول

2. عرض الأكواد البرمجية

<pre><code>
// أكوادك هنا
function example() {
  return "Hello World!";
}
</code></pre>

مثال لعرض الكود البرمجية متعددة علامات التبويب

[HTML] escaped_code_here

[CSS] escaped_code_here

[JS] escaped_code_here

[JSON] escaped_code_here

<!--[ Multi-tabs Code Block Highlighter ]-->
<div class='pre tabs'>
  <!--[ Active function ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
  <input id='preT1-4' type='radio' name='preTab1'/>
  <!--[ Header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT1-1' data-text='HTML'></label>
    <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
    <label for='preT1-4' data-text='JSON'></label>
  </div>
  <!--[ Content ]-->
  <pre class='preC1-1' data-source='src/index.html'><code>[HTML] escaped_code_here</code></pre>
  <pre class='preC1-2' data-source='src/style.css'><code>[CSS] escaped_code_here</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>[JS] escaped_code_here</code></pre>
  <pre class='preC1-4' data-source='src/rules.json'><code>[JSON] escaped_code_here</code></pre>
</div>

3. العناصر التفاعلية

أزرار التبديل:

<!-- زر التبديل -->
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

أشرطة التقدم:

50%

<!-- شريط التقدم -->
<div class="progress-bar">
  <div class="progress" style="width: 50%">50%</div>
</div>

نصيحة! يمكنك تخصيص مظهر الجداول عن طريق مزج الفئات المختلفة مثل table stripped primary للحصول على جدول مخطط بألوان أساسية.

كيفية استخدام الجداول والعناصر

حدد نوع العنصر الذي تريد إضافته (جدول/كود/عنصر تفاعلي).
انسخ الكود المناسب من الأمثلة.
استبدل البيانات النموذجية ببياناتك.
أضف الفئات الإضافية حسب الحاجة.
اختبر العنصر بعد إضافته.

هذه العناصر تساعد في عرض البيانات المعقدة والمحتوى التقني بطريقة منظمة وجذابة، مما يحسن تجربة المستخدم.

عرض الخطوات والأكواد البرمجية في قالب Plus UI

1. عرض الخطوات المرقمة

مثال عملي لخطوات إعداد القالب:

قم بتحميل ملف القالب من المتجر
انقر على "تثبيت القالب" في لوحة التحكم
انتظر حتى اكتمال عملية التثبيت
ابدأ بتخصيص القالب حسب احتياجاتك

<ol class='steps'>
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
  <li>الخطوة الثالثة</li>
</ol>

ملاحظة! يستخدم هذا النمط لتوضيح الإجراءات المتسلسلة التي يجب تنفيذها بالترتيب.

2. عرض الأكواد البرمجية

يتم استخدامه لتحديد أسطر التعليمات البرمجية للكمبيوتر (HTML، CSS، Javascript، وما إلى ذلك) في المنشورات.

مثال لعرض كود مضمن:

codeيمكن استخدام العلامة لتحديد الكود المضمن مثل هذا: escaped_code_here.

<code>escaped_code_here</code>

مثال لأوامر لوحة المفاتيح:

kbdيمكن استخدام العلامة لتحديد إدخال لوحة المفاتيح مثل هذا:⌘ + A

<kbd>⌘ + A</kbd>

3. تنسيق الأكواد المميزة

العلامة، يمكن وضع علامة على جزء ما عن طريق لفه بالعلامة<code><mark> .

// mark examples
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");

// mark codes
console.log("<mark>Hello World!</mark>");
console.log("<mark class='block'>Hello World!</mark>");
console.log("<mark class='gray'>Hello World!</mark>");
console.log("<mark class='red'>Hello World!</mark>");
console.log("<mark class='orange'>Hello World!</mark>");
console.log("<mark class='blue'>Hello World!</mark>");
console.log("<mark class='green block'>Hello World!</mark>");
console.log("<mark class='gold'>Hello World!</mark>");
console.log("<mark class='purple'>Hello World!</mark>");
console.log("<mark data-before='Message before'>Hello World!</mark>");
console.log("<mark class='block red' data-after='Message after'>Hello World!</mark>");
console.log("<mark class='green' data-before='$'>Hello World!</mark>");
console.log("<mark data-after='$'>Hello World!</mark>");

نصيحة! عند عرض الأكواد الطويلة، استخدم خاصية data-source لتحديد مصدر الملف مثل: data-source='src/js/main.js'

كيفية عرض الأكواد والخطوات

حدد نوع العرض المناسب (خطوات/كود/أكواد متعددة).
انسخ الكود المناسب من الأمثلة.
استبدل المحتوى النموذجي بمحتواك.
استخدم < و > بدلاً من < و > للأكواد.
أضف الفئات الإضافية حسب الحاجة للتنسيق.

هذه الأدوات تساعد في عرض المحتوى التقني والتعليمات البرمجية بطريقة واضحة ومنظمة، مما يسهل على القراء فهمها وتطبيقها.

العناصر القابلة للطي في قالب Plus UI

يقدم القالب عدة عناصر تفاعلية تسمح بإخفاء وإظهار المحتوى حسب رغبة المستخدم:

1. أداة الإخفاء (Spoiler)

مثال عملي:

العنوان الأساسي

المحتوى المخفي هنا

<details class='sp'>
  <summary data-show='النص عند الفتح' data-hide='النص عند الإغلاق'>العنوان الأساسي</summary>
  <div>
    <p>المحتوى المخفي هنا</p>
  </div>
</details>

ملاحظة! تستخدم هذه الأداة لعرض محتوى اختياري أو تجنب المفسدات (Spoilers) في المقالات.

2. عناصر الأكورديون

أكورديون عادي:

كيف أقوم بتثبيت القالب؟

إجابة السؤال هنا

<details class='ac'>
  <summary>كيف أقوم بتثبيت القالب؟</summary>
  <div>
    <p>إجابة السؤال هنا</p>
  </div>
</details>

أكورديون بديل:

هل يدعم القالب اللغة العربية؟

إجابة السؤال هنا

<details class='ac alt'>
  <summary>هل يدعم القالب اللغة العربية؟</summary>
  <div>
    <p>إجابة السؤال هنا</p>
  </div>
</details>

مجموعة أكورديون:

السؤال

إجابة

السؤال

إجابة

السؤال

إجابة

السؤال

إجابة

<!--[ Accordion (Grouped) ]-->
<div class='showH'>
  <details class='ac'>
  <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac'>   <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
  <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
  <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
</div>

نصيحة! استخدم مجموعات الأكورديون لعرض الأسئلة الشائعة (FAQ) حيث يمكن للزوار فتح الأسئلة التي تهمهم فقط.

كيفية استخدام العناصر القابلة للطي

حدد نوع العنصر المناسب (Spoiler للأجزاء المخفية، أكورديون للأسئلة).
انسخ الكود المناسب.
استبدل العناوين والمحتوى بالنص الخاص بك.
للمجموعات، أضف عدة عناصر details داخل div.showH.
استخدم class='alt' لعرض نمط بديل للأكورديون.

هذه العناصر التفاعلية تساعد في تنظيم المحتوى الطويل وتحسين تجربة المستخدم من خلال السماح له بالتحكم في المحتوى الذي يريد رؤيته.

مكونات متقدمة في قالب Plus UI

1. الأسئلة الشائعة المميزة (FAQ Schema)

تحتوي صفحة الأسئلة الشائعة على قائمة أسئلة وأجوبة تتعلق بموضوع معين. قد تكون صفحات الأسئلة الشائعة المُعَلَّمة بشكل صحيح مؤهلة للحصول على نتائج بحث غنية. الإجراء على مساعد Google ، مما قد يساعد موقعك على الوصول إلى المستخدمين المناسبين.

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here

<!--[ Accordion (FAQPage) ]-->
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
</div>

تحذير! لا يُمكن استخدام هذا المُكوّن في أكثر من مكان في المنشور أو الصفحة الواحدة، لذا يُنصح بتجميع جميع الأسئلة الشائعة في مُكوّن واحد.

2. جدول المحتويات

جدول المحتويات

<details class='sp toc' open>
  <summary data-show='إخفاء المحتويات' data-hide='إظهار المحتويات'>جدول المحتويات</summary>
  <div class='aToc'></div>
</details>

مقالات قد تهمك:

عنوان المقال

<div class='pRelate'>
  <b>مقالات قد تهمك:</b>
  <ul>
    <li><a href='رابط_المقال'>عنوان المقال</a></li>
  </ul>
</div>

4. تضمين فيديو يوتيوب

طريقة التحميل المؤجل:

<!--[ Defer YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/video_id' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
</div>

طريقة التحميل الكسول:

<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/كود_الفيديو'></iframe>
</div>

نصيحة! استخدم طرق التحميل المؤجل أو الكسول لتحسين أداء الصفحة وتقليل وقت التحميل.

كيفية استخدام المكونات المتقدمة

حدد المكون الذي تريد إضافته (أسئلة شائعة/جدول محتويات/مقالات ذات صلة/فيديو).
انسخ الكود المناسب.
استبدل البيانات النموذجية بمحتواك.
للفيديوهات، استبدل كود الفيديو (المجموعة الأحرف بعد v= في رابط يوتيوب).
للمقالات ذات الصلة، أضف 3-5 روابط لأهم المقالات المرتبطة بالموضوع.

هذه المكونات المتقدمة تساعد في تحسين تجربة المستخدم وتحسين محركات البحث (SEO) لمدونتك.

أساسيات إدارة المحتوى في قالب Plus UI

1. تعيين مقتطف المنشور المخصص

يعرض مقتطف المنشور بعض أسطر من محتوى المنشور. يختار مصادر النصوص من بداية المنشور. إذا كنت ترغب في محدد مقتطف منشور مخصص، يمكنك إضافة مقتطف الكود التالي في بداية المنشور:

<div hidden aria-hidden='true'>هذا نص المقتطف المخصص الذي سيظهر في صفحة الأرشيف</div>
<!--more-->

هذه الميزة مفيدة عندما:

تريد كتابة ملخص مختصر وجذاب للمقال.
لا تريد استخدام الفقرات الأولى كمقتطف.
تحتاج لتحديد وصف دقيق للمحتوى.

2. تعيين صورة مصغرة مخصصة

يختار Blogger الصورة الأولى من المنشور كصورة مصغرة. إذا كنت ترغب في تعيين صورة مصغرة مخصصة للمنشور، ويجب أن تظهر في المنشور بنفسه، يمكنك إضافة الكود التالي في بداية المنشور:

<!--[ <div class='separator'><img src='https://example.com/my-thumbnail.jpg'/></div> ]-->
<!--more-->

هذا الكود سيقوم بـ:

تعيين صورة مخصصة كصورة مصغرة.
إخفاء الصورة عن محتوى المقال الأساسي.
الاحتفاظ بالصورة فقط للعرض في صفحات الأرشيف.

3. الجمع بين المقتطف والصورة المصغرة

يمكنك تعيين مقتطف منشور مخصص وصورة مصغرة للمنشور من خلال الجمع بين مقتطفي التعليمات البرمجية أعلاه كما هو موضح أدناه:

<div hidden aria-hidden='true'>وصف مختصر للمقال</div>
<!--[ <div class='separator'><img src='رابط_الصورة_المصغرة'/></div> ]-->
<!--more-->

هام! يجب وضع هذه الأكواد في بداية المقال قبل علامة 

4. إضافة عنوان فرعي للرئيسي

يحمل عنوانًا فرعيًا بجوار عنوان الرأس في منشور أو صفحة خاصة.

<style>
  .headH::after {
    content: 'الدليل الشامل';
    font-size: 0.6em;
    color: #777;
    margin-right: 10px;
  }
</style>

النتيجة المتوقعة:

عنوان المقال الرئيسي الدليل الشامل

نصيحة! يمكنك تخصيص العنوان الفرعي باستخدام CSS إضافي مثل تغيير اللون، الحجم، أو إضافة أي تأثيرات تصميمية أخرى.

كيفية استخدام أدوات إدارة المحتوى

حدد العنصر الذي تريد إضافته (مقتفح/صورة مصغرة/عنوان فرعي).
انسخ الكود المناسب
استبدل النصوص والروابط بمحتواك.
للعناوين الفرعية، يمكنك تعديل خصائص CSS حسب احتياجاتك.
احفظ التغييرات واختبر النتيجة.

هذه الأدوات الأساسية تساعدك في التحكم الدقيق بكيفية عرض محتواك في الصفحات المختلفة لمدونتك.

الخاتمة

في الختام، يُعتبر قالب Plus UI 2025 خيارًا مثاليًا لكل من يسعى لتطوير مدونة بلوجر احترافية، سواء كنت مبتدئًا أو محترفًا. من خلال التخصيص السهل والأداء العالي والدعم الكبير لتحسين محركات البحث، يمكنك بناء مدونة تواكب العصر وتلبي تطلعاتك. لا تتردد في تجربة القالب وتطبيق الأكواد المذكورة لتجعل مدونتك فريدة وجذابة.

المصدر:
www.sharahtech.com

وفي النهاية!

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

تنويه!

Plus UI v3.0: أكواد وإضافات بلوجر لتخصيص احترافي وزيادة سرعة الموقع

ميزات قالب Plus UI

ملاحظة حول وضع HTML

تنسيق الفقرات في قالب Plus UI

أنواع الفقرات

1. الفقرات العادية

2. فقرات بمسافة بادئة

3. فقرات بحرف كبير منسدل

4. فقرات المراجع والمصادر

كيفية استخدام الفقرات

تخصيص وعرض الصور في قالب Plus UI

أنواع عرض الصور

1. الصور القياسية

2. الصور مع التعليقات التوضيحية

3. الصور مع تأثير Lightbox

4. معرض الصور الشبكي

5. الصور مع زر "إظهار الكل"

6. الصور مع تخطيط التمرير

7. التحميل البطيء للصور

كيفية استخدام أنواع الصور

أشكال الروابط والأزرار في قالب Plus UI

1. الروابط الخارجية

2. الأزرار التفاعلية

3. مربعات التحميل

كيفية استخدام الروابط والأزرار

أشكال الاقتباسات والتنبيهات في قالب Plus UI

1. أنماط الاقتباسات

2. أنماط التنبيهات والملاحظات

كيفية استخدام الاقتباسات والتنبيهات

أشكال الجداول والأكواد والعناصر التفاعلية في قالب Plus UI

1. الجداول المتقدمة

2. عرض الأكواد البرمجية

3. العناصر التفاعلية

كيفية استخدام الجداول والعناصر

عرض الخطوات والأكواد البرمجية في قالب Plus UI

1. عرض الخطوات المرقمة

2. عرض الأكواد البرمجية

3. تنسيق الأكواد المميزة

كيفية عرض الأكواد والخطوات

العناصر القابلة للطي في قالب Plus UI

1. أداة الإخفاء (Spoiler)

2. عناصر الأكورديون

كيفية استخدام العناصر القابلة للطي

مكونات متقدمة في قالب Plus UI

1. الأسئلة الشائعة المميزة (FAQ Schema)

2. جدول المحتويات

3. منشورات ذات صلة

4. تضمين فيديو يوتيوب

كيفية استخدام المكونات المتقدمة

أساسيات إدارة المحتوى في قالب Plus UI

1. تعيين مقتطف المنشور المخصص

2. تعيين صورة مصغرة مخصصة

3. الجمع بين المقتطف والصورة المصغرة

4. إضافة عنوان فرعي للرئيسي

كيفية استخدام أدوات إدارة المحتوى

الخاتمة

إرسال تعليق