<a class="pro-btn btn-primary" href="ضع رابط التحميل هنا" target="_blank" rel="nofollow noopener">
  <svg fill="currentColor" viewBox="0 0 20 20"><path clip-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
  <span>تحميل مباشر</span>
</a>

<a class="pro-btn btn-secondary" href="ضع رابط المعاينة هنا" target="_blank">
  <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
  <span>مشاهدة المعاينة</span>
</a>

<div style="text-align: center; margin-top: 20px; margin-bottom: 20px;">

<!-- === زر التحميل المباشر (بالأيقونة الجديدة) === -->
<a class="pro-btn btn-primary" href="ضع-رابط-التحميل-هنا" target="_blank" rel="nofollow noopener">
  <svg fill="currentColor" viewBox="0 0 20 20"><path clip-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
  <span>تحميل مباشر</span>
</a>

<!-- === زر المعاينة (كما هو) === -->
<a class="pro-btn btn-secondary" href="ضع-رابط-المعاينة-هنا" target="_blank" rel="nofollow noopener">
  <svg fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
  <span>مشاهدة المعاينة</span>
</a>

</div>

<h3 _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; margin: 0px;"><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">&nbsp;كيفية الاستخدام (الشرح لمشتري القالب)</span></h3><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"></ms-cmark-node></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQy4PmBVyWtbnzIxDkNQIEtbDrDW1QFOwWMI1D2pT0EwfrgDgACIhsq5TTVSklgJon1jVM4-89rUW0-WdF14r7bq-xdgL8SJnohrRIhKm2msDOmYZ7XFDu7fIByRjuBQrtI77ZWt-2krKobG43iKxaYFO5L3HcRzxvugzM9Qj8nMCGx4uX0VSk2g6V-g/s1024/%D8%B4%D8%B9%D8%A7%D8%B1%20%D8%A7%D9%84%D8%B2%D8%B1%20%D8%A7%D9%84%D8%A3%D8%AD%D9%85%D8%B1-%D8%A7%D9%84%D8%A3%D8%B2%D8%B1%D9%82%20%D8%A7%D9%84%D8%B2%D9%85%D9%86%D9%8A.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="400" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQy4PmBVyWtbnzIxDkNQIEtbDrDW1QFOwWMI1D2pT0EwfrgDgACIhsq5TTVSklgJon1jVM4-89rUW0-WdF14r7bq-xdgL8SJnohrRIhKm2msDOmYZ7XFDu7fIByRjuBQrtI77ZWt-2krKobG43iKxaYFO5L3HcRzxvugzM9Qj8nMCGx4uX0VSk2g6V-g/w400-h400-rw/%D8%B4%D8%B9%D8%A7%D8%B1%20%D8%A7%D9%84%D8%B2%D8%B1%20%D8%A7%D9%84%D8%A3%D8%AD%D9%85%D8%B1-%D8%A7%D9%84%D8%A3%D8%B2%D8%B1%D9%82%20%D8%A7%D9%84%D8%B2%D9%85%D9%86%D9%8A.png" width="400" /></a></div><p></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">لاستخدام الأزرار، يجب على الكاتب الانتقال إلى وضع&nbsp;</span><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">"عرض HTML" (HTML view)</strong><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">&nbsp;في محرر المقالات ولصق الأكواد التالية. لقد قمت بتضمين أيقونات SVG جذابة مباشرة في الكود.</span></ms-cmark-node></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"><span style="color: #073763;">1. الزر الأساسي (للتحميل المباشر):</span></strong></ms-cmark-node></p><ms-code-block _ngcontent-ng-c4139270029="" _nghost-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; position: relative;"><div _ngcontent-ng-c408037419="" class="container" style="--mat-expansion-container-background-color: var(--color-v3-surface-container); --mat-expansion-container-elevation-shadow: none; --mat-expansion-header-collapsed-state-height: 36px; --mat-expansion-header-disabled-state-text-color: var(--color-v3-text); --mat-expansion-header-expanded-state-height: 36px; --mat-expansion-header-indicator-display: none; border-radius: 12px; border: 1px solid var(--color-v3-outline-var); box-shadow: var(--v3-shadow-xs); box-sizing: border-box; font-optical-sizing: auto; line-height: 20px; margin-bottom: 12px;"><mat-expansion-panel _ngcontent-ng-c408037419="" class="mat-expansion-panel sticky-header mat-expanded mat-expansion-panel-animations-enabled" style="border-radius: 12px; box-shadow: var(--mat-expansion-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)); box-sizing: content-box; display: block; margin: 0px; overflow-x: unset; overflow-y: clip; position: relative; transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><mat-expansion-panel-header _ngcontent-ng-c408037419="" aria-controls="cdk-accordion-child-26" aria-disabled="false" aria-expanded="true" class="mat-expansion-panel-header mat-focus-indicator sticky mat-expanded" id="mat-expansion-panel-header-26" role="button" style="align-items: center; border-radius: 12px; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: row; font-family: var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font)); font-size: var(--mat-expansion-header-text-size, var(--mat-sys-title-medium-size)); font-weight: var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight)); height: var(--mat-expansion-header-expanded-state-height, 64px); letter-spacing: var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking)); line-height: var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height)); padding-inline: 12px 6px; padding: 0px 24px; position: sticky; top: calc(var(--ms-autoscroll-container-padding-top, 20px)*-1); transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;" tabindex="0"><span class="mat-expansion-indicator ng-star-inserted" style="box-sizing: border-box; transform: rotate(180deg); transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"></span></mat-expansion-panel-header><div class="mat-expansion-panel-content-wrapper" style="box-sizing: border-box; display: grid; font-optical-sizing: auto; grid-template-columns: 100%; grid-template-rows: 1fr; line-height: 20px; transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><div aria-labelledby="mat-expansion-panel-header-26" class="mat-expansion-panel-content" id="cdk-accordion-child-26" role="region" style="box-sizing: border-box; display: flex; flex-direction: column; font-optical-sizing: auto; line-height: var(--mat-expansion-container-text-line-height, var(--mat-sys-body-large-line-height)); min-height: 0px; overflow: visible; transition: visibility 190ms linear 0s; visibility: visible;"><div class="mat-expansion-panel-body" style="box-sizing: border-box; display: flex; flex-direction: column; font-optical-sizing: auto; line-height: 20px; padding: 0px;"><pre _ngcontent-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; display: inline-flex; line-height: 22px; margin-bottom: 0px; overflow-x: auto; padding: 0px 16px 12px 12px;"><code _ngcontent-ng-c408037419="" style="box-sizing: border-box;">&lt;a class="pro-btn btn-primary" href="ضع رابط التحميل هنا" target="_blank" rel="nofollow noopener"&gt; &lt;svg fill="currentColor" viewBox="0 0 20 20"&gt;&lt;path clip-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"&gt;&lt;/path&gt;&lt;/svg&gt; &lt;span&gt;تحميل مباشر&lt;/span&gt; &lt;/a&gt;</code></pre></div></div></div></mat-expansion-panel></div></ms-code-block><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"><span style="color: #0b5394;"><a class="pro-btn btn-primary" href="ضع رابط التحميل هنا" rel="nofollow noopener" target="_blank"> <svg fill="currentColor" viewbox="0 0 20 20"><path clip-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"></path></svg> <span>تحميل مباشر</span> </a></span></strong></ms-cmark-node></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"><span style="color: #0b5394;">2. الزر الثانوي (للمعاينة أو رابط بديل):</span></strong></ms-cmark-node></p><ms-code-block _ngcontent-ng-c4139270029="" _nghost-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-size: 14px; position: relative;"><div _ngcontent-ng-c408037419="" class="container" style="--mat-expansion-container-background-color: var(--color-v3-surface-container); --mat-expansion-container-elevation-shadow: none; --mat-expansion-header-collapsed-state-height: 36px; --mat-expansion-header-disabled-state-text-color: var(--color-v3-text); --mat-expansion-header-expanded-state-height: 36px; --mat-expansion-header-indicator-display: none; border-radius: 12px; border: 1px solid var(--color-v3-outline-var); box-shadow: var(--v3-shadow-xs); box-sizing: border-box; font-optical-sizing: auto; line-height: 20px; margin-bottom: 12px;"><mat-expansion-panel _ngcontent-ng-c408037419="" class="mat-expansion-panel sticky-header mat-expanded mat-expansion-panel-animations-enabled" style="border-radius: 12px; box-shadow: var(--mat-expansion-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)); box-sizing: content-box; display: block; margin: 0px; overflow-x: unset; overflow-y: clip; position: relative; transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><mat-expansion-panel-header _ngcontent-ng-c408037419="" aria-controls="cdk-accordion-child-27" aria-disabled="false" aria-expanded="true" class="mat-expansion-panel-header mat-focus-indicator sticky mat-expanded" id="mat-expansion-panel-header-27" role="button" style="align-items: center; border-radius: 12px; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: row; font-family: var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font)); font-size: var(--mat-expansion-header-text-size, var(--mat-sys-title-medium-size)); font-weight: var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight)); height: var(--mat-expansion-header-expanded-state-height, 64px); letter-spacing: var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking)); line-height: var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height)); padding-inline: 12px 6px; padding: 0px 24px; position: sticky; top: calc(var(--ms-autoscroll-container-padding-top, 20px)*-1); transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;" tabindex="0"><span class="mat-expansion-indicator ng-star-inserted" style="box-sizing: border-box; transform: rotate(180deg); transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"></span></mat-expansion-panel-header><div class="mat-expansion-panel-content-wrapper" style="box-sizing: border-box; color: var(--mat-expansion-container-text-color, var(--mat-sys-on-surface)); display: grid; font-optical-sizing: auto; grid-template-columns: 100%; grid-template-rows: 1fr; line-height: 20px; transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><div aria-labelledby="mat-expansion-panel-header-27" class="mat-expansion-panel-content" id="cdk-accordion-child-27" role="region" style="box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--mat-expansion-container-text-font, var(--mat-sys-body-large-font)); font-optical-sizing: auto; font-size: var(--mat-expansion-container-text-size, var(--mat-sys-body-large-size)); font-weight: var(--mat-expansion-container-text-weight, var(--mat-sys-body-large-weight)); letter-spacing: var(--mat-expansion-container-text-tracking, var(--mat-sys-body-large-tracking)); line-height: var(--mat-expansion-container-text-line-height, var(--mat-sys-body-large-line-height)); min-height: 0px; overflow: visible; transition: visibility 190ms linear 0s; visibility: visible;"><div class="mat-expansion-panel-body" style="box-sizing: border-box; display: flex; flex-direction: column; font-optical-sizing: auto; line-height: 20px; padding: 0px;"><pre _ngcontent-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; color: var(--color-v3-text); display: inline-flex; line-height: 22px; margin-bottom: 0px; overflow-x: auto; padding: 0px 16px 12px 12px;"><code _ngcontent-ng-c408037419="" style="box-sizing: border-box; font-size: 13px;"><span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">a</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">class</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"pro-btn btn-secondary"</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">href</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"ضع رابط المعاينة هنا"</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">target</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"_blank"</span>&gt;</span> <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">svg</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">fill</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"currentColor"</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">viewBox</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"0 0 20 20"</span>&gt;</span><span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">path</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">d</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"M10 12a2 2 0 100-4 2 2 0 000 4z"</span>&gt;</span><span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">path</span>&gt;</span><span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">path</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">fill-rule</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"evenodd"</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">d</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">clip-rule</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"evenodd"</span>&gt;</span><span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">path</span>&gt;</span><span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">svg</span>&gt;</span> <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">span</span>&gt;</span>مشاهدة المعاينة<span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">span</span>&gt;</span> <span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">a</span>&gt;</span></code></pre></div></div></div></mat-expansion-panel></div></ms-code-block><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"><a class="pro-btn btn-secondary" href="ضع رابط المعاينة هنا" target="_blank"> <svg fill="currentColor" viewbox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path clip-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" fill-rule="evenodd"></path></svg> <span>مشاهدة المعاينة</span> </a></strong></ms-cmark-node></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">مثال للاستخدام معًا (في وسط الصفحة):</strong><br _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;" /><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; display: contents;"></ms-cmark-node><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">يمكن وضع الأزرار داخل&nbsp;</span><span _ngcontent-ng-c4139270029="" class="inline-code ng-star-inserted" style="border-radius: 3px; border: 1px solid var(--color-v3-surface-container); box-sizing: border-box; display: inline-block; font-family: &quot;DM Mono&quot;, monospace; font-size: 13px; padding: 0px 3px;">div</span><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">&nbsp;لتوسيطها في الصفحة.</span></ms-cmark-node></p><ms-code-block _ngcontent-ng-c4139270029="" _nghost-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; position: relative;"><div _ngcontent-ng-c408037419="" class="container" style="--mat-expansion-container-background-color: var(--color-v3-surface-container); --mat-expansion-container-elevation-shadow: none; --mat-expansion-header-collapsed-state-height: 36px; --mat-expansion-header-disabled-state-text-color: var(--color-v3-text); --mat-expansion-header-expanded-state-height: 36px; --mat-expansion-header-indicator-display: none; border-radius: 12px; border: 1px solid var(--color-v3-outline-var); box-shadow: var(--v3-shadow-xs); box-sizing: border-box; font-optical-sizing: auto; line-height: 20px; margin-bottom: 12px;"><mat-expansion-panel _ngcontent-ng-c408037419="" class="mat-expansion-panel sticky-header mat-expanded mat-expansion-panel-animations-enabled" style="border-radius: 12px; box-shadow: var(--mat-expansion-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)); box-sizing: content-box; display: block; margin: 0px; overflow-x: unset; overflow-y: clip; position: relative; transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><div class="mat-expansion-panel-content-wrapper" style="box-sizing: border-box; display: grid; font-optical-sizing: auto; grid-template-columns: 100%; grid-template-rows: 1fr; line-height: 20px; transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><div aria-labelledby="mat-expansion-panel-header-28" class="mat-expansion-panel-content" id="cdk-accordion-child-28" role="region" style="box-sizing: border-box; display: flex; flex-direction: column; font-optical-sizing: auto; line-height: var(--mat-expansion-container-text-line-height, var(--mat-sys-body-large-line-height)); min-height: 0px; overflow: visible; transition: visibility 190ms linear 0s; visibility: visible;"><div class="mat-expansion-panel-body" style="box-sizing: border-box; display: flex; flex-direction: column; font-optical-sizing: auto; line-height: 20px; padding: 0px;"><pre _ngcontent-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; display: inline-flex; line-height: 22px; margin-bottom: 0px; overflow-x: auto; padding: 0px 16px 12px 12px;"><code _ngcontent-ng-c408037419="" style="box-sizing: border-box;">&lt;div style="text-align: center; margin-top: 20px; margin-bottom: 20px;"&gt; &lt;!-- === زر التحميل المباشر (بالأيقونة الجديدة) === --&gt; &lt;a class="pro-btn btn-primary" href="ضع-رابط-التحميل-هنا" target="_blank" rel="nofollow noopener"&gt; &lt;svg fill="currentColor" viewBox="0 0 20 20"&gt;&lt;path clip-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"&gt;&lt;/path&gt;&lt;/svg&gt; &lt;span&gt;تحميل مباشر&lt;/span&gt; &lt;/a&gt; &lt;!-- === زر المعاينة (كما هو) === --&gt; &lt;a class="pro-btn btn-secondary" href="ضع-رابط-المعاينة-هنا" target="_blank" rel="nofollow noopener"&gt; &lt;svg fill="currentColor" viewBox="0 0 20 20"&gt;&lt;path d="M10 12a2 2 0 100-4 2 2 0 000 4z"&gt;&lt;/path&gt;&lt;path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"&gt;&lt;/path&gt;&lt;/svg&gt; &lt;span&gt;مشاهدة المعاينة&lt;/span&gt; &lt;/a&gt; &lt;/div&gt;</code></pre></div></div></div></mat-expansion-panel></div></ms-code-block><p></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"></span></ms-cmark-node></p><div style="margin-bottom: 20px; margin-top: 20px; text-align: center;"><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"> <!--=== زر التحميل المباشر (بالأيقونة الجديدة) ===--> <a class="pro-btn btn-primary" href="ضع-رابط-التحميل-هنا" rel="nofollow noopener" target="_blank"> <svg fill="currentColor" viewbox="0 0 20 20"><path clip-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"></path></svg> <span>تحميل مباشر</span> </a> <!--=== زر المعاينة (كما هو) ===--> <a class="pro-btn btn-secondary" href="ضع-رابط-المعاينة-هنا" rel="nofollow noopener" target="_blank"> <svg fill="currentColor" viewbox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path clip-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" fill-rule="evenodd"></path></svg> <span>مشاهدة المعاينة</span> </a> </span></div><p></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">جرب هذه الأكواد في مقال جديد وسترى كيف تبدو احترافية.</span></ms-cmark-node></p>