طريق اضافة قائمة منسدله من خلال قائمة الرابط فى التخطيط

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

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

طريق اضافة قائمة منسدله من خلال قائمة الرابط فى التخطيط

معاينة الإضافة

معاينة 

صورة من الإضافة

طريق اضافة قائمة منسدله من خلال قائمة الرابط فى التخطيط

طريق اضافة قائمة منسدله من خلال قائمة الرابط فى التخطيط

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

اولا سوف يكون عليك وضع كود السكربت هذا فوق الوسم</body>فى مدونتك.

<script type='text/javascript'> 
//<![CDATA[
$("#LinkList3").each(function(){var e="<ul id='nav'><li><ul id='sub-menu'>";$("#LinkList3 li").each(function(){var t=$(this).text(),n=t.substr(0,1),r=t.substr(1);"_"==n?(n=$(this).find("a").attr("href"),e+='<li><a href="'+n+'">'+r+"</a></li>"):(n=$(this).find("a").attr("href"),e+='</ul></li><li><a href="'+n+'">'+t+"</a><ul id='sub-menu'>")});e+="</ul></li></ul>";$(this).html(e);$("#LinkList3 ul").each(function(){var e=$(this);if(e.html().replace(/\s|&nbsp;/g,"").length==0)e.remove()});$("#LinkList3 li").each(function(){var e=$(this);if(e.html().replace(/\s|&nbsp;/g,"").length==0)e.remove()})});
$('ul#sub-menu').parent('li').children('a').addClass('has-sub');
//]]>
</script>

فى هذا الكود سوف تجد معرف قائمة الروابط مكرر أكثر من مره وفى هذا الكود معرف القائمة هو LinkList3
ولمعرف معرف اى قائمة روابط او اى قائمة اخر سوف يكون هو الـ id فى القائمة مثل هذه الصورة.

طريق اضافة قائمة منسدله من خلال قائمة الرابط فى التخطيط

فى اى قائمة روابط او اى إضافة اخر تعمل من التخطيط سوف يكون لها id والid يرمز له فى أكواد ال css بال #

بمعنى أنك بعذ معرف id القائمة سوف تقوم بتغييره فى الكود وسوف تجد مكرر غيره كامل ، ولكن سوف يكون عليك عدم حذف # من الكود حتى يعمل بدون مشكلة سوف قوم بتغيير فى المعرف أو يمكنك تغيير فقط القائمة لديك فى القالب الى المعرف هذا LinkList3

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

تحديث جديد

سوف أضع لكم كود css للأضافة حتى اذا كنت لا تستطيع تنسيق الإضافة سوف يساعدك هذا الكود ، وايضا شرح بسيط لكيفية التركيب من التخطيط.
سوف تقوم بوضع الكود التالى فوقه هذا الوسم</body>فى مدونتك.

#sub-menu {
    position: absolute;
    top: 100%;
    z-index: 99999;
    width: 250px;
    background: #222;
display: none;
}
#sub-menu li {
    float: none;
    display: block;
}
#sub-menu li a {
    line-height: 45px;
    font-size: 14px;
    border-bottom: 1px solid #333;
}
#sub-menu li:first-child a, #sub-menu li a:hover {
    background: none!important;
}
#sub-menu li a:hover {padding-right:15px;}
.main-menu ul li:hover #sub-menu {display:block;}

بعد ذلك سوف يكون عليك تغيير class المحدد باللون الأحمر ولمعرفة فى مدونتك تابع هذه الصورة

طريق اضافة قائمة منسدله من خلال قائمة الرابط فى التخطيط

ليس شرط أن يكون class يمكنك أن يكون id المهم تغيير فى الكود ما ما فى مدونتك ، ويمكنك ايضا تغيير ال class فى الكود ب id القائمة مثل ما الصورة التى يوجد فى سطر القائمة الرئيسية.

كيفية اضافة القائمة المنسدله من التخطيط

هذه الصورة التاليه سوف توضح لك الأمر وسوف تقوم بعمل القائمة بهذا الشكل.

طريق اضافة قائمة منسدله من خلال قائمة الرابط فى التخطيط

وبعد ذلك سوف تقوم بحفظ الإضافة من التخطيط وسوف تجد القائمة تعمل.

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .