طريقة الكتابة والعرض

Hussein Farg 05 فبراير 0 Comment 05 فبراير

وضع التأليف

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

العنوان الرئيسي (H1)

العنوان (H2)

العنوان الفرعي (H3)

عنوان ثانوي (H4)

نص الحجم الافتراضي للقالب الافتراضي

النص ذو أصغر حجم للخط

نص بحجم الخط العادي

حجم الخط الكبير

حجم خط كبير جدًا

نص بلون مختلف

نص بلون الخلفية

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

توجد الفقرة الثانية مع مسافات بادئة إضافية في وضع إنشاء بلوجر

الفقرة الثالثة مع محورين إضافيين قد يكون لهما تأثير ضئيل على شاشة الهاتف المحمول

ستظهر فقرة النص المقتبسة على هذا النحو بلون نص مختلف عن الفقرة المعتادة

قائمة على الوظائف مع الأرقام

القائمة الأولى
القائمة الثانية
القائمة الثالثة
القائمة الرابعة

قائمة أو قائمة بالنقاط

القائمة الأولى
القائمة الثانية
القائمة الثالثة
القائمة الرابعة

تمت إضافة فقرات براوبط ربط Anchor إضافية وروابط نشطة يدويًا عبر وضع الإنشاء.

الصورة

شكل الشرح

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

الرقم	الأسم	المدينة
1	المدينة	الأسكندرية
2	المدينة	القاهرة
3	المدينة	سيناء
4	المدينة	قنا
5	المدينة	أسوان
6	المدينة	الأسماعيلية

الطريقة الصحيحة لكتابة جدول مثل الجدول أعلاه هي مع وضع html ، الكود على النحو التالي:


<table>
   <thead>
      <tr>
         <th>الرقم</th>
         <th>الأسم</th>
         <th>المدينة</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>المدينة</td>
         <td>الأسكندرية</td>
      </tr>
      <tr>
         <td>2</td>
         <td>المدينة</td>
         <td>القاهرة</td>
      </tr>
      <tr>
         <td>3</td>
         <td>المدينة</td>
         <td>سيناء</td>
      </tr>
      <tr>
         <td>4</td>
         <td>المدينة</td>
         <td>قنا</td>
      </tr>
      <tr>
         <td>5</td>
         <td>المدينة</td>
         <td>أسوان</td>
      </tr>
      <tr>
         <td>6</td>
         <td>المدينة</td>
         <td>الأسماعيلية</td>
      </tr>
   </tbody>
</table>

كتابة أكواد برمجية .أو تسمى عادةً أداة تمييز بناء الجملة والتي تتم كتابتها تلقائيًا في وضع التأليف

<pre>
<code>
<!--كود html أو css أو javascript هنا -->
</code>
</pre>

تنسيقات إضافية لا يمكن استخدامها إلا في وضع HTML

كتابة أداة تمييز بناء الجملة يدويًا في وضع نشر HTML

//لاستخدام Syntax Highlighter تكون الكتابة على هذا النحو
<pre>
  <code>
    <!--كود html أو css أو javascript هنا -->
  </code>
</pre>

//ميزات بناء الجملة الإضافية التي يمكنك استخدامها عند كتابة التعليمات البرمجية
<i>Comment</i>     =لن يتم تمييز الرمز في هذه العلامة تلقائيًا
<i class='comment'>Comment</i>     = <!-- كود html أو css أو javascript هنا -->
<span>CSS Property</span>     = main{display: block;position: relative}
<span class='block'>Block Text</span>  = تُستخدم لتمييز الأجزاء التي يحتاج المستخدم إلى استبدالها

جدول المحتويات أو Table of content

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

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

تنسيق الكتابة:

<div class="daftar-isi">
  <div class="isi-judul" onclick="if (document.getElementById('isi-content').style.display === 'none'){ document.getElementById('isi-content').style.display = 'block';} else {document.getElementById('isi-content').style.display = 'none';}" role="button" tabindex="0">جدول المحتويات</div>
  <div id="isi-content" class="isi-content">
    <ol>
      <li><a href="#toc-1">عنوان فرعي</a></li>
      <li><a href="#toc-2">عنوان فرعي ثاني</a></li>
      <li><a href="#toc-3">عنوان فرعي الثالث</a></li>
      <li><a href="#toc-4">العنوان الفرعي الرابع</a></li>
      <li><a href="#toc-5">عنوان فرعي خامس</a></li>
    </ol>
  </div>
</div>

