كلمة الفريق

في عصرنا يوجد مئات الآلاف من المدونين والمدونات، البعض يعمل بشغف وحب...، والآخر يعمل بشكل إنتاجي للكسب فقط !، أما نحن .. نحب ونعشق التدوين ونؤمن أننا سنقوم بإضافة كبيرة للمحتوى العربي ولو بشيئ بسيط، نتعلم بشكل مستمر ونشارككم بكل جديد...، نحاول المساعدة، نحب أصدقاءنا، نهتم بإستفساراتهم كما لو كانت ملكنا، فريقنا فريق واحد رغم أنه متكون من شخص واحد :) لكنه يعمل بجنون

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



هـل لـديـك قـائمـة أو تـريـد تــركـيـب قـائمـة عـلـى قــالـبـك لـكــنـهـا لــيـسـت مـتــجـاوبـة، هـل تـريـد جـعـل أي قـائمـة قــابـلـة لـلــعـمـل عـلـى الاجـهـزة الذكية؟
الــحــل بـســيــط وبــكــود ســهــل الــتـركــيــب، كــل مــا عـلــيــك هــو اسـتــخــدام الــكــود الـمــوجــود فــي هــذه الـتــدويــة وســتـصــبــح قـائمــتــك قـابــلــة لـلـتــشـغــيــل عــلــى الـهــواتــف والاجــهــزة الــلـوحــيــة وبــدون أي مـجــهــود مــنــك.

مراحل تركيب الإضافة
  1. ادخل إلى لوحة تحكم المدونة في بلوجر.
  2. اختر قالب المدونة التي تود تطبيق الشرح فيها.
  3. اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
  4. ابحث عن الوسم </head> و اضف الكود التالي فوقه :
<style type="text/css">

.teqb4v2 {

  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) {#menub4 {display: none;}.teqb4v2 {display:block;}}
</style>

<script>//<![CDATA[
/*Responsive Menu*/
window.teqb4=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("teqb4"+t);t++);return e?"teqb4"+t:"teqb4"+(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="teqb4v2" 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(){teqb4('menub4');});
//]]></script>

ملاحظـــات :
  • هــنـاك كــلـمـتــيـن فـي الــكـود الـســابـق مـتــكـررة، واحـده بـالــلـون الأصفر والثانية باللون الأخضر، والتي باللون الأصفر تـســتــبـدلـهــا بـمـعــرف قـائمـتــك.
  • القوائم تبدأ بوسم <ul>،  قـد تــجـد الــوسـم مــكــتـوب بــهـذا الــشــكـل مــثـلا : <ul class="menu"> لكــن مــا يــهــمـنــا أن يـكــون هــذا الـوســم بــه مـعــرف id، عـلــى هــذا الــشـكــل : <ul id="resmenu">
  • إن وجــدت الـمـعــرف وهــو الـكـلـمــة بـعــد id، قــم بـاســتـبـدالـهــا بــالكلمة الأصفر
  • ان لم تجدها أضف المعرف فقط، أي أن تكتب بعد ul id="word" واستبدل word بـــأي كلمة تناسبك
  • هذا كل شيء، لكن ماذا يخص الكلمة الخضراء ؟ تخـص فـقـط ان كـان لـديـك قــائمـتـيـن وســتــكــرّـر الــكـود، أي ان تــســتــبـدل الــرقـم 2 فــيــهـا بالرقم 3
تـنـســيــقـات :
  • ما هو معلم باللون الوردي هو حجم ونوع الخط.
  • الــرقــم 100 هــو خــاص بــعــرض الـقــائمــة.
  • الأرقام الحمراء هي الـهـوامـش الـخـارجـيـة لـلـقـائمـة ( 2 أعـلـى - 4 يـمـيـن - 5 اسـفـل - 3 يـسـار ).
  • نفس الأمر يتعلق بالأرقام الزرقاء لكـنـهـا لـلـهـوامـش الـداخـلـة لـلـقـائمة

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!

ليست هناك تعليقات

يمكنك وضع تعليقك هنا

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