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

اكواد واضافات قالب median ui v1.5 هذا هو موضوعنا فبالرغم من توفر قالب median ui v1.5 الا ان اكواده ليست متوفره لانها تاتى مع القالب الذي تم شراءه .

اكواد واضافات قالب median ui v1.5 هذا هو موضوعنا فبالرغم من توفر قالب median ui v1.5 الا ان اكواده ليست متوفره لانها تاتى مع القالب الذي تم شراءه لذلك فمعظم الأشخاص لا يستطيع استخدام ميزات القالب وذلك بسبب عدم توفر الاكواد الخاصه بالقالب ولاكن فى هذا المقال سنضع جميع الاكواد التى يمكنك استخدامها.

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

صفحات القالب

1. صفحة الأرشيف

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

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

2. صفحة اتصل بنا

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

<p>يرجى الاتصال بنا للمشتريات أو الإبلاغ عن الأخطاء من خلال هذا النموذج</p>

<div class='ContactForm' id='ContactForm1'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'>الاسم</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' />
    </div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'>الايميل <span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' />
    </div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'>الرساله <span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea>
    </div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='ارسال' />
    </div>
    <div class='notif-area'>
      <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
      <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
  </form>
</div>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '000000000000000000
';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d000000000000000000','//www.your_domain.com/','000000000000000000');_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': '000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

3. صفحة المنتج

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

<div class='separator'>
  <img alt='Image_title' src='Image_src' />
</div>

<!--[ Price to show in homepage ]-->
<div class='proPrice' data-text='السعر'>$ 200</div>
<!--more-->

<div class='proInfo'>
  <div class='proInfoL'><small>الحجم</small><span>صغير, متوسط, كبير, كبير جدا</span></div>
  <div class='proInfoR'><small>اللون</small><span>احمر, اصفر, ابيض, أزرق</span></div>
</div>
<div class='proInfo one'><small>عينة</small><span>لا يوجد أداء للقرض</span></div>

<div class='proMarket'>
  <small>يمكنك التسوق عبر "<b>المتاجر</b>المفضلة لديك:</small>
  
  <!--[ Change attribute href='#' to add url ]-->
  <a title='Tokopedia' href='#' target='_blank' rel='noopener'>
    <img class='lazy' data-src='https://cdn.statically.io/favicons/tokopedia.com' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
  </a>
  <a title='Bukalapak' href='#' target='_blank' rel='noopener'>
    <img class='lazy' data-src='https://cdn.statically.io/favicons/bukalapak.com' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
  </a>
  <a title='Shopee' href='#' target='_blank' rel='noopener'>
    <img class='lazy' data-src='https://cdn.statically.io/favicons/shopee.co.id' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
  </a>
  <a title='Lazada' href='#' target='_blank' rel='noopener'>
    <img class='lazy' data-src='https://cdn.statically.io/favicons/lazada.co.id' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
  </a>
</div>

<!--[ Active function ]-->
<input class='allTabs hidden' id='forall-tabs1' type='radio' name='postTabs' checked>
<input class='allTabs hidden' id='forall-tabs2' type='radio' name='postTabs'>
<input class='allTabs hidden' id='forall-tabs3' type='radio' name='postTabs'>
<div class='postTabs'>
  <div class='tabsHead'>
    <!--[ Change atribute data-text='...' to replace tabs title ]-->
    <label for='forall-tabs1' data-text='التبويب الاول'></label>
    <label for='forall-tabs2' data-text='التبويب الثانى'></label>
    <label for='forall-tabs3' data-text='التبويب الثالث'></label>
  </div>

  <div class='tabsContent'>
    <!--[ Tabs content ]-->
    <div class='tabsContent-1'>

      <!--[ Your content goes here ]-->

    </div>

    <!--[ Tabs content ]-->
    <div class='tabsContent-2'>

      <!--[ Your content goes here ]-->

    </div>

    <!--[ Tabs content ]-->
    <div class='tabsContent-3'>

      <!--[ Your content goes here ]-->

    </div>
  </div>
