كيفية وضع خاصية 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">ثم قم بحفظ القالب وستجد ان خاصية 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>
لاتنسي زيارة قسم بلوجر لمزيد من المقالات والشروحات واذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا, او اذا كنت تريد شرح معين عن أي شي في بلوجر أو SEO أو ادسنس لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع
تعليقات
إرسال تعليق