تنسيقات النصوص والأكواد البرمجية

شكراً لك على شرائك! يسعدنا جداً اختيارك لقالب بلوجر الخاص بنا، ونأمل أن يرتقي بمدونتك إلى آفاق جديدة.

لا يمكن استخدام معظم هذه الميزات إلا في وضع 'عرض HTML'، كما لا يمكنك التبديل إلى وضع 'عرض الإنشاء' أثناء استخدام بعض هذه الميزات.

في واجهة محرر المشاركات، انقر على أيقونة في أسفل يمين العنوان
سيظهر لك خياران: عرض HTML وعرض الإنشاء
اختر 'عرض HTML'.

نصيحة: استخدم الوسم فقرتك_هنا لإضافة فقرات إلى المقال.

صيغة الكتابة لـ : قالب Plus UI الإصدار v2.6.1
تم تحديث القالب في : 1 يونيو 2022

صورة مع تسمية توضيحية وميزة التكبير التلقائي (Auto Lightbox)

لن تتم قراءة التسمية التوضيحية في هذه الصورة ضمن وصف المقال أو المقتطف. يمكنك أيضاً اختيار إبقاء التسميات التوضيحية مقروءة في مقتطفات المقالات.

ستحتوي جميع الصور في المقال تلقائياً على وظيفة التكبير (Lightbox)، انقر فوق هذه الصورة لتجربتها.

إضافة الفئة class='full' تعمل على إزالة الهامش بين الصورة والشاشة، وتعمل فقط في عرض الهاتف المحمول.

صيغة الكتابة:

      <table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

صور بتخطيط شبكي (Grid Layout)

صيغة الكتابة:

<!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
</div>

صور مع ميزة «عرض الكل» (Show All Function)

تُستخدم لإخفاء بعض الصور وإظهارها عندما ينقر المستخدم على زر 'عرض الكل'. يمكن تفعيل وظيفة عرض الكل مرة واحدة فقط، ولا يمكن إخفاء الصور مرة أخرى بعد تفعيلها.

عرض الكل

صيغة الكتابة:

<!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  </div>
</div>

صور بتخطيط التمرير الجانبي (Scroll Layout)

يشبه تخطيط الصور أعلاه، إلا أنه في شاشات الهاتف المحمول سيتم ترتيب الصور بشكل متوازٍ مع وظيفة تمرير جانبي إضافية.

لقد أضفنا أيضاً تأثير تمرير سلس (Smooth scroll) إلى هذه الميزة. يرجى تجربة فتح هذه الصفحة على جهازك المحمول:

صيغة الكتابة:

<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</div>

التحميل الكسول للصور (Lazyload Image)

ميزة مفيدة لتأجيل تحميل الصور بحيث تكون نتيجة سرعة الصفحة (PageSpeed) للمدونة أعلى؛ حيث لن يتم تحميل الصورة إلا عندما يقوم المستخدم بالتمرير إلى منطقة الصورة. جميع الصور في هذا المقال تستخدم ميزة Lazyload.

صيغة الكتابة:

<div>
  <img class='lazy' alt='image_title_here' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

فاصل المقال (Post Break)

يمكنك استخدام هذه الميزة للفصل بين الفقرات أو لبدء فصل جديد في المقال، وإليك مثالاً على شكلها:

صيغة الكتابة:

<!--[ To break paragraphs apart ]-->
<hr>

فقرة مع مسافة بادئة للنص (Text Indent)

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

صيغة الكتابة:

<p class='pIndent'>Your_paragraph_is_here.</p>

فقرة بحرف استهلالي كبير (Drop Cap)

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

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

صيغة الكتابة:

<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

الاقتباسات (Blockquote)

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

— غير معروف

صيغة الكتابة:

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</blockquote>

نمط آخر:

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

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

يساعد هذا التنسيق على إبراز الملاحظات والفقرات المهمة للقارئ بشكل أنيق.

صيغة الكتابة:

<blockquote class='s-1'>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
    <ul>
      <li>Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.</li>
      <li>Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</li>
    </ul>
  </div>
