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

اسكربت تقسيم المقال إلى تبويبات حيث يمكنك استخدام هذه الاداه لتقسيم مقالاتك الى ثلاث تبويبات فى نفس الصفحه ويتميز هذا الاسكربت بسهوله الاستخدام.

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

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

وتعطى هذه الأداة شكلاً مميزاً للمقال الخاص بك حيث تحتوى لى ثلاث تبويبات مقسمة الى اجزاء 

وتم تكويد هذه الاضافه بلغتى html وcss و java script يمكنك معاينه الاضافه من خلال الزر التالى

معاينه

طريقة اضافة اسكربت تقسيم المقال إلى تبويبات الى مدونه بلوجر    

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيار المظهر ثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم     
.Blog .tabs-head{display:flex;border-bottom:1px solid #ebeced;margin-bottom:30px;font-size:13px} 
  .Blog .tabs-head > *:not(:last-child){margin-left:7px} 
  .Blog .tabs-head > *{padding:10px 5px;border:1px solid #ebeced;border-bottom:0;border-radius:4px 4px 0 0;position:relative;color:inherit;cursor:default} 
  .Blog .tabs-head > *:after{content:'';display:block;width:100%;height:1px;background-color: rgba(0, 90, 240, .50);position:absolute;right:0;bottom:-1px;visibility:hidden;opacity:0}
  .Blog .tabs-head > .active:after{opacity:1;visibility:visible}
  .Blog .tabs-content{position:relative} .Blog .tabs-content .b-tab{display:none;width:100%} 
  .Blog .tabs-content .b-tab.active{display:block}
3.قم بالبحث عن وسم </body> واضف الكود التالي أسفل الوسم
<script>  /*<![CDATA[*/function copyFunction(){document.getElementById("getlink").select(),document.execCommand("copy"),document.getElementById("shareNotif").innerHTML="<span>Link copied!</span>" };   function Tabs() { var bindAll = function() { var menuElements = document.querySelectorAll('[data-tab]'); for(var i = 0; i < menuElements.length ; i++) { menuElements[i].addEventListener('click', change, false); } }; var clear = function() {var menuElements = document.querySelectorAll('[data-tab]'); for(var i = 0; i < menuElements.length ; i++) { menuElements[i].classList.remove('active'); var id = menuElements[i].getAttribute('data-tab'); document.getElementById(id).classList.remove('active'); } }; var change = function(e) { clear(); e.target.classList.add('active'); var id = e.currentTarget.getAttribute('data-tab'); document.getElementById(id).classList.add('active'); }; bindAll(); } var connectTabs = new Tabs();   /*]]>*/ </script>
4.قم بنسخ الكود التالى  وقم باضافته فى صفحة المقال
<div class="tabs-head">
  <span class="tabs-nav active" data-tab="tab-1">تبويب1</span>
  <span class="tabs-nav" data-tab="tab-2">تبويب2</span>
  <span class="tabs-nav" data-tab="tab-3">تبويب3</span></div>
<div class="tabs-content">  
  <div class="b-tab" id="tab-1">
 <p><!--المحتوى--></p> 
  </div>
 <div class="b-tab" id="tab-2">
    <p><!--المحتوى--></p> 

  </div>
  
  <div class="b-tab active" id="tab-3">
 <p><!--المحتوى--></p> 
  </div>
</div>

تحميل الاكواد

splitting article into tabs.zip 1.28KB

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

الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

3 تعليقات

  1. Great Article on Blog design Css And Html Tutorials and Premium Blogger Themes Free Download

    Blog Name Techy Jeeshan
    Blog Url :- https://www.techyjeeshan.xyz/
  2. جزاك الله خيرا
    1. شكرا لك