كيفية جعل القوائم متجاوبة مع الهواتف والأجهزة الذكية

هناك الكثير مما يواجهون صعوبة في جعل القوائم متجاوبة مع الهواتف و الاجهزة الذكية في مدونات بلوجر ، لهذا سنقدم لك في هذه التدوينة شرح كيفية جعل القوائم متجاوبة بطريقة بسيطة و سهلة ، وهنا انا اتكلم عن اضافة link list الموجودة في اضافات بلوجر المهمة. و بدون مشاكل باذن الله ، تابعوا معنا.

كيفة جعل القوائم متجاوبة مع الهواتف:

* اولا اتجه الى لوحة تحكم مدونتك.

* بعدها الى المظهر (القالب).

* ثم اضغط على سهم جنب كلمة تخصيص.

* بعدها اختر تحرير html.

* الان اضغط داخل صندوق اكواد وقم بضغط على Ctrl + F من لوحة مفاتيح كمبيوتر.

* سيظهر لك مربع بحث قم بالبحث عن هذا الكود التالي.

</head>

عند ايجاده قم بنسخ الكود التالي وقم بوضعه اسفل الكود السابق.

<style type="text/css">
.cnmunav2 {
  color: #444;
  display: none;
  float: right;
  font: 14px tahoma;
  margin: 2px 4px 5px 3px;
  padding: 2px 4px 5px 3px;
  width: 100px;
}
@media screen and (max-width : 700px) {
#maymenu {display: none;}
.cnmunav2 {display:block;}
}
</style>
<script>
//<![CDATA[
/*Responsive Menu*/
window.cnmunav=function(){"use strict";var e=function(e,t){function c(e){var t;if(!e)e=window.event;if(e.target)t=e.target;else if(e.srcElement)t=e.srcElement;if(t.nodeType===3)t=t.parentNode;if(t.value)window.location.href=t.value}function h(e){var t=e.nodeName.toLowerCase();return t==="ul"||t==="ol"}function p(e){for(var t=1;document.getElementById("cnmunav"+t);t++);return e?"cnmunav"+t:"cnmunav"+(t-1)}function d(e){a++;var t=e.children.length,n="",l="",c=a-1;if(!t){return}if(c){while(c--){l+=o}l+=" "}for(var v=0;v<t;v++){var m=e.children[v].children[0];if(typeof m!=="undefined"){var g=m.innerText||m.textContent;var y="";if(r){y=m.className.search(r)!==-1||m.parentNode.className.search(r)!==-1?f:""}if(i&&!y){y=m.href===document.URL?f:""}n+='<option value="'+m.href+'" '+y+">"+l+g+"</option>";if(s){var b=e.children[v].children[1];if(b&&h(b)){n+=d(b)}}}}if(a===1&&u){n='<option value="">'+u+"</option>"+n}if(a===1){n='<select class="cnmunav2" id="'+p(true)+'">'+n+"</select>"}a--;return n}e=document.getElementById(e);if(!e){return}if(!h(e)){return}if(!("insertAdjacentHTML"in window.document.documentElement)){return}document.documentElement.className+=" js";var n=t||{},r=n.activeclass||"active",i=typeof n.autoselect==="boolean"?n.autoselect:true,s=typeof n.nested==="boolean"?n.nested:true,o=n.indent||"←",u=n.label||"- القائمة -",a=0,f=" selected ";e.insertAdjacentHTML("afterend",d(e));var l=document.getElementById(p());if(l.addEventListener){l.addEventListener("change",c)}if(l.attachEvent){l.attachEvent("onchange",c)}return l};return function(t,n){e(t,n)}}();$(document).ready(function(){cnmunav('maymenu');});
//]]></script>

هناك كلمة في الكود السابق متكررة مرتين وهيالكلمة التالية maymenu كل ما عليك فعله الان هو اضافة تلك الكلمة الى معرف قائمتك. وستجد هذا المعرف في قائمتك بعد كلمة id. اما في حال لم تجد ذلك المعرف فقط قم بإضافة معرف لقائمتك لتصبح على شكل التالي.

<ul id="maymenu">

و اهم حاجة هي يجب عليك ان تتأكد من ان يكون id وليس class. وكما قلنا في حال وجدت class وحده ولم تجد id فقط قم بإضافة بجانبه id و تأكد من وجود مسافة بينهما. بعدها عد الانتهاء اضغط على حفظ.

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