تطبيقي بلس
تطبيقي بلس
December 23, 2020
1

 

المصدر: jagodesain.com

وضع التأليف

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

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

ستظهر فقرة نص الاقتباس بهذا الشكل بلون نص مختلف عن فقرة عادية
قائمة أو قائمة في الوظائف مع الأرقام
  1. القائمة الأولى
  2. القائمة الثانية
  3. القائمة الثالثة
  4. القائمة الرابعة
قائمة أو قائمة مع النقاط
  • القائمة الأولى
  • القائمة الثانية
  • القائمة الثالثة
  • القائمة الرابعة

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

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

لا.اسم المدينةمجموع السكانالأعمار من 19 إلى 25 عامًاالعمر 25-40العمر> 40
1باليكبابان10،023،21150002232،500،3322499232
2بانجارماسين10،023،21150002232،500،3322499232
3بنجر بارو10،023،21150002232،500،3322499232
4ساماريندا10،023،21150002232،500،3322499232

الطريقة الصحيحة لكتابة الجدول كما هو مذكور أعلاه هي في صيغة html وهي الكود كالتالي:

<div class='table'>
  <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Kota</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Kota</td>
        <td>Balikpapan</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Kelurahan</td>
        <td>Gunung Sari</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Desa</td>
        <td>Klandasan Ilir</td>
      </tr>
    </tbody>
  </table>
</div>

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

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

// Untuk menggunakan Syntax Highlighter penulisannya adalah seperti ini
<pre><code>
  <!-- kode html, css ata javascript disini -->
</code></pre>

// Fitur syntax tambahan yang bisa Anda gunakan ketika menulis kode

<i>Comment</i>     										= Kode dalam tag ini otomatis tidak akan ikut terseoroti
<i class='comment'>Comment</i> 				= <!-- kode html, css atau javascript disini -->
<i class='tag'>div</i>								= <div>
<span>CSS Property</span>     			  = main{display: block;position: relative}
<span class='block'>Block Text</span> = Digunakan untuk menyoroti bagian yang perlu diganti oleh user

يمكنك كتابة كود html خارج بناء الجملة مثل هذا المثال: </ div> ، الأمر سهل للغاية بمجرد كتابة الكود على النحو التالي. تأكد من تحليل العلامة التي ستكتبها كما هو موضح أدناه

<span class='code'>&lt;div&gt;</span>

فاصل فقرة

Lorem ipsum dolor sit amet ، Elite adipiscing consectetur. الصمت الجيد الدهليزي ، وكفاءة فيليس السلع وآخرون. Mauris Vel الصامت pellentesque lorem lacinia luctus. Nulla quam magna ، pharetra in ultrices at ، condimentum id tellus.

الفقرة الثانية مفصولة بثلاث نقاط (كما ترى أعلاه) والتي تعمل كفواصل صفحات في مقال طويل.

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

<p>Isi_paragraf_disini</p>

<i class='separate'></i>
<p>Isi_paragraf_disini</p>

Blockquote

Lorem ipsum dolor sit amet ، Elite adipiscing consectetur. الصمت الجيد الدهليزي ، وكفاءة فيليس السلع وآخرون. Mauris Vel الصامت pellentesque lorem lacinia luctus. Nulla quam magna ، pharetra in ultrices at ، condimentum id tellus.
  • Sed suscipit sapien sed turpis ultrices viverra. يمكنك استخدام هذا المنتج في الخميرة.
  • Aliquam vitae metus laoreet، dapibus enim sit amet، feugiat lorem. Sed in dui purus.

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

<blockquote class='style-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> // Opsional bisa digunakan atau dihapus
      <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>

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

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

يمكن استخدام جدول المحتويات اليدوي هذا كبديل لأنه في إصدار AMP ، لا يتوفر جدول محتويات تلقائي.

  1. العنوان الأول
    1. عنوان فرعي واحد
    2. العنوان الفرعي الثاني
    3. العنوان الفرعي الثالث
    4. أربعة
    5. خمسة
  2. العنوان الثاني
  3. العنوان الثالث
  4. العنوان الرابع
  5. العنوان الخامس

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

<div class='daftar-isi'>
  <input class='isi-input hidden' id='daftar-isi01' type='checkbox'>
  <label class='isi-judul' for='daftar-isi01'>Daftar isi</label>
  <div class='isi-content' id='isi-content'>
    <ol>
      <li><a href='#toc-1'>Judul heading satu</a>      
        <ol>
          <li><a href='#toc-1a'>Subheading satu</a></li>
          <li><a href='#toc-2b'>Subheading dua</a></li>
          <li><a href='#toc-3c'>Subheading tiga</a></li>
          <li><a href='#toc-4d'>Subheading empat</a></li>
          <li><a href='#toc-5e'>Subheading lima</a></li>
        </ol>
      </li>
      <li><a href='#toc-2'>Judul heading dua</a></li>
      <li><a href='#toc-3'>Judul heading tiga</a></li>
      <li><a href='#toc-4'>Judul heading empat</a></li>
      <li><a href='#toc-5'>Judul heading lima</a></li>
    </ol>
  </div>