// عدّل النص الذي تم وضع علامة عليه مع ترجماتك ، ثم أضفه id='toc-1' في كل عنوان أو علامة <h2>, <h3>, <h4> على مقالتك. فمثلا:

<h4>عنوان فرعي</h4>
املأ الفقرات في العنوان الفرعي للمقالة

// أضف المعرف إلى العنوان على النحو التالي :

<h4 id='toc-1'>عنوان فرعي</h4>
املأ الفقرات في العنوان الفرعي للمقالة

يمكنك إخفاء جدول المحتويات في البداية ولا تظهر إلا بعد النقر على عنوان جدول المحتويات ، والطريقة لتغيير قائمة المحتويات هي كما يلي:

<div class="daftar-isi">
  <div id="isi-judul" class="isi-judul" onclick="if (document.getElementById('isi-content').style.display === 'none'){ document.getElementById('isi-content').style.display = 'block';} else {document.getElementById('isi-content').style.display = 'none';}" role="button" tabindex="0">جدول المحتويات</div>
  <div id="isi-content" class="isi-content" style="display:none">
    <ol>
      <li><a href="#toc-1">عنوان فرعي 1</a></li>
      <li><a href="#toc-2">عنوان فرعي 2</a></li>
      <li><a href="#toc-3">عنوان فرعي 3</a></li>
      <li><a href="#toc-4">عنوان فرعي 4</a></li>
      <li><a href="#toc-5">عنوان فرعي 5</a></li>
    </ol>
  </div>
</div>

الأزرار

أزرار ارتباط مختلفة لعرض روابط مهمة مثل روابط التنزيل والمعاينات وما إلى ذلك. بشكل افتراضي سيكون المظهر على النحو التالي:

زر
تنسيق الكتابة:

<a class="button" href="url_anda_disini">Tombol</a>

أضف إضافة أيقونة إلى الزر
تحميل
طريقة الكتابة:

<a class="button" href="url_anda_disini"><i class="m-icon download"></i>تحميل</a>

أزرار بأشكال مختلفة
تحميل
طريقة الكتابة:

<a class="button outline" href="url_anda_disini"><i class="m-icon download"></i>تحميل</a>

زر رابط Whatsapp
تحتاج مساعدة?
طريقة الكتابة:

<a class="button whatsapp" href="url_anda_disini"><i class="m-icon whatsapp"></i>تحتاج مساعدة?</a>

زرين على التوالي

تحميل معاينة

تنسيق الكتابة:

<div class="button-info">
  <a class="button" href="url_anda_disini"><i class="m-icon download"></i>تحميل</a>
  <a class="button outline" href="url_anda_disini">معاينة</a>
</div>

Lazy youtube

مفيد لتحميل مقاطع فيديو يوتيوب بعد تمرير الصفحة بحيث يتم تحميل المدونة بشكل أسرع

استخدامه سهل للغاية:

انسخ رمز تشغيل فيديو youtube الذي تريد عرضه
مثال لعنوان URL لفيديو youtube: youtube.com/watch?v=s1tAYmMjLdY
كل ما عليك نسخه هو الكود "s1tAYmMjLdY" ثم الصقه على الجزء المحدد في هذا الرمز

تنسيق الكتابة:

<div class="lazy-youtube" data-embed="rvrZJ5C_Nwg">
  <div class="playBut">
    <svg class="svg-play" viewbox="0 0 213.7 213.7"><polygon class="triangle" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon><circle class="circle" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
</div>

Spoiler أو إظهار وإخفاء زر

Spoiler وظيفة لإخفاء بعض محتويات المقالة وسيتم عرضها بالنقر

عنوان Spoiler:

تنسيق الكتابة:

<div class="spoiler">
  <div class="spoiler-judul"><b>Judul Spoiler</b>: <input class="button" value="عرض" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'إخفاء';} else {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'عرض';}" type="button">
  </div>
  <div class="spoiler-isi">
    <div style="display:none">
      محتويات الـ  spoiler
    </div>
  </div>
</div>

Spoiler لإخفاء رمز أو بناء الجملة

عنوان الـ Spoiler:

املأ كود تمييز الجملة

تنسيق الكتابة:

<div class="spoiler">
  <div class="spoiler-judul"><b>Judul Spoiler</b>: <input class="button" value="عرض" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'إخفاء';} else {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'عرض';}" type="button">
  </div>
  <div class="spoiler-isi">
    <div style="display:none">
      <pre><code>املأ كود تمييز الجملة</code></pre>
    </div>
  </div>
</div>

Fletro Linkv5.4+