اكواد واضافات قالب Plus UI V2.6

اهلا ومرحبا بكم اصدقائي اليوم نشارك معكم اكواد واضافات قالب Plus ui v2.6 شورت كود Shortcode هذا هو القالب الأفضل لسنه 2022 ومع هذه الاضافات الخاصة به سوف تحصل علي تنسيق انيق وبشكل احترافي وهذا القالب يحتوي علي مميزات حصريه سبق شرحنا " قالب Plus UI Template.

جميع الاكواد واضافات الخاصة بقالب Plus UI

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

صفحة الأرشيف

لإضافة صفحة الفهرس الى مدونتك قم بنسخ الكود التالي ولصقه في صفحه ارشيف موقعك.

<div class='postSection sitemaps' id='sitemaps'>
  <div class='loading'>
    <svg class='line' viewBox='0 0 24 24'>
      <g transform='translate(3.500000, 2.500000)'>
        <path class="svgC" d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'/><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'/>
      </g>
    </svg>Loading... </div>
</div> 


<style>
.sitemaps{position:relative;width:calc(100% + 40px);background-color:transparent;left:-20px;right:-20px;padding:25px 20px;font-size:14px} .sitemapBox{padding:15px;border:1px solid #e0e0e0;border-radius:5px} .sitemapBox:not(:last-child){margin-bottom:20px} .postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)} .sitemapTitle:before{content:'# '; font-size:90%;opacity:.8} .sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count} .sitemaps li{display:flex;align-items:baseline} .sitemaps li:not(:last-child){margin-bottom:0} .sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--font-body);line-height:normal; opacity:.7} .sitemaps .loading{display:flex;padding:60px 0;align-items:center;justify-content:center} .sitemaps .loading svg{margin-right:3px;-webkit-animation:rotation 2s infinite linear} @-webkit-keyframes rotation {from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}} @media screen and (max-width:640px){.sitemapBox{border-radius:20px} .darkMode .sitemaps{background-color:var(--dark-bgSec)} .sitemaps .sitemapBox{background-color:var(--body-bg);border:none} @media screen and (max-width:480px){.sitemaps{border-radius:40px} .sitemapBox{border-radius:25px}}
</style>

<script>
  /*<![CDATA[*/ 
/* Blogger Sitemap Dropdown: change i.src="..." with your url */ 
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 1000}; window.onload = function(){ !function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class="sitemapBox"><h4 class="sitemapTitle">'+n[g]+'</h4>',l+='<div class="sitemapContent"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'" title="'+o.replace(/ %new%$/,"")+'">'+o.replace(/ %new%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l }; var i=o.createElement("script");i.src="https://mr-medo.net/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document); } 
  /*]]>*/
</script>

صفحة اتصل بنا

لإضافة صفحة إتصل بنا الى مدونتك قم بتوليد الكود من مولد صفحة اتصل بنا.

المنشورات ذات الصلة

لاستخدام هذه الميزة المنشورات ذات الصلة قم بنسخ الكود التالي وقم باضافته الى الصفحة التي تريدها

<details class="sp toc" open="">
   <summary data-hide="اخفاء" data-show="اظهار">شاهد أيضاً :-</summary>  
   <div class="toC" id="aRel"></div>
</details>

زراير التحميل

لإضافة زر تحميل او معاينة، قم بنسخ الكود التالي ولصقه في المقال

<div class="btnF">
  <a class="button ln" href="url_is_here">مشاهدة</a>
  <a class="button" href="url_is_here"><i class="icon dl"></i>تحميل</a>
</div>

صندوق التحميل

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(#image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>Music_Wallpaper.png</span>
        <span data-text='Category'>Music</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

صناديق الاكواد

صندوق الاكواد الشكل الاول

لاضافه صناديق الاكواد قم بنسخ الاكواد التاليه

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl notranslate' data-text='.html'>
   <pre style='white-space:pre-wrap; max-height:400px;'>Your_code_is_here</pre>
</div>

صندوق الاكواد الشكل الثاني

<!--[ Replace data-text with any name to show, data-file with filename, data-lang with file extension, data-time with countdown in seconds ]-->
<div class='pre pu notranslate' data-time='5' data-text='Codebox Writing Format' data-file='Typography Codebox' data-lang='.html'>
   <pre style='white-space:pre-wrap; max-height:400px;'>Your_code_is_here</pre>
</div>

صندوق الاكواد الشكل الثالث

<div class="pre tb">
    <!--[ Active function ]-->
    <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked />
    <input class="prei hidden" id="preT-2" type="radio" name="preTab" />
    <input class="prei hidden" id="preT-3" type="radio" name="preTab" />
    <!--[ Header/title ]-->
    <div class="preH tbHd scrlH">
        <!--[ Change atribute data-text='...' to replace title ]-->
        <label for="preT-1" data-text="HTML"></label>
        <label for="preT-2" data-text="CSS"></label>
        <label for="preT-3" data-text="JS"></label>
    </div>

    <!--[ Content ]-->
    <div class="preC-1">
        <pre>Your_code_is_here</pre>
    </div>
    <div class="preC-2">
        <pre>Your_code_is_here</pre>
    </div>
    <div class="preC-3">
        <pre>Your_code_is_here</pre>
    </div>
</div>

اضافة الجدول

اضافة الجدول داخل المقال قم بنسخ الكود التي وضعه في الصفحة التي تريده ان يظهر بها

<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>

إضافة lazy load لفيديوهات اليوتيوب

لإضافة lazy load لفيديوهات اليوتيوب قم بنسخ الكود التالي ولصقه في المقال مع تغيير ID الخاص بالفيديو.

<!--[ 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>

اضافه الاكورديون

لاضافة الاكورديون قم بنسخ الكود التالي ثم اضفه الى المكان الذي تريده يظهر فيه.

<!--[ 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>

FAQ schema

لاضافة FAQ schema قم بنسخ الكود التالي ثم اضفه الى المكان الذي تريده يظهر فيه.

<!--[ Accordion start ]-->
<div class="showH" itemscope="" itemtype="https://schema.org/FAQPage">
    <!--[ Accordion line 1 ]-->
    <details class="ac" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
        <summary itemprop="name">Title_is_here</summary>
        <div class="aC" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <p itemprop="text">Your_text_is_here.</p>
        </div>
    </details>

    <!--[ Accordion line 2 ]-->
    <details class="ac alt" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
        <summary itemprop="name">Title_is_here</summary>
        <div class="aC" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <p itemprop="text">Your_text_is_here.</p>
        </div>
    </details>

    ...
    ...
</div>

مصدر الاكواد

ينتهي هنا موضوعنا عن "اكواد واضافات قالب Plus UI V2.6 "، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية

4 تعليقات

Blogger 1/20/2023 9:16 م

كيف أضيف جدول التنقل في نسخة مدفوعة حملتها مجانا
1. مستر ميدو 1/21/2023 7:47 ص
  
  لاضافه جدول محتويات الموضوع، عند كتابة المقالات قم بانشاء عناوين فرعية "h2,h3,h4"
عصام تميم 5/07/2024 3:24 ص

هل يمكن ان تحوله الى ملف اريد تحميل
غير معرف 8/07/2024 8:53 م

شكرا لك عندي سؤال كيف يمكنني ضبط اكواد الميتا تاج بالقالب و شكرا

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.

مستر ميدو