</div>

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


لاستخدام هذه الميزة قم بنسخ الكود التالى وقم باضافته الى الصفحة التى تريدها
<!--[ Active function ]-->
<input class='allTabs hidden' id='forall-tabs1' type='radio' name='postTabs' checked>
<input class='allTabs hidden' id='forall-tabs2' type='radio' name='postTabs'>
<input class='allTabs hidden' id='forall-tabs3' type='radio' name='postTabs'>
<div class='postTabs'>
  <div class='tabsHead'>
    <!--[ Change atribute data-text='...' to replace tabs title ]-->
    <label for='forall-tabs1' data-text='تبويب'></label>
    <label for='forall-tabs2' data-text='تبويب'></label>
    <label for='forall-tabs3' data-text='تبويب'></label>
  </div>

  <div class='tabsContent'>
    <!--[ Tabs content ]-->
    <div class='tabsContent-1'>
      <p>1النص هنا</p>
    </div>

    <!--[ Tabs content ]-->
    <div class='tabsContent-2'>
      <p>2النص هنا</p>
    </div>

    <!--[ Tabs content ]-->
    <div class='tabsContent-3'>
      <p>3النص هنا</p>
    </div>
  </div>
</div>

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


لاستخدام هذه الميزة قم بنسخ الكود التالى وقم باضافته الى الصفحة التي تريدها
<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='postNav' 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>

اكواد القالب

1.اضافة الجدول

اضافة الجدول قم بنسخ الكود التى وضعه فى الصفحة التى تريده ان يظهر بها
<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>عنوان</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>عنوان</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>عنوان</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>عنوان</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>

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

لاضافة الاكورديون قم بنسخ الكود التالى ثم اضفه الى الصفحه التى تريده ان يظهر بها
<ul class="accordion">
  <!--[ Accordion line 1 ]-->
  <li>
    <div class="accorContent">
      <input class="accorMenu hidden" id="offaccor-menu1" name="accordion-menu" type="checkbox">
      <label class="accorTitle" for="offaccor-menu1">
        <i class="accorIcon"></i>
        
        <!--[ Question ]-->
        <span>عنوان1</span>
      </label>

      <!--[ Answer ]-->
      <div class="content">
        <p>هذا النص هو مثال لنص يمكن ان يستبدل فى نفس المساحه</p>
        
        <p>هذا النص هو مثال لنص يمكن ان يستبدل فى نفس المساحه</p>
      </div>
    </div>
  </li>
  
  <!--[ Accordion line 2 ]-->
  <li>
    <div class="accorContent">
      <input class="accorMenu hidden" id="offaccor-menu2" name="accordion-menu" type="checkbox">
      <label class="accorTitle" for="offaccor-menu2">
        <i class="accorIcon"></i>
        
        <!--[ Question ]-->
        <span>عنوان2</span>
      </label>

      <!--[ Answer ]-->
      <div class="content">هذا النص هو مثال لنص يمكن ان يستبدل فى نفس المساحه</div>
    </div>
  </li>
  
  <!--[ Accordion line 3 ]-->
  <li>
    <div class="accorContent">
      <input class="accorMenu hidden" id="offaccor-menu3" name="accordion-menu" type="checkbox">
      <label class="accorTitle" for="offaccor-menu3">
        <i class="accorIcon"></i>

        <!--[ Question ]-->
        <span>عنوان3</span>
      </label>

      <!--[ Answer ]-->
      <div class="content">هذا النص هو مثال لنص يمكن ان يستبدل فى نفس المساحه</div>
    </div>
  </li>
</ul>

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

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

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

لاضافه هذا البلوك قم بنسخ الكود التالى واصفه فى الصفحه الخاصه بك
<div class="gridImage">
  <img alt="Construction of New Highway" class=" lazyloaded" 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">
  <img alt="Langtang Tracking Major Attraction" class=" lazyloaded" 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">
  <img alt="De Spain Preparations" class=" lazyloaded" 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">
  <img alt="Boating Experience in Pokhara" class=" lazyloaded" 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">
