شرح اضافة سلايدر لموقعك من خلال مكتبة UIKIT

الأربعاء، 1 أبريل 2020

شرح اضافة سلايدر لموقعك من خلال مكتبة UIKIT

مكتبة UIKIT وشرح وضع سلايدر في موقعك من خلال هذه المكتبة الرائعة لمدونات بلوجر .

شرح اضافة سلايدر لموقعك من خلال مكتبة UIKIT

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

شرح وضع أكواد مكتبة UIKIT

معاينة الاضافة/preview/button

اولا قم بالذهاب الي لوحة ادارة بلوجر الخاصة بك ثم المظهر ثم توجه الي تعديل HTML وقم بالبحث عن هذا الكود <head> وضع هذه الأكواد أسفله
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.6/dist/css/uikit.min.css" />
    
    <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> code-box
بهذه الطريقة أنت وضعت أكواد المكتبة داخل المدونة وتستطيع التمتع بكل مزايا المكتبة من خلال مواضيع سابقة ومواضيع سنضعها في المستقبل ان شاء الله ، نأتي لوضع السلايدر وطريقة وضعه بسيطة جدا

شرح وضع السلايدر داخل موقعك

كل ماعليك هوالذهاب الي التخطيط ثم اضافة أداة HTML/JAVASCRIPT أعلي الرسائل وان لم تستطيع اضافة أدوات اعلي رسائل المدونة فقم بقراءة درس كيفية اضافة اعلان أعلي المقالات لمدونات بلوجر سيفيدك
وبعد اضافة الاداة قم بوضع هذه الأكواد بداخلها .
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">

    <ul class="uk-slider-items uk-grid">
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuFev9cnjNu7vFxii8g2qYLaYlod50JBlRnq1GzMCEksjkbZhOK__F3Mt3vUylDI8ZJkYKKEdC4Nn9it0n4x6XL5V8jJnq5ZwjWhoqMUHb098FgInTAPlerGbdgOlstESBcpjTrrS9vl4/s1600/jpgaaaa.png" alt="" />
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFrqWihIWx2yjV4WyqMFHCUz4pi5Ws3p4EDikyZS3BwhpVAK3TlF3RcRD0PAs83zOXG792zQrgZNawmI3iMx5C7fsWTpDOgJ5YgkBM_lAIK72c16hSq90TIIyQXwSW3roN6dPSNdq4Mg4/s1600/a0297076d4af40d4be532966e4544f86-1578792435986.png" alt="" />
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg049AFB6_9pV7im_jnt4F-FzABdjBfIttlASTVQsEEDwuzRtxNS14WtAtlTjgtS_KqqJs9Sy9yba2CcuAYD_nKbAaMjThGx0g6qFRtPD_Q57W5Ys_ievEv3W21TbpopmX35kraEejistQ/s1600/dacity+Graduation+Certificate+-+8f96ddf4-c9bf-4503-872f-2291b52c9d2f+pdf.png" alt="" />
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKHJxgD9NemhhqaYpTcmo7npumu73kM14E9pCzZ-MTm_Ga7a4H0Z1qmaq5_CwTQBOC5uWRJDvx7M0c3nANKiGar_FuaecfuiPJjOhnB9HGxrytdai727I7KidzqIf3F2Yp2QwGifaVfqs/s1600/SEMrush-Academy-Certificate-c3d1b71323cdf9bfb37e49e318777ca6d02313dc3721c5230a7f7c04aea496b2.png" alt="" />
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_yQUNhFow6lt3tR_WhZq9ocvjGsKMEOX1uPR72fUZhJ89rh75HqCw2spu6VSa4IDb528p3BACKbxyIFBZxDwPjJoShb4Aqz_RkKYOlCa2YCG-e6TZuqj_-d3Esdx2MsseYdy3p2yElEg/s1600/Screenshot_2019-06-08+Digital+Garage+Certificate+-+%25D9%2585%25D9%2587%25D8%25A7%25D8%25B1%25D8%25A7%25D8%25AA+%25D9%2585%25D9%2586+Google+pdf.png" alt="" />
                <div class="uk-position-center uk-panel"><h1>5</h1></div>
            </div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"style="color: #000;"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"style="color: #000;"></a>

</div> code-box

الروابط الملونة بـ اللون الأحمر هي روابط الصور قم بتغييرها بـ الصور التي تريدها
بعد حفظ الأداة ستجد السلايدر مثل هذه الصورة تماما

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