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

الطريقة الصحيحة لأضافة قائمة منسدلة لمدونات بلوجر عن طريق كود قائمة منسدلة لبلوجر

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

طريقة تركيب القائمة المنسدلة لبلوجر :



ولكن أولاً اذا لم يكن قالب غير متجاوب مع الهاتف فلن تفيدك هذه القائمة في شيء ، فهي تحتاج الى قوالب حديثة متجاوبة مع اغلب الشاشات حتي تعمل بشكل جيد.
للتركيب : قم بالدخول الى لوحة تحكم بلوجر وقم بأختيار عنصر القالب ومن ثم اختر تحرير الـ HTML الخاص به ، بعدها ابحث عن هذا الرمز بواسطة ctrl+f من الكيبورد ، الرمز هو :
</head>

بعدها قم بأضافة هذا الكود بعد الرمز السابق الذي وجدناه مباشرةْ :

<style type='text/css'>

/*<![CDATA[*/

#menu-wrapper{

width:100%;

background:#455A64;

}

nav {

display: block;

float:center;

margin:0px auto 0px auto;

max-width:1000px;

padding:0;

background:#ff9514;

}

.menu {

display: block;

margin:0px;

padding:0px;

}

.menu li {

display: inline-block;

position: relative;

z-index: 100;

padding:0px;

margin:0px;

text-align:right;

font-size:14px;

}

.menu li a {

text-decoration: none;

padding:15px;

margin:0px;

display: block;

color: #fff;

}

.menu li a:hover,.menu li:hover>a {

color: #fff;

background:#e8102d;

}

.menu ul {

visibility: hidden;

opacity: 0;

margin: 0;

padding: 0;

width: 150px;

position: absolute;

right: 0px;

background: #fff;

z-index: 99;

}

.menu ul li {

display: block;

float: none;

background: none;

margin: 0;

padding: 0;

}

.menu ul li a {

font-size: 12px;

font-weight: normal;

display: block;

color: #797979;

background: #fff;

}

.menu ul li a:hover,.menu ul li:hover>a {

background: #e8102d;

color: #fff;

}

.menu li:hover>ul {

visibility: visible;

opacity: 1;

}

.menu ul ul {

right: 149px;

top: 0px;

visibility: hidden;

opacity: 0;

}

.menu li>ul ul:hover {

visibility: visible;

opacity: 1;

}

.responsive-menu {

display: none;

max-width: 100%;

padding:15px;

background: #ff9514;

color: #fff;

}

responsive-menu {

color:#fff;

}

@media screen and (max-width:600px) {

nav {margin: 0 15px;background: none;overflow:hidden}

.menu {display: none;}

.responsive-menu {display: block;}

.menu li {display: block;margin: 0px;}

.menu li a {background: #fff;color: #797979;}

.menu li a:hover,.menu li:hover>a {background: #e8102d;color: #fff;}

.menu ul {visibility: hidden;opacity: 0;top: 0;right: 25px;width: 100%;}

.menu li:hover>ul {visibility: visible;opacity: 1;position: relative;}

.menu ul ul {right: 50px;}

}

/*]]>*/

</style>





بعد إضافة هذا الكود قم بالضغط على زر الحفظ في القالب ، وبعدها ستقوم بأضافة كود القائمة المنسدلة في المكان الذي تريده وليكن هيدر القالب ، فستقوم بالبحث عن هذا الرمز </header> أو يمكنك البحث عن هذا الرمز ايضاً لتظهر القائمة تحت الهيدر مباشرة <div id='content-wrapper'>

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

بعد اختيار المكان المناسب ستقوم بنسخ هذا الكود ووضعه  اسفله مباشرة :



<!-- بداية القائمة المنسدلة --><div id='menu-wrapper'><nav><a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> القائمة</a>       <ul class='menu'>  <li><a href='/'>الرئيسية</a></li>  <li><a href='#'>قائمة 1</a></li>  <li><a href='#'>قائمة 2</a></li>  <li><a href='#'>قائمة 3</a>   <ul class='sub-menu'>      <li><a href='#'>تعديل 1</a></li>   <li><a href='#'>تعديل 2</a></li>        </ul>  </li>     <li><a href='#'>قائمة 4</a></li> </ul></nav></div><!-- نهاية القائمة المنسدلة -





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



وفى النهاية ستقوم بأضافة كود بسيط ولكن بعد البحث عن هذا الرمز <body/>  وستقوم بوضعه فوقه مباشرة :

<script type='text/javascript'>//<![CDATA[$(document).ready(function(){  var touch  = $('#resp-menu'); var menu  = $('.menu');  $(touch).on('click', function(e) {  e.preventDefault();  menu.slideToggle(); });  $(window).resize(function(){  var w = $(window).width();  if(w > 600 && menu.is('')) {   menu.removeAttr('style');  } });});//]]></script>



واخيراً قم بالضغط على زر الحفظ لحفظ القائمة المنسدلة وفي ثوانٍ ستكون قد ركبت قائمة منسدلة متوافقة مع جميع الأجهزة وبشكل رائع.

اقرأ ايضا :

شرح حذف تدعمه بلوجر من مدونات بلوجر
وان كنت من محبين ووردبريس اقرأ ايضا

قصة سكربت الووردبريس WordPress وتعريفه

كيف تحصل على الدعم الفني والمساعدة في سكربت الووردبريس ؟

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