</div>

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

لاضافه هذا البلوك قم بنسخ الكود التالى واصفه فى الصفحه الخاصه بك
<div class="scrollImage">
  <img alt="Construction of New Highway" class=" ls-is-cached lazyloaded" 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">
  <img alt="Langtang Tracking Major Attraction" class=" ls-is-cached lazyloaded" 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">
  <img alt="De Spain Preparations" class=" ls-is-cached lazyloaded" 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">
</div>

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

لاضافه هذا البلوك قم بنسخ الكود التالى واصفه فى الصفحه الخاصه بك
<input class="imageInput hidden" id="for-hideImage" type="checkbox">
<div class="hideImage">
  <img alt="Construction of New Highway" class=" ls-is-cached lazyloaded" 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">
  <img alt="Langtang Tracking Major Attraction" class=" ls-is-cached lazyloaded" 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">
  <img alt="De Spain Preparations" class=" ls-is-cached lazyloaded" 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">
  
  <div class="buttonImage">
    <img alt="Boating Experience in Pokhara" class=" ls-is-cached lazyloaded" 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">
    
    <!--[ Button image to activate ]-->
    <label for="for-hideImage" aria-label="Show all image"></label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class="showImage">
    <img alt="Construction of New Highway" class=" lazyloaded" 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">
    <img alt="Langtang Tracking Major Attraction" class=" lazyloaded" 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">
    <img alt="De Spain Preparations" class=" lazyloaded" 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">
    <img alt="Boating Experience in Pokhara" class=" lazyloaded" 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">
  </div>
</div>

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

لاضافه   الspoiler  قم بنسخ الكود التالى واضفه فى الصفحة الخاصة بك
<div class="spoiler">
  <input class="spoilerInput hidden" id="spoiler-01" type="checkbox">
  <div class="spoilerTitle">
    <!--[ Show/hide Title ]-->
    <b>عنوان</b>
    <label for="spoiler-01"></label>
  </div>
  
  <!--[ Show/hide content ]-->
  <div class="spoilerContent">
    <p>هذا النص هو مثال لنص يمكن ان يستبدل فى نفس المساحه</p>
    
    <p>هذا النص هو مثال لنص يمكن ان يستبدل فى نفس المساحه</p>
  </div>
</div>

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

لاضافه صندوق التحميل قم بنسخ الكود التالى واضفه الى الصفحه التى تريد ان يظهر بها الصندوق التحميل
<div class="downloadInfo">
  <span class="fileType" data-text="zip"></span>
  <div class="fileName">
    <span>file_name.zip</span>
    <span class="fileSize">200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a aria-label="Download" class="button fileLink" href="javascript:;"><i class="icon download"></i></a>
</div>

9. الملاحظات

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

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

2.رسالة معلومه

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

10.ازرار القالب




لاضافه ازرار القالب قم بنسخ الكود التالى واضفه الى الصفحه التى تريد ان يظهر بها الازرار
<a class="button" href="#" rel="nofollow" target="_blank"><i class="icon download"></i>معاينه</a>
<a class="button outline" href="javascript:;"><i class="icon download"></i>تحميل</a>
<a class="button" href="javascript:;"><i class="icon cart"></i>شراء الان</a>
<a class="button whatsapp" href="javascript:;"><i class="icon whatsapp"></i>Whatsapp me</a>
<a class="extLink alt" href="javascript:;">رابط خارجى</a>
<a class="button" href="javascript:;">زر</a>
<div class="buttonInfo">
  <a class="button" href="javascript:;"><i class="icon download"></i>تحميل</a>
  <a class="button outline" href="javascript:;">معاينه</a>
</div>

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

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

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

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

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

3.اضافه فاصل

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

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

لاضافه صناديق الاكواد قم بنسخ الاكواد التاليه
<pre class="js"><code>كود</code></pre>
<pre class="css"><code>كود</code></pre>
<pre class="html"><code>كود</code></pre>
الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

إرسال تعليق