اكواد واضافات قالب median ui v1.6

اكواد واضافات قالب median ui v1.6 حيث قام مطور القالب باجراء بعض التحديثات على القالب واطلاق النسخه median ui v1.6 وتم تغيير وتحديث الاضافات بالقالب

اكواد واضافات قالب median ui v1.6 حيث قام مطور القالب باجراء بعض التحديثات على القالب واطلاق النسخه  median ui v1.6 وتم تغيير وتحديث الاضافات بالقالب لذلك فان بعض من الاكواد الخاصه بالنسخه السابقه لن تعمل معك فى هذه النسخه الحديثه ويحتوى المقال على جميع الاكواد المتاحه ويتم تحديثه باستمرار .

اكواد واضافات قالب median ui v1.6

صفحات القالب

صفحة الأرشيف

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

<div class='postSection sitemaps' id='sitemaps'>
  <div class='loading'>جارى التحميل....</div>
</div>

<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: 0};
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://www.your_domain.com/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>

<style>
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;border:1px solid var(--content-border);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:'Label: '; 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}

.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
</style>

صفحة اتصل بنا

لإضافة صفحة إتصل بنا الى مدونتك قم بنسخ الكود التالى وقم باضافته داخل الصفحة الخاصة بك مع تغيير 000000000000000000 ب id الخاص بمدونتك واستبدال //www.your_domain.com/ برابط مدونتك

<div class="ContactForm s-2" id="ContactForm1">
  <form name="cForm">
    <div class="cArea">
      <label>
        <input class="cInpt cName" id="ContactForm1_contact-form-name" name="name" type="text">
        <span class="n">الاسم</span>
      </label>
    </div>
    <div class="cArea">
      <label>
        <input class="cInpt cMail" id="ContactForm1_contact-form-email" name="email" type="email">
        <span class="n req">الايميل</span>
      </label>
      <span class="h">مطلوب بريد إلكتروني صحيح</span>
    </div>
    <div class="cArea">
      <label>
        <textarea class="cInpt cMsg" id="ContactForm1_contact-form-email-message" name="message" rows="3"></textarea>
        <span class="n req">الرساله</span>
      </label>
      <span class="h">الرسائل الفارغة غير مقبولة</span>
    </div>
    <div class="cArea">
      <input class="cBtn" id="ContactForm1_contact-form-submit" type="button" value="ارسال">
    </div>
    <div class="cArea nArea">
      <p class="cNtf" id="ContactForm1_contact-form-error-message"></p>
      <p class="cNtf" id="ContactForm1_contact-form-success-message"></p>
    </div>
  </form>
</div>


<script>/*<![CDATA[*/ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '0000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\0000000000000000000','//www.your_domain.com/','0000000000000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جارى الارسال....', 'contactFormMessageSentMsg': 'تم ارسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة. الرجاء معاودة المحاولة في وقت لاحق.', 'contactFormInvalidEmailMsg': 'مطلوب عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '0000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); var inputs = document.querySelectorAll('.widget input[type=text], .widget input[type=email], .widget textarea'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() {var bg = this.value ? 'fl' : 'nfl'; this.setAttribute('data-text',bg);}); } /*]]>*/</script>

تقسيم المقال إلى تبويبات


لاستخدام هذه الميزة قم بنسخ الكود التالى وقم باضافته الى الصفحة التى تريدها
<!--[ Active function ]-->
<input class="tbIn hidden" id="fTabs-1" type="radio" name="postTabs" checked="">
<input class="tbIn hidden" id="fTabs-2" type="radio" name="postTabs">
<input class="tbIn hidden" id="fTabs-3" type="radio" name="postTabs">

<!--[ Tabs header/title ]-->
<div class="tbHd scrlH">
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for="fTabs-1" data-text="التبويب الاول"></label>
  <label for="fTabs-2" data-text="التبويب الثانى"></label>
  <label for="fTabs-3" data-text="التبويب الثالث"></label>
</div>