</blockquote>

اقتباس مع أزرار المشاركة الاجتماعية (Social Blockquote)

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

صيغة الكتابة:

<blockquote class='pu_blq' data-author='Anonymous'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.</blockquote>

مربع الملاحظات والتنبيهات (Note Block)

تُستخدم هذه الميزة لإضافة معلومات مهمة أو جمل تحذيرية أو إبراز جمل معينة، وهناك نمطان يمكنك تجربتهما:

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

<p class='note'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>

بألوان مختلفة:

تحذير!هذا النص هو مثال لنص تحذيري يمكن أن يستبدل في نفس المساحة، ويُستخدم لتنبيه القارئ إلى ملاحظات هامة.

<p class='note wr'>Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>

الجداول (Table)

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

يرجى فتح هذا المقال على جهازك المحمول ومعاينة قسم الجدول أدناه:

الاسم	المنصب	المكتب	العمر	تاريخ البدء	الراتب
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700

صيغة الكتابة:

<div class='table'>
  <table style='white-space:nowrap; min-width:100%;'>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>
</div>

تحدد الخاصية white-space:nowrap; أن يكون النص في سطر واحد، بحيث لا يلتف إلى السطر التالي ويستمر حتى يصادف وسم  .
تحدد الخاصية min-width:100%; الحد الأدنى لعرض الجدول، ويمكنك تغييرها إلى وحدات px مثل 500px، أو تغييرها إلى 0 إذا كنت تريد تحديد عرض الجدول تلقائياً.

جدول المحتويات اليدوي (Manual Table of Content)

المحتويات

صورة مع تسمية توضيحية
مقالات ذات صلة يدوية
فاصل المقال
الاقتباسات

مع عناوين فرعية:

عنوان_رئيسي

يُعد استخدام جدول المحتويات اليدوي أكثر تعقيداً من النسخة التلقائية، حيث يتعين عليك إضافة سمة معرّف (ID) مختلف في كل وسم عنوان وكتابته في قائمة المحتويات.

هذا مثال لوسم عنوان مع معرّف مخصص (Custom ID):

<h2>Your_Heading</h2>
    
<h3>Sub_Heading_1</h3>

<h2 id='heading'>Your_Heading</h2>
    
<h3 id='subHeading'>Sub_Heading_1</h3>

صيغة الكتابة:

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#heading'>Your_Heading</a></li>
      ...
      ...
      ...
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href='#heading'>Your_Heading</a>
        <ol>
          <li><a href='#subHeading'>Sub_Heading_1</a></li>
          ...
          ...
          ...
        </ol>
      </li>
    </ol>
  </div>
</details>

قم بإزالة السمة open='' لإغلاق جدول المحتويات تلقائياً عند تحميل الصفحة لأول مرة.
يمكنك تغيير العنوان أو عبارة 'Show all/Hide all' (عرض الكل/إخفاء الكل) في القسم المحدد.

جدول المحتويات شبه التلقائي (Semi Automatic Table of Content)

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

صورة مع تسمية توضيحية وميزة التكبير التلقائي
صور بتخطيط شبكي
صور مع ميزة عرض الكل
صور بتخطيط التمرير الجانبي
التحميل الكسول للصور
مقالات ذات صلة يدوية
مقالات ذات صلة تلقائية
فاصل المقال
فقرة مع مسافة بادئة للنص
فقرة بحرف استهلالي كبير
الاقتباسات
مربع الملاحظات والتنبيهات
الجداول
جدول المحتويات اليدوي
جدول المحتويات شبه التلقائي
تلوين الأكواد البرمجية
1. تلوين الأكواد البرمجية التلقائي
صندوق الأكواد متعدد الوظائف
صندوق الأكواد متعدد التبويبات
زر الإظهار / الإخفاء
المحتوى القابل للطي أو الأكورديون
1. مخطط الأسئلة الشائعة بصيغة Microdata
الروابط الخارجية
أزرار الروابط
رابط التحميل
صندوق التحميل مع عداد تنازلي
مشغل الموسيقى
التحميل الكسول لفيديوهات يوتيوب
مراجع المقال
العنوان الفرعي للترويسة
المقال السابق أو التالي

