اكواد واضافات قالب Plus ui v3.0 الاصدار الجديد

<!--[ Button with demo icon ]-->
<a class='button' href='link_here'><i class='icon demo'></i>link_title</a>

رابط تحميل الملفات

<!--[ Download Box ]-->
<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='link_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

اقتباس

الشعوب التي تتجاهل دراسة تاريخها وتنكر دروسه، تجد نفسها حبيسة أخطاء الماضي. فالتاريخ ليس مجرد سرد للأحداث، بل هو مرآة تعكس لنا مصيرنا ومستقبلنا، ومن يهمل فهمه يسير في طريق الضياع.

تقني العرب

<!--[ Standard Blockquote ]-->
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

الشعوب التي تتجاهل دراسة تاريخها وتنكر دروسه، تجد نفسها حبيسة أخطاء الماضي. فالتاريخ ليس مجرد سرد للأحداث، بل هو مرآة تعكس لنا مصيرنا ومستقبلنا، ومن يهمل فهمه يسير في طريق الضياع.

تقني العرب>

<!--[ Blockquote (Style 1) ]-->
<blockquote class='s1'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

الشعوب التي تتجاهل دراسة تاريخها وتنكر دروسه، تجد نفسها حبيسة أخطاء الماضي. فالتاريخ ليس مجرد سرد للأحداث، بل هو مرآة تعكس لنا مصيرنا ومستقبلنا، ومن يهمل فهمه يسير في طريق الضياع.

تقني العرب

<!--[ Blockquote (Style 2) ]-->
<blockquote class='s2'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

الملاحظات

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

معلومة!
الشعوب التي تتجاهل دراسة تاريخها وتنكر دروسه، تجد نفسها حبيسة أخطاء الماضي. فالتاريخ ليس مجرد سرد للأحداث، بل هو مرآة تعكس لنا مصيرنا ومستقبلنا، ومن يهمل فهمه يسير في طريق الضياع.

<!--[ Note info ]-->
<p class='note'><b>Info!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

تحذير!
الشعوب التي تتجاهل دراسة تاريخها وتنكر دروسه، تجد نفسها حبيسة أخطاء الماضي. فالتاريخ ليس مجرد سرد للأحداث، بل هو مرآة تعكس لنا مصيرنا ومستقبلنا، ومن يهمل فهمه يسير في طريق الضياع.

<!--[ Note warning ]-->
<p class='note wr'><b>Warning!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

الجدول

استخدام الجداول في HTML يعتبر أكثر تعقيدًا قليلًا، نوصي بتعلم المزيد عن جداول HTML قبل استخدامها. فيما يلي مثال على جدول يحتوي على بيانات:

<!--[ Table ]-->
<div class='table'>
  <table>
    <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>
    </tbody>
  </table>
</div>

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

يُستخدم لتحديد سطور الأكواد البرمجية (HTML، CSS، JavaScript، وغيرها) في المشاركات.

<pre data-comment='.html' data-source='src/index.html'><code>code_here</code></pre>

صندوق الاكواد بعدة تبويبات

يُستخدم لتجميع عدة كتل من الأكواد معًا.

[HTML] code_here

[CSS] code_here

[JS] code_here

[JSON] code_here

<!--[ MultiTabs Syntax 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] code_here</code></pre>
  <pre class='preC1-2' data-source='src/style.css'><code>[CSS] code_here</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>[JS] code_here</code></pre>
  <pre class='preC1-4' data-source='src/rules.json'><code>[JSON] code_here</code></pre>
</div>

الأكورديون

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

<!--[ Accordion ]-->
<details class='ac'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</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>

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

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

<!--[ Automatic Table of Contents ]-->
<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='aToc'></div>
</details>

شاهد ايضا

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

<!--[ Automatic Related Posts ]-->
<details class='sp arp' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='aRel'></div>
</details>

تحميل الكسول لفيديوهات اليوتيوب

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

<!--[ Lazy YouTube ]-->
<div class='lazyYt' data-embed='video_id'></div>

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

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

المصدر :
plus-ui.blogspot.com/