الجمعة، 21 فبراير 2020

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

 إضافة قائمة جانبية بسيطة لمدونات بلوجر
الجمعة، 21 فبراير 2020

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

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

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

كيفية اضافة قائمة جانبية احترافية لمدونات بلوجر ؟

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


كما رأيت في زر اضغط هنا في الصورة الأولي , عند الضغط علي الزر ستقوم بفتح قائمة جانبية مثل الصورة رقم 2 , ماهي الأكواد التي قمنا بوضعها ؟ 
الشرح 
لا تحتاج أي شرح فهذا الكود تستطيع وضعه في اماكن متعددة تستطيع وضعه في التخطيط في اداة HTML/JAVASCRIPT , وتستطيع وضعه في اي مكان html في المشاركات والصفحات , ولكن ستكون شكلها جيد اذا وضعتها في السايدبار (الشريط الجانبي ) لذلك قم باضافة اداة HTML/JAVASCRIPT وقم بوضع هذا الكود داخلها 

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-usage">اضغط هنا</button>

<a href="#offcanvas-usage" uk-toggle>اضغط هنا</a>

<div id="offcanvas-usage" uk-offcanvas>
    <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close" type="button" uk-close></button>

        <h3>العنوان</h3>

        <p> بدأ هذا المستند أولاً كجهد لمساعدة الفرق داخل Google ، لكننا اعتقدنا أنه سيكون مفيدًا لأصحاب المواقع الجدد في موضوع تحسين محرك البحث ويرغبون في تحسين تفاعل مواقعهم مع كل من المستخدمين ومحركات البحث , فإن اتباع أفضل الممارسات الموضحة أدناه سيسهل على محركات البحث الزحف إلى محتوى موقعك وفهرسته وفهمه. هذا ماقالته جوجل في نصائحها الرسمية .</p>

    </div>
</div>
وقم بتغيير النصوص الي النصوص التي تريدها  , اذا تريد وضع ايقونات تواصل اجتماعي فعليك بقراءة مقال ايقونات التواصل في هذه المكتبة أعلي هذا المقال , وتستطيع اضافة رسائل التنبيه في مدونتك بطريقة بسيطة عن طريق هذا المقال 
ثم قم بحفظ ما وضعته وستجد أن القائمة الجانبية تعمل في الموقع بطريقة سريعة .
  لاتنسي زيارة قسم بلوجر  لمزيد من المواضيع واذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا,  او اذا كنت تريد  شرح معين عن  أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع

إغلاق التعليقات

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