كيفية وضع خاصية Tabs في موقعك

كيفية وضع خاصية Tabs في موقعك 

اضافة اداة tabs في موقعك داخل المواضيع أو في أي مكان أخر 

اضافة اداة tabs في موقعك

اليوم اضافة جديد لمدونين بلوجر وهي اضافة Tabs وهي نوافذ متصلة تفيد أصحاب المواقع واداة اليوم تابعة لمكتبة UIKIT الذي قمت بوضع العديد من المقالات لها سابقا مثل اداة التواصل الاجتماعي أو اداة الاكورديون أو القائمة الجانبية البسيطة أو رسائل التنبيه , لمن لا يعرف هذه المكتبة هي مكتبة اكواد سريعة ومتجاوبة والمميز بها أنها تدعم اتجاه العربية (RTL) وهي المنافسة للبوتستراب . 
قبل الدخول في شرح وضع الاضافة البسيطة سنشرح 

كيفية وضع مكتبة UIKIT داخل موقعك   

قم بفتح المظهر ثم تعديل HTML ثم ابحث عن <head> وضع هذه الأكواد أسفله 
  <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.6/dist/css/uikit.min.css" />
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.6/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.6/dist/js/uikit-icons.min.js"></script>
ثم قم بحفظ القالب وتكون بهذه الطريقة أضفت المكتبة الي موقعك , ندخل في شرح وضع الاضافة نفسها 

وضع tabs داخل موقعك

قم بانشاء موضوع جديد واتجه الي HTML أو اتجه الي التخطيط ثم اضف أداة HTML/JAVASCRIPT ثم قم باضافة هذا الكود 
    <div class="horizontal_tabs">
     <ul data-uk-tab="connect: #tabs_ex_1; animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">
      <li class="uk-active"><a href="#">Tab 1</a></li>
      <li><a href="#">Tab 2</a></li>
      <li><a href="#">Tab 3</a></li>
     </ul>
     <ul id="tabs_ex_1" class="uk-switcher">
      <li class="uk-active">لا يمكن الممكن لانه يمكن ان يكون ممكن فكن من الكون.</li>
      <li>   يفضل استخدام قالب تنظيف قبل وضع القالب وينصح ايضا وضع القالب يدويا لتجنب الأخطاء </li>
      <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
     </ul>
    </div>
ثم قم بحفظ القالب وستجد ان خاصية TABS تعمل بدون أي مشاكل وهذه صور معاينة للاضافة 


وغير الجمل بالجمل التي تناسبك وأيضا يمكنك وضع روابط في النوافذ نفسها عن طريق وضع رابط المطلوب بدلا من علامة # 

  لاتنسي زيارة قسم بلوجر  لمزيد من المقالات والشروحات واذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا,  او اذا كنت تريد  شرح معين عن  أي شي في بلوجر أو SEO أو ادسنس لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع

ارسال تعليق

أحدث أقدم