<div class="tbCn">
  <!--[ Tabs content ]-->
  <div class="tbText-1">
    <p class="pIndent">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.</p>
    <a name="more"></a>
    
 
      
    <!--[ To break paragraphs apart ]-->
    <hr>
    
    <h2 id="Sample_text_to_extend_content">عنوان</h2>

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

  </div>

  <!--[ Tabs content ]-->
  <div class="tbText-2">
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً</p>
   
  </div>

  <!--[ Tabs content ]-->
  <div class="tbText-3">
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد</p>
      

  </div>
</div>

تقسيم المقال الى صفحات


لاستخدام هذه الميزة قم بنسخ الكود التالى وقم باضافته الى الصفحة التي تريدها
<div id='postSplit'>
  <p>الصفحه 1</p>
  
  <!--nextpage-->
  <p>الصفحه 2</p>
  
  <!--nextpage-->
  <p>الصفحه 3</p>

</div>
<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', function() {function checkChildren(nodes, elemId){for(i=0;i<nodes.length;i++){if(nodes[i].id==elemId){return nodes[i];}else{return checkChildren(nodes[i].children, elemId);}}} function isNumeric(value) {var type = typeof value; return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));} var nodes = document.querySelector('div.postBody').children; var splitdong = checkChildren(nodes, 'postSplit').innerHTML; var content = splitdong.split('<!--nextpage-->'); var url = window.location.href; var url = url.split('?page='); var no = url[1] + '&m=4'; var no = no.split('m'); var no = no[0]; var no = no.replace('&', ''); var url = url[0]; var i = 1; if( !isNumeric(no) ){var no = 1;} document.getElementById('postSplit').innerHTML = content[no-1]; if( content.length > 1 ) {document.getElementById('postSplit').innerHTML += "<div class='blogPg' id='postPager'><span class='page current'>الصفحات :</span></div>";} if( no>1 ){document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>التالى</a>";} }); /*]]>*/</script>

اكواد القالب

اضافة الجدول

اضافة الجدول قم بنسخ الكود التى وضعه فى الصفحة التى تريده ان يظهر بها
<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>الرقم</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>العمود 1</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>العمود 2</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>العمود 3</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>العمود 4</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

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

لاضافة الاكورديون قم بنسخ الكود التالى ثم اضفه الى الصفحه التى تريده ان يظهر بها
<div class="showH">
  <!--[ Accordion line 1 ]-->
  <details class="ac">
    <summary>عنوان 1</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class="ac">
    <summary>عنوان 2</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class="ac">
    <summary>عنوان 3</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class="ac alt">
    <summary>عنوان 4</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
</p>
    </div>
  </details>
</div>

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

لإضافة  lazy load لفيديوهات اليوتيوب قم بنسخ الكود التالى وضعه فى الصفحة التى تريده ان يظهر بها مع تعديل kvazBqAlx58 بالجزء الأخير المحدد فى الرابط التالىhttps://www.youtube.com/watch?v=mNOdyNNRSrM
<div class="lazyYt" data-embed="mNOdyNNRSrM">
  <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>
<img class="lazy loaded" data-src="https://img.youtube.com/vi/mNOdyNNRSrM/sddefault.jpg" src="https://img.youtube.com/vi/mNOdyNNRSrM/sddefault.jpg" alt="Youtube video" lazied=""></div>

بلوك عرض الصور1