الخيار الأسهل لعرض جدول المحتويات. ستعرض هذه الميزة جميع وسوم العناوين في مقالك (ثلاثة مستويات من h2 إلى h4)، لذا تأكد من كتابة وسوم العناوين بالترتيب. اقرأ: الأخطاء الشائعة

الكود الخاص بتحديد موقع أداة جدول المحتويات شبه التلقائي:

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>

تلوين الأكواد البرمجية (Syntax Highlighter)

تُستخدم لتعريف أسطر الأكواد البرمجية (HTML, CSS, Javascript، إلخ) في المقالات.

<!--[ Change data-text to .html, .css, .js or any language ]-->
<div class='pre pu notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

يمكن كتابة أكواد تلوين النصوص البرمجية يدوياً، ولكننا نوفر أيضاً ميزات تلوين الأكواد تلقائياً.

غيّر data-text='.html' لتحديد صيغة كود أخرى، مثل data-text='.css'، data-text='.js'، data-text='.php'، إلخ.
القيمة white-space:pre-wrap; مفيدة لتعطيل التمرير الجانبي؛ حيث سيتم الحفاظ على الكود الطويل مع إتاحة تمرير بسيط لإبقائه مقروءاً.
تحدد الخاصية max-height:none; عدم تعيين حد أقصى لارتفاع صندوق الكود (تلقائي)، غيّر القيمة none إلى 400px مثلاً لتحديد أقصى ارتفاع بـ 400 بكسل فقط.
استخدم code_here لإضافة اللون الأحمر/البرتقالي.
استخدم code_here لإضافة اللون الأزرق.
استخدم code_here لإضافة اللون الأخضر.
استخدم code_here لإضافة اللون الرمادي.
استخدم code_here لإضافة تظليل باللون الأزرق.

تلوين الأكواد البرمجية التلقائي (Automatic Colored Syntax Highlighter)

يتم تمييز وتلوين الكود التالي تلقائياً باستخدام مكتبة Highlight.js

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

كود تلوين الصيغ البرمجية:

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

أخطاء شائعة:

تكتشف هذه الميزة لغة الكود وتقوم بتلوينها تلقائياً. ولكن في بعض الحالات، قد لا تتعرف تلقائياً على لغة الكود؛ وعندها يتعين عليك إضافة اسم فئة (Classname) حسب اللغة، فمثلاً إذا كانت اللغة html، يجب إضافة html أو language-html إلى جانب hl.

مثال:

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl language-javascript notranslate' data-text='.js'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

قيود استخدام تلوين الأكواد البرمجية التلقائي:

لا يمكنك إضافة أي وسم HTML داخل الأكواد المنسقة مسبقاً (Preformatted Codes). على سبيل المثال، إذا أضفت  فلن يتم تظليله باللون الأزرق.

صندوق الأكواد متعدد الوظائف (Multi Functional Syntax Highlighter)

Your_code_is_here

صيغة الكتابة:

<!--[ Replace data-text with any name to show, data-file with filename, data-lang with file extension, data-time with countdown in seconds ]-->
<div class='pre pu notranslate' data-time='5' data-text='Codebox Writing Format' data-file='Typography Codebox' data-lang='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

صندوق الأكواد متعدد التبويبات (MultiTabs Syntax Highlighter)

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://plus-ui.fineshopdesign.com/",
  "name": "Plus UI",
  "alternateName": "Plus UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://plus-ui.fineshopdesign.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

كود الكتابة:

<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='JS'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-2'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-3'>
    <pre>Your_code_is_here</pre>
  </div>
</div>

تحدد السمة checked التبويب الأول الذي يظهر بشكل افتراضي.
تأكد من أن السمتين id='...' وfor='...' تحملان نفس القيمة. يجب أن يكون المعرّف (ID) فريداً، ولا يمكن وجود معرّفين متطابقين في صفحة واحدة.
غيّر السمة data-text='HTML' في القسم المحدد لإعادة تسمية التبويب.

