صورة مع تسمية توضيحية وAuto Lightbox
التسمية التوضيحية للعبة لا يمكن أن تكون جيدة في الوصف/مقتطف المقالة. أنت تلعب هذا الشيء لتتمكن من كتابة التسمية التوضيحية terbaca في snippet artikel
 |
جميع الأشياء في المقالة يمكن أن تحتوي على فطريات Lightbox kecuali gambar في العلامة <figure>، انقر فوق cobalah salah satu gambar في postingan ini. |
صورة مع تخطيط الشبكة
<!--[ 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 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>
صورة مع تخطيط التمرير
تمامًا كما هو الحال في تخطيط المقامرة، يمكن أن يكون هذا هو الحال بالنسبة للتمرير من خلال استخدام فطريات التمرير لأخذ عينات من الهاتف المحمول.
Kami juga menambahkan efek Smooth Scroll Pada Fitur ini، Silahkan Coba Buka Laman ini Pada perangkat seluler ana:
<!--[ 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>
منشور ذو صلة بالدليل
<div class='pRelate'>
<!--[ Related title ]-->
<b>You may want to read this post :</b>
<ul>
<li><a href='#'>Your_post_title_here</a></li>
<li><a href='#'>Your_post_title_here</a></li>
<li><a href='#'>Your_post_title_here</a></li>
</ul>
</div>
ما بعد الاستراحة
يمكنك استخدام هذه الميزة لفصل الفقرات أو لفتح فصل جديد في منشور ما، إليك مثال لما تبدو عليه:
<!--[ To break paragraphs apart ]-->
<hr>
فقرة ذات مسافة بادئة للنص
تحتوي هذه الفقرة على مسافات بادئة للجزء السفلي، مما يسمح بوضع كلمات أكثر سلاسة في الجزء السفلي من الجزء السفلي من الجزء السفلي من الجسم.يمكنك تطبيق معظم الميزات الفقرات حسب الحاجة.
<p class='pIndent'>Your_paragraph_is_here.</p>
الفقرة ذات الأحرف الاستهلالية المسقطة
مرأس المال الأوروبي أكبر مما يمكن تكوينه من عناصر زخرفية في أي جزء من الصورة أو في الحجم. إن استخدام الخفافيش التي يتم تشغيلها بشكل متحيز هو دوا garis أو lebih.
يمكن أن يؤدي الغطاء المنسدل إلى تغيير شكل الصورة إلى حد ما. العديد من وسائل الإعلام لديها وسائل الإعلام التي تنشر أحرفًا كبيرة مثل الكتب والمجالة والقرآن الكريم وsebagainya karena dapat menambah daya tari visual.
اقتباس
Harga teman adalah harga yang lebih tinggi dari harga Normal karena bertujuan to membantu teman yang merintis usaha
—Ivan Lanin
<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>
نمط التنسيق lainnya yang dapat Anda gunakan:
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.
- Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
- Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
<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>
طاولة
هذا الموضوع يستجيب بشكل مثير للدهشة، إذا كان كل شيء جميلًا أو يحتوي على شريط جدول يمكن لصقه في مكان آخر، لا يمكن تخطيط الجدول التلقائي بسهولة من خلال تمرير الفطريات.
يمكنك إنشاء مقال في هذا الموضوع عن طريقك وعن طريق جدول أعمالك:
<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>
جدول المحتويات اليدوي
يمكنك استخدام دليل ToC إذا لم يكن لديك كل علامة العنوان/العنوان(h1, h2, h3, h4, h5, h6) في جدول المحتويات.
للحصول على دليل مستخدم، يجب عليك تخصيص سمة id=' ... 'جديدة لعنوان العلامة الذي يانغ إنجين وأنت تماهكان ك دفتر إيسي، فمن الممكن أن تقوم بتعديل هذا الأمر من خلال إنشاء مانا يانغ إنجين ديتامبيلكان.
محتويات
مع العنوان الفرعي
هذا مثال على علامة العنوان ذات المعرف المخصص:
<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>
جدول محتويات شبه تلقائي
يمكنك إضافة هذا إلى إدراج جدول المحتوى بأمان في النشر التلقائي، ويمكنك أيضًا ضبط عنوان العلامة على ToC، وقد لا يتم حذفه أو حدوث خطأ إذا تم تعديل عنوان العلامة
جدول المحتويات
الخيار الأسهل لعرض جدول المحتويات. ستعرض هذه الميزة جميع علامات العناوين في منشورك (ثلاثة مستويات h2- h4)، لذا تأكد من كتابة علامات العناوين بالترتيب. إقرأ: خطأ شائع
رمز لتحديد موقع عنصر واجهة مستخدم ToC شبه التلقائي:
<details class='sp toc'>
<summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>
<div class='toC' id='autoToc'></div>
</details>
تمييز بناء الجملة
يمكنك إنشاء قائمة كود HTML للنشر
يمكنك استخدام هذا الكود <html>في الفقرة مثل هذا:<p>code</p>
أداة تمييز بناء الجملة MultiTabs
<!DOCTYPE html> < html dir=' ltr ' lang=' en '> < الرأس > < عنوان > صفحة نموذجية </ عنوان > </ الرأس > < !--[ <body> مفتوح ]--> <body> <p> عينة من المحتوى هنا! </ ع > </ body > <!--[ </body> إغلاق ]--> </ html >
<!--[ 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>
إظهار زر الإخفاء
Spoiler:
<details class='sp'>
<summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
<p>Your_text_is_here.</p>
</details>
الأكورديون / تبديل القائمة
Accordion_first_title
Accordion_ Second_title
Accordion_third_title
Accordion_fourth_title (بديل)
<!--[ 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>
كتلة الملاحظة
Fitur ini berfungsi to menambahkan information penting, كلمة تحذير أو كلمة sorotan, ada dua style yang bisa anda coba diantaranya:
ملاحظة.
<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>
رابط خارجي
إذا كان هناك رابط خارجي تم تحديثه في النشر، فستتمكن من إضافة مستخدم إلى عضويتك باستخدام هذا الرابط:
Sample_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>
رابط الزر
<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>
الرموز المتاحة:
<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>
زرين في شريط واحد:
<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>
رابط التحميل
<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>
عرض صورة الخلفية بدلاً من النص
<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>
يوتيوب كسول
تحسين كيفية إنشاء فيديو على YouTube من خلال التمرير عبر الإنترنت من خلال تحميل المدونة
<!--[ 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 مع الفطريات المؤجلة
مرجع آخر
للحصول على مقال مرجعي في دفتر الملاحظات الخاص بك:
<p class='pRef'>Source:<br> www.example.com</p>
جاري تحميل تفاصيل يرجى الانتظار...