</div>

// Edit tulisan yang ditandai dengan subjudul Anda, kemudian tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h3> pada artikel Anda. Contoh:

<h3>Judul subheading</h3>
Isi paragraf pada subheading artikel

// Tambahkan id pada heading menjadi seperti dibawah :

<h3 id='toc-1'>Judul subheading</h3>
Isi paragraf pada subheading artikel

يمكنك إخفاء جدول المحتويات في البداية ولا تظهر إلا بعد النقر فوق عنوان جدول المحتويات ، وكيفية إضافة السمة المحددة إلى علامة <input> كما هو موضح أدناه:

<div class='daftar-isi'>
  <input class='isi-input hidden' id='daftar-isi01' type='checkbox' checked>
  <label class='isi-judul' for='daftar-isi01'>Daftar isi</label>
  <div class='isi-content' id='isi-content'>
    <ol>
      <li><a href='#toc-1'>Judul heading satu</a>      
        <ol>
          <li><a href='#toc-1a'>Subheading satu</a></li>
          <li><a href='#toc-2b'>Subheading dua</a></li>
          <li><a href='#toc-3c'>Subheading tiga</a></li>
          <li><a href='#toc-4d'>Subheading empat</a></li>
          <li><a href='#toc-5e'>Subheading lima</a></li>
        </ol>
      </li>
      <li><a href='#toc-2'>Judul heading dua</a></li>
      <li><a href='#toc-3'>Judul heading tiga</a></li>
      <li><a href='#toc-4'>Judul heading empat</a></li>
      <li><a href='#toc-5'>Judul heading lima</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>Download</a>
أزرار مختلفة الأنماط
تحميل
تنسيق الكتابة:
<a class='button outline' href='url_anda_disini'><i class='m-icon download'></i>Download</a>
زر رابط Whatsapp
تحتاج مساعدة؟
تنسيق الكتابة:
<a class='button whatsapp' href='url_anda_disini'><i class='m-icon whatsapp'></i>Butuh Bantuan?</a>

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

تحميلتجريبي
تنسيق الكتابة:
<div class='button-info'>
  <a class='button' href='url_anda_disini'><i class='m-icon download'></i>Download</a>
  <a class='button outline' href='url_anda_disini'>Demo</a>
</div>

زر التنزيل ومعلومات الملف في حاوية واحدة ، يمكنك تغيير نوع الملف واسم الملف مباشرة في القسم المحدد

الرمز البريديTemplate-calender-2021.zipتحميل
تنسيق الكتابة:
<div class='download-info'>
  <span class='file-icon'>Zip</span>
  <span class='file-text'>Template-kalender-2021.zip</span>
  <a class='button file-link' href='url_anda_disini' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a>
</div>

يوتيوب كسول

مفيد لتحميل مقاطع فيديو 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 على إخفاء جزء من محتوى المقالة وسيتم عرضه بالنقر

عنوان المفسد:

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

<div class='spoiler'>
  <input class='spoiler-input hidden' id='spoiler-01' type='checkbox'>
  <div class='spoiler-judul'><b>Judul Spoiler</b: ><label aria-label='Spoiler' class='button' for='spoiler-01'></label></div>
  <div class='spoiler-isi'>
    <div>Isi spoiler</div>
  </div>
</div>

التعليمات / قائمة الأكورديون

يعمل على عرض محتوى الأسئلة الشائعة أو الأسئلة على المدونة ، والتي يشار إليها غالبًا بقائمة الأكورديون

  • Lorem ipsum dolor sit amet ، Elite adipiscing consectetur. الصمت الجيد الدهليزي ، وكفاءة فيليس السلع وآخرون. Mauris Vel الصامت pellentesque lorem lacinia luctus. Nulla quam magna ، pharetra in ultrices at ، condimentum id tellus.

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

<ul class='accordion'>
  <!-- Baris pertama -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu1' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu1'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan pertama</span>
      </label>
      <div class='content'>Jawaban pertanyaan pertama</div>
    </div>
  </li>
  <!-- Baris kedua -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu2' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu2'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan kedua</span>
      </label>
      <div class='content'>Jawaban pertanyaan kedua</div>
    </div>
  </li>
  <!-- Baris ketiga -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu3' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu3'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan ketiga</span>
      </label>
      <div class='content'>Jawaban pertanyaan ketiga</div>
    </div>
  </li>
  <!-- Baris seterusnya... -->
</ul>

في كل مرة تضيف فيها سطرًا جديدًا ، تأكد من تغيير الجزء الذي تم وضع علامة offaccor-menu-1 عليه في كل سطر ، وإضافة سطر جديد لا يقتصر على 100 سطر

كتلة الملاحظات

ملحوظة: يمكن استخدامها لإضافة معلومات مهمة للقراء.

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

<p class='note'>teks_anda_disini</p>

هام: يمكن استخدامه لإضافة معلومات مهمة للقراء.

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

<p class='note noteAlert'>teks_anda_disini</p>