زر الإظهار / الإخفاء (Toggle Show / Hide)

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

يمكن تضمين أي محتوى في هذه الأداة.

محتوى مخفي (Spoiler):

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

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Your_text_is_here.</p>
</details>

المحتوى القابل للطي أو الأكورديون (Toggle Content or Accordion)

يحدد محتوى إضافياً يمكن للمستخدمين فتحه وإغلاقه عند الطلب في مجموعات، ويُستخدم عادةً لقائمة الأسئلة أو الأسئلة الشائعة (FAQs).

العنوان_الأول_للأكورديون

العنوان_الثاني_للأكورديون

العنوان_الثالث_للأكورديون

العنوان_الرابع_للأكورديون

<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

استخدم اسم الفئة alt (المحدد في الكود أعلاه) لتغيير نمط الأيقونة.
عدد عناصر الأكورديون التي يمكنك إضافتها غير محدود.

مخطط الأسئلة الشائعة بصيغة البيانات المصغرة (FAQ schema in Microdata)

<!--[ Accordion start ]-->
<div class='showH' itemscope='' itemtype='https://schema.org/FAQPage'>
  <!--[ Accordion line 1 ]-->
  <details class='ac' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

الروابط الخارجية (External Link)

لتنبيه المستخدمين إذا كان الرابط سيقودهم إلى موقع آخر.

نموذج_رابط_خارجي
نموذج_رابط_بديل

<a class='extL' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extL alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>

أزرار الروابط (Button Link)

زر

<a class='button' href='url_is_here'>Title_link</a>

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

زر

<a class='button ln' href='url_is_here'>Title_link</a>

مع الأيقونات:

تحميل
معاينة

<a class='button' href='url_is_here'><i class='icon dl'></i>Title_link</a>
<a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a>

مع أيقونات <svg>:

راسلني عبر واتساب!
اشترِ الآن!

<a class='button' href='url_is_here'>
  <svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
  <span>WhatsApp me!</span>
</a>
<a class='button' href='url_is_here'>
  <svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
  <span>Buy now!</span>
</a>

أضف السمة style='fill:#fff; margin-right:12px;' أو style='stroke:#fff; margin-right:12px;' لمنح أيقونة SVG لوناً أبيض.

زرّان في سطر واحد:

معاينة تحميل

<div class='btnF'>
  <a class='button ln' href='url_is_here'>Demo</a>
  <a class='button' href='url_is_here'><i class='icon dl'></i>Download</a>
</div>

رابط التحميل (Download Link)

لتزويد المستخدمين بمعلومات عن الملف المراد تحميله.

file_name.zip 200kb

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

مع صورة خلفية بدلاً من النص:

