 |
| قائمة بلوجر متوافقة مع الموبايل |
خطوات انشاء قائمة بلوجر متوافقة مع الموبايل:-
1- تسجيل الدخول لمدونتك على بلوجر.
2- اختر من على يمين الصفحة كلمة المظهر وبعد ذلك سوف تجد فى وسط الصفحة كلمة تخصيص وبجوارها سهم يتجه الى الاسفل قم بالتضغط عليه ثم اختر كلمة تعديل html.
3- الان سوف تجد اكواد القالب الخاصة بك تسطيع حذفها جميعا لاننا فى احتراف بلوجر المستوى الثانى نقوم بانشاء قالب من الصفر فى بلوجر لذلك سوف نضغط على اختصار Ctrl + a لتحديد جميع الاكواد ثم سوف نضغط على زرار Delete من لوحة المفاتيح وبذلك سوف يتم حذف جميع الاكواد الموجود امامنا.
4- سوف نقوم بوضع تلك الاكواد المسئولة عن اظهار القائمة او الصفحات الرئيسية فى موقعنا.
<html>
<head>
<b:skin><![CDATA[
/* css here */
]]></b:skin>
</head>
<body>
<!-- html here -->
<!-- start blog-main-navbar -->
<div class='blog-main-navbar' id='blog-menu'>
<div class='icon' onclick='collapseMenu()'>القائمة ☰</div> <b:section id='main-navbar' name='الصفحات الرئيسية'></b:secion>
</div>
<!-- end blog-main-navbar -->
</html>
5- الان قم بحفظ تلك الاكواد فى مدونتك عن طريق الضغط على ايقونة الحفظ فى اعلى يمين الصفحة بعدما قمت بعملية الحفظ قم بالرجوع الى لوحة التحكم ثم قم بالضغط على كلمة تنسيق الان سوف تجد كلمة الصفحات الرئيسية فى وسط الصفحة تستطيع الان الضغط على كلمة اضافة اداة ثم سوف تظهر لك نافذة صغيرة بها بعض الاضافات قم باختيار اضافة الصفحات وقم بالضغط على كلمة حفظ ثم بعد ذلك قم بعرض مدونتك سوف تجد بعض الصفحات او الصفحة الرئيسية معروضة فى مدونتك وبذلك نكون انشأنا الصفحات الرئيسية.
6- اذا كنت تريد اضافة المزيد من الصفحات سوف تجد كلمة الصفحات فى يمين الصفحة قم بالضغط عليها ثم قم بالضغط على انشاء صفحة جديدة فى اعلى يمين الصفحة سوف تظهر لك صفحة اخرى بها مكان لكتابة عنوان التدوينة وكتابة بعض النصوص تسطيع الان اختيار العنوان الذى تريده والنصوص ايضا ثم اضغط على كلمة نشر فى اعلى يمين الصفحة.
7- بعد ذلك قم بالذهاب الى كلمة التنسيق فى يمين الصفحة واضغط عليها سوف تظهر لك فى وسط الصفحة كلمة الصفحات الرئيسية قم بتعديل اداة الصفحات عن طريق كلمة تعديل وقم بإضافة الصفحات الاخرى عن طريق الضغط بالفأرة ووضع علامة صح بجوار اسم الصفحة وبعد ذلك اضغط احفظ.
قم بعرض المدونة ستجد ان جميع الصفحات التى قمت بوضع علامة صح بجوارها تم عرضها فى الصفحة الرئيسية وبذلك نكون انتهينا من الجزء الاول.
الانى سوف نذهب الى الخطوة التالية وهى جعل الصفحات الرئيسية او القائمة الرئيسية متوافقة مع الموبايل بحيث تكون مناسبة فى جميع شاشات الاجهزة.
8- الان قم الذهاب مرة اخرى الى المظهر وقم بضغط على السهم الذى بجوار كلمة تخصيص واختر تعديل html بعد ذلك قم بوضع تلك الاكواد الخاصة بعملية التنسيق بين وسم b:skin تحديدا فى اسفل كلمة /* css here */.
.blog-main-navbar{background-color:#1dd1a1;}
.blog-main-navbar #main-navbar{width:90%;margin:0 auto;}
.blog-main-navbar #main-navbar ul{padding:10px 0;}
.blog-main-navbar #main-navbar ul li{display:inline-block;}
.blog-main-navbar #main-navbar ul li a{color:#FFF;padding: 8px 12px;border-radius:4px;
transition:all .2s ease;}
.blog-main-navbar #main-navbar ul li a:hover{background-color:#10ac84;}
.blog-main-navbar .icon{display:none;}
/* end blog-main-navbar */
@media (max-width: 750px) {
.blog-main-navbar #main-navbar ul{text-align:center;}
.blog-main-navbar #main-navbar ul li{display:none;}
.blog-main-navbar .icon{display:block;color:#FFF;text-align:center;font-size:18px;
border-bottom: 1px solid;padding:8px 0;cursor:pointer;}
.blog-main-navbar.responsive #main-navbar ul li{display:block;display: block;margin: 5px 0;
border-bottom: 1px solid #fff;padding: 3px 0;}
.blog-main-navbar #main-navbar ul li a:hover{background-color:transparent;}
}
10 - ايضا قم بوضع كود الجافا سكريب قبل وسم </body>.
<script>
//<![CDATA[
function collapseMenu() {
var getMenu = document.getElementById('blog-menu');
if (getMenu.className == 'blog-main-navbar') {
getMenu.className += ' responsive';
} else {
getMenu.className = 'blog-main-navbar';
}
}
//]]>
</script>
<!-- end blog-main-navbar -->
11- قم بحفظ تلك الاكواد وبذلك سوف تجد ان القائمة التى بها الصفحات الرئيسية متوافقة مع جميع الصفحات.
ملاحظة:
الموقع المذكور فى الشرح الذى به اشكال اسهم واشكال القوائم يمكنك زياره عبر هذا الرابط [ toptal ]
فيديو توضيحى:
الف شكر لحضرتك
ردحذف