لاضافه هذا البلوك قم بنسخ الكود التالى واصفه فى الصفحه الخاصه بك
<div class="psImg grImg">
  <div class="zmImg"><img alt="Construction of New Highway" class="lazy loaded" data-src="https://4.bp.blogspot.com/-gKklUjwsSuw/X1WnJvVWI6I/AAAAAAAAP50/UCZJ-5NGkekM1OQOK3hF1I4Hs5ezOM6-wCNcBGAsYHQ/s0/travel-construction-of-new-highway.jpg" src="https://4.bp.blogspot.com/-gKklUjwsSuw/X1WnJvVWI6I/AAAAAAAAP50/UCZJ-5NGkekM1OQOK3hF1I4Hs5ezOM6-wCNcBGAsYHQ/s0/travel-construction-of-new-highway.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Langtang Tracking Major Attraction" class="lazy loaded" data-src="https://4.bp.blogspot.com/-stXwGcMPsng/X1WnMBXeaII/AAAAAAAAP6A/E81lmwRuYZcnJoGFyiJLu5cAOu2-N1mggCNcBGAsYHQ/s0/travel-langtang-tracking.jpg" src="https://4.bp.blogspot.com/-stXwGcMPsng/X1WnMBXeaII/AAAAAAAAP6A/E81lmwRuYZcnJoGFyiJLu5cAOu2-N1mggCNcBGAsYHQ/s0/travel-langtang-tracking.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="De Spain Preparations" class="lazy loaded" data-src="https://4.bp.blogspot.com/-gqdiJCWH8t4/X1WgzcA33nI/AAAAAAAAP5E/lQw0SAxTdEU11P1RHcXaK0iAy38WAoPkwCNcBGAsYHQ/s0/sport-de-spain-preparations.jpg" src="https://4.bp.blogspot.com/-gqdiJCWH8t4/X1WgzcA33nI/AAAAAAAAP5E/lQw0SAxTdEU11P1RHcXaK0iAy38WAoPkwCNcBGAsYHQ/s0/sport-de-spain-preparations.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Boating Experience in Pokhara" class="lazy loaded" data-src="https://4.bp.blogspot.com/-vFEJV8v5Bms/X1WnI01Q71I/AAAAAAAAP5w/do4OYrEPQBAcceIkM2sq9fcQbnhca9nOQCNcBGAsYHQ/s0/travel-boating-experience.jpg" src="https://4.bp.blogspot.com/-vFEJV8v5Bms/X1WnI01Q71I/AAAAAAAAP5w/do4OYrEPQBAcceIkM2sq9fcQbnhca9nOQCNcBGAsYHQ/s0/travel-boating-experience.jpg" onclick="return false" lazied=""></div>
</div>

بلوك عرض الصور2