about_me.png 10kb

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(//3.bp.blogspot.com/.../title.png)'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>about_me.png</span>
    <span class='fS'>10kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

صندوق التحميل مع عداد تنازلي (Countdown Download Box)

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

تتطلب هذه الميزة رابط تحميل مباشر للملفات السحابية. يمكنك استخدام Google Drive للحصول على رابط تحميل مباشر للملف.

مع صورة:

about_me.webp Jan 1, 2022 165KB 1080×1080 .webp

بدون صورة:

about_me.webp Jan 1, 2022 165KB 1080×1080 .webp

صيغة الكتابة:

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>Music_Wallpaper.png</span>
        <span data-text='Category'>Music</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

مشغل الموسيقى (Music Player)

مشغل موسيقى يمكن استخدامه لتشغيل الأغاني والمقاطع الصوتية باستخدام ملفات الصوت مثل MP3.

Live Fast

Alan Walker & A$AP Rocky

00:00

03:52

صيغة الكتابة:

<div id='musicPlayer'></div>
<script>
  /*<![CDATA[*/
  /* Music Player Tracks */
  var playerTracks = [{
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    }
  ];
  /*]]>*/
</script>

التحميل الكسول لفيديوهات يوتيوب (Lazy YouTube Video)

ميزة مفيدة لتأجيل تحميل فيديوهات يوتيوب إلى ما بعد قيام المستخدم بتمرير الصفحة.

<!--[ Lazy youtube ]-->
<div class='ytShdw'>
  <div class='lazyYt' data-embed='Youtube_video_ID'>
    <div class='play'>
      <svg viewbox='0 0 213.7 213.7'><polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='c' cx='106.8' cy='106.8' r='103.3'></circle></svg>
    </div>
  </div>
</div>

تأجيل تحميل إطار iframe باستخدام دالة defer.js:

<!--[ Lazysize iframe ]-->
<div class='ytShdw'>
  <div class='videoYt'>
    <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/xxxxxxxxxxx' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
  </div>
</div>

غيّر القسم المحدد بمعرّف فيديو يوتيوب (YouTube video ID) الذي تريد عرضه.
يمكن العثور على معرّف الفيديو في رابط فيديو يوتيوب، على سبيل المثال: youtube.com/watch?v=axRAL0BXNvw.

مراجع المقال (Post Reference)

لكتابة قائمة المراجع أو الهوامش السفلية أسفل المقال

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

<p class='pRef'>Source:<br> www.example.com</p>

العنوان الفرعي للترويسة (Header Subtitle)

لتغيير العنوان الفرعي للترويسة في مقال أو صفحة معينة.

<style>/*<![CDATA[*/
  /* To change Header Subtitle */
  .headH .headSub{max-width:none}
  .headH .headSub::before{content:"Typography"}
/*]]>*/</style>

المقال السابق أو التالي (Previous or Next Post)

يعمل تلقائياً الآن.

انتقل إلى الرابط

إرسال تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.

أحمد القندوسي

تنسيقات النصوص والأكواد البرمجية

صورة مع تسمية توضيحية وميزة التكبير التلقائي (Auto Lightbox)

صور بتخطيط شبكي (Grid Layout)

صور مع ميزة «عرض الكل» (Show All Function)

صور بتخطيط التمرير الجانبي (Scroll Layout)

التحميل الكسول للصور (Lazyload Image)

مقالات ذات صلة يدوية (Manual Related Post)

مقالات ذات صلة تلقائية (Auto Related Post)

فاصل المقال (Post Break)

فقرة مع مسافة بادئة للنص (Text Indent)

فقرة بحرف استهلالي كبير (Drop Cap)

الاقتباسات (Blockquote)

مربع الملاحظات والتنبيهات (Note Block)

الجداول (Table)

جدول المحتويات اليدوي (Manual Table of Content)

جدول المحتويات شبه التلقائي (Semi Automatic Table of Content)

تلوين الأكواد البرمجية (Syntax Highlighter)

تلوين الأكواد البرمجية التلقائي (Automatic Colored Syntax Highlighter)

صندوق الأكواد متعدد الوظائف (Multi Functional Syntax Highlighter)

صندوق الأكواد متعدد التبويبات (MultiTabs Syntax Highlighter)

زر الإظهار / الإخفاء (Toggle Show / Hide)

المحتوى القابل للطي أو الأكورديون (Toggle Content or Accordion)

مخطط الأسئلة الشائعة بصيغة البيانات المصغرة (FAQ schema in Microdata)

الروابط الخارجية (External Link)

أزرار الروابط (Button Link)

رابط التحميل (Download Link)

صندوق التحميل مع عداد تنازلي (Countdown Download Box)

مشغل الموسيقى (Music Player)

التحميل الكسول لفيديوهات يوتيوب (Lazy YouTube Video)

مراجع المقال (Post Reference)

العنوان الفرعي للترويسة (Header Subtitle)

المقال السابق أو التالي (Previous or Next Post)

إرسال تعليق

قالب تنظيف بلوجر 🧹 لابد منه قبل تركيب أي قالب

🌿 أَثْمَان… رفيق مراجعتك للقرآن الكريم برواية ورش عن نافع

حماية المحتوى من السرقة بتعطيل F12

شرح وتحميل برنامج Alfa eBooks Manager Pro

درس الزكاة: أحكامها ومقاصدها: التعريف الأحكام المستحقون

أحمد القندوسي