لاضافه هذا البلوك قم بنسخ الكود التالى واصفه فى الصفحه الخاصه بك
<input class="inImg hidden" id="for-hideImage" type="checkbox">
<div class="psImg hdImg">
  <div class="zmImg"><img alt="Construction of New Highway" class="lazy loaded" data-src="https://4.bp.blogspot.com/-gKklUjwsSuw/X1WnJvVWI6I/AAAAAAAAP50/UCZJ-5NGkekM1OQOK3hF1I4Hs5ezOM6-wCNcBGAsYHQ/s0/travel-construction-of-new-highway.jpg" src="https://4.bp.blogspot.com/-gKklUjwsSuw/X1WnJvVWI6I/AAAAAAAAP50/UCZJ-5NGkekM1OQOK3hF1I4Hs5ezOM6-wCNcBGAsYHQ/s0/travel-construction-of-new-highway.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Langtang Tracking Major Attraction" class="lazy loaded" data-src="https://4.bp.blogspot.com/-stXwGcMPsng/X1WnMBXeaII/AAAAAAAAP6A/E81lmwRuYZcnJoGFyiJLu5cAOu2-N1mggCNcBGAsYHQ/s0/travel-langtang-tracking.jpg" src="https://4.bp.blogspot.com/-stXwGcMPsng/X1WnMBXeaII/AAAAAAAAP6A/E81lmwRuYZcnJoGFyiJLu5cAOu2-N1mggCNcBGAsYHQ/s0/travel-langtang-tracking.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="De Spain Preparations" class="lazy loaded" data-src="https://4.bp.blogspot.com/-gqdiJCWH8t4/X1WgzcA33nI/AAAAAAAAP5E/lQw0SAxTdEU11P1RHcXaK0iAy38WAoPkwCNcBGAsYHQ/s0/sport-de-spain-preparations.jpg" src="https://4.bp.blogspot.com/-gqdiJCWH8t4/X1WgzcA33nI/AAAAAAAAP5E/lQw0SAxTdEU11P1RHcXaK0iAy38WAoPkwCNcBGAsYHQ/s0/sport-de-spain-preparations.jpg" onclick="return false" lazied=""></div>
  
  <div class="btImg">
    <div class="zmImg"><img alt="Boating Experience in Pokhara" class="lazy loaded" data-src="https://4.bp.blogspot.com/-vFEJV8v5Bms/X1WnI01Q71I/AAAAAAAAP5w/do4OYrEPQBAcceIkM2sq9fcQbnhca9nOQCNcBGAsYHQ/s0/travel-boating-experience.jpg" src="https://4.bp.blogspot.com/-vFEJV8v5Bms/X1WnI01Q71I/AAAAAAAAP5w/do4OYrEPQBAcceIkM2sq9fcQbnhca9nOQCNcBGAsYHQ/s0/travel-boating-experience.jpg" onclick="return false" lazied=""></div>
    
    <!--[ 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">
    <div class="zmImg"><img alt="Construction of New Highway" class="lazy loaded" data-src="https://4.bp.blogspot.com/--E3z5dTtVDc/X1xBrsGADOI/AAAAAAAAP8g/Yk8h3YSDuhAnMLrhJ97Wd0CmwCNV3iPsACNcBGAsYHQ/s0/techno-ieso-sportscar.jpg" src="https://4.bp.blogspot.com/--E3z5dTtVDc/X1xBrsGADOI/AAAAAAAAP8g/Yk8h3YSDuhAnMLrhJ97Wd0CmwCNV3iPsACNcBGAsYHQ/s0/techno-ieso-sportscar.jpg" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Langtang Tracking Major Attraction" class="lazy loaded" data-src="https://4.bp.blogspot.com/-_mnsQFhSQ34/X1w3YtH1htI/AAAAAAAAP7Y/xsiI5t-qSTwJMd1Ej-KV8I-9KHOXyXO5gCPcBGAYYCw/s0/research-snow-forecast.jpg" src="https://4.bp.blogspot.com/-_mnsQFhSQ34/X1w3YtH1htI/AAAAAAAAP7Y/xsiI5t-qSTwJMd1Ej-KV8I-9KHOXyXO5gCPcBGAYYCw/s0/research-snow-forecast.jpg" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="De Spain Preparations" class="lazy loaded" data-src="https://4.bp.blogspot.com/-ylk9lSXnyVQ/X1wxrMXLvDI/AAAAAAAAP7M/osH_RQo8VV8pXY1npAfKVjry6jL4H1ohgCNcBGAsYHQ/s0/adventure-rafting.jpg" src="https://4.bp.blogspot.com/-ylk9lSXnyVQ/X1wxrMXLvDI/AAAAAAAAP7M/osH_RQo8VV8pXY1npAfKVjry6jL4H1ohgCNcBGAsYHQ/s0/adventure-rafting.jpg" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Boating Experience in Pokhara" class="lazy loaded" data-src="https://4.bp.blogspot.com/-LC-FkBLgrDs/X1WnKXVsx0I/AAAAAAAAP54/4wEMz9GtToUCM5DkwYVOfY-7IuGhgcM-gCNcBGAsYHQ/s0/travel-cycling-on-mountain.jpg" src="https://4.bp.blogspot.com/-LC-FkBLgrDs/X1WnKXVsx0I/AAAAAAAAP54/4wEMz9GtToUCM5DkwYVOfY-7IuGhgcM-gCNcBGAsYHQ/s0/travel-cycling-on-mountain.jpg" onclick="return false" lazied=""></div>
  </div>
</div>

بلوك عرض الصور3

لاضافه هذا البلوك قم بنسخ الكود التالى واصفه فى الصفحه الخاصه بك
<div class="psImg scImg scrlH">
  <div class="zmImg"><img alt="Construction of New Highway" class="lazy loaded" data-src="https://4.bp.blogspot.com/-gKklUjwsSuw/X1WnJvVWI6I/AAAAAAAAP50/UCZJ-5NGkekM1OQOK3hF1I4Hs5ezOM6-wCNcBGAsYHQ/s0/travel-construction-of-new-highway.jpg" src="https://4.bp.blogspot.com/-gKklUjwsSuw/X1WnJvVWI6I/AAAAAAAAP50/UCZJ-5NGkekM1OQOK3hF1I4Hs5ezOM6-wCNcBGAsYHQ/s0/travel-construction-of-new-highway.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Langtang Tracking Major Attraction" class="lazy loaded" data-src="https://4.bp.blogspot.com/-stXwGcMPsng/X1WnMBXeaII/AAAAAAAAP6A/E81lmwRuYZcnJoGFyiJLu5cAOu2-N1mggCNcBGAsYHQ/s0/travel-langtang-tracking.jpg" src="https://4.bp.blogspot.com/-stXwGcMPsng/X1WnMBXeaII/AAAAAAAAP6A/E81lmwRuYZcnJoGFyiJLu5cAOu2-N1mggCNcBGAsYHQ/s0/travel-langtang-tracking.jpg" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="De Spain Preparations" class="lazy loaded" data-src="https://4.bp.blogspot.com/-gqdiJCWH8t4/X1WgzcA33nI/AAAAAAAAP5E/lQw0SAxTdEU11P1RHcXaK0iAy38WAoPkwCNcBGAsYHQ/s0/sport-de-spain-preparations.jpg" src="https://4.bp.blogspot.com/-gqdiJCWH8t4/X1WgzcA33nI/AAAAAAAAP5E/lQw0SAxTdEU11P1RHcXaK0iAy38WAoPkwCNcBGAsYHQ/s0/sport-de-spain-preparations.jpg" onclick="return false" lazied=""></div>
</div>

اضافه spoiler (قائمه منسدله بزر)

لاضافه   الspoiler  قم بنسخ الكود التالى واضفه فى الصفحة الخاصة بك
<details class="sp notranslate">
  <summary data-show="Show all" data-hide="Hide all">Spoiler:</summary>
  <p>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</p>
  
</details>

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

لاضافه صندوق التحميل قم بنسخ الكود التالى واضفه الى الصفحه التى تريد ان يظهر بها الصندوق التحميل
<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="javascript:;"><i class="icon dl"></i></a>
</div>

الملاحظات

رسآلة التحذير

لاضافه هذه  الرساله قم بنسخ الكود التالى واضفه الى الصفحه التى تريد ان يظهر بها
<p class="note wr notranslate"><b>تحذير!</b><br>الرساله</p>

رسالة معلومه

لاضافه هذه  الرساله قم بنسخ الكود التالى واضفه الى الصفحه التى تريد ان يظهر بها
<p class="note notranslate">الرساله</p>

ازرار القالب


لاضافه ازرار القالب قم بنسخ الكود التالى واضفه الى الصفحه التى تريد ان يظهر بها الازرار
<a class="extL" href="javascript:;">رابط خارجى</a>
<a class="button" href="javascript:;">زر</a>
<a class="button ln" href="javascript:;"><i class="icon dl"></i>تحميل</a>
<a class="button" href="javascript:;"><i class="icon dl"></i>تحميل</a>
<a class="button" href="javascript:;"><i class="icon demo"></i>معاينه</a>
<div class="btnF">
  <a class="button ln" href="javascript:;">معاينه</a>
  <a class="button" href="javascript:;"><i class="icon dl"></i>تحميل</a>
</div>

اضافه علامات على النص

علامه على الكود

لاضافه هذه  العلامه قم بنسخ الكود التالى واضفه النص بداخلها
<span class="hljs-string"><mark>كود</mark></span>

علامه على النص

لاضافه هذه  العلامه قم بنسخ الكود التالى واضفه النص بداخلها
<code>نص</code>

اضافه فاصل

لاضافه فاصل قم بنسخ الكود التالى واضفه  فى المكان الذى تريد ان يظهر فيه
<i class="separate"></i>

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

لاضافه صناديق الاكواد قم بنسخ الاكواد التاليه
<div class="pre html"><pre>الكود</pre></div>
<div class="pre css"><pre>الكود</pre></div>
<div class="pre js"><pre>الكود</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>html</pre>
  </div>
  <div class="preC-2">
    <pre>css</pre>
  </div>
  <div class="preC-3">
    <pre>JS </pre>
  </div>
</div>
الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

إرسال تعليق