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

• السلام عليكم ورحمة الله وبركاته

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

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

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

 /***********************************************************/
/*main-menu
---------------------------------*/
.main-menu { box-shadow: 0px 2px 10px #000; border-bottom: 4px solid #0076c9; background-color: #285179; position: relative; height: 58px; margin-bottom: 5px; } li.searchbutton a { color: #fff; } .Home { float: right; text-decoration: none; font-size: 18px; font-weight: 700; background: #09f; line-height: 100%; text-align: center; cursor: pointer; color: #fff; padding: 18px 18px; } li.searchbutton { float: left; text-decoration: none; font-size: 18px; font-weight: 700; background: #09f; line-height: 100%; text-align: center; cursor: pointer; color: #fff; padding: 18px 18px; } .main-menu ul li a:hover { background: #008de7; color: #fff; box-shadow: inset 0px -60px 0px #09f; } .main-menu ul li a { color: #fff; display: block; font-size: 18px; padding: 10px 14px; transition: 0.3s; font-weight: bold; } .main-menu ul li { float: right; font-family: 'DroidKufi bold' , Tahoma; } span.sb { cursor: pointer; } span.sc { cursor: pointer; } #sub-menu li { float: none; display: block; } #sub-menu { position: absolute; top: 56px; z-index: 99999; width: 250px; background: #243748; display: none; } #sub-menu li a { color: #ffffff; line-height: 40px; border-bottom: 0px solid #eee; padding: 4px 10px; transition: 0.2s; } #sub-menu li a:before { content: "\f053"; font-family: Fontawesome; padding-left: 7px; position: relative; background: transparent; } #sub-menu li a:hover { background: #0099cc; color: #ffffff; } #sub-menu li:first-child a { background: none!important; } #sub-menu li:first-child a:hover { background: #0099cc!important; color: #ffffff;} #sub-menu li a:hover { background: #0099cc; color: #ffffff;} .main-menu ul li:hover #sub-menu {display:block; } #searchWrap { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; z-index: 999999; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); background-color: rgba(255,255,255,.94); text-align: center; -webkit-transition: all ease-in-out .25s; -moz-transition: all ease-in-out .25s; -ms-transition: all ease-in-out .25s; -o-transition: all ease-in-out .25s; transition: all ease-in-out .25s; } .closeSearch { position: absolute; right: 20px; top: 20px; font-size: 22px; } .closeSearch i{ color: #fefefe; background: #243748; display: block; width: 35px; height: 35px; line-height: 35px; text-align: center; transition: .3s; border-radius: 50%; margin-left: 10px; } .openSearch{visibility:visible!important;opacity:1!important;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease} #searchBar:focus{outline:none;-webkit-box-shadow:0 3px 0 0 #243748;-moz-box-shadow:0 3px 0 0 #243748;box-shadow:0 3px 0 0 #243748} #searchBar { position: absolute; top: 45%; font-size: 40px; text-align: center; width: 50%; background-color: transparent; -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,.1); -moz-box-shadow: 0 3px 0 0 rgba(0,0,0,.1); box-shadow: 0 3px 0 0 rgba(0,0,0,.1); border: 0; text-align: center; font-size: 15px; padding: 20px; color: #212121; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; font-family: inherit; position: absolute; left: 0; right: 25%; top: 30%; } #searchBar:focus{outline:none}
 .searchbutton.active {background:transparent;} #search {z-index:99;position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.9);opacity:0; visibility:hidden;transform:scale(1.2);transition:all 600ms cubic-bezier(0.23,1,0.32,1);} #search.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 999; margin: 0;} #search .input {border-radius: 8px;position: absolute; width: 100%; background: #09f; height: 100px; max-width: 800px; top: 0; right: 0; left: 0; bottom: 0; margin: auto;}
#search .input .search { float: right; border: 0; outline: 0; background: transparent; width: 89.9%; margin-right: 10px; color: rgba(255, 255, 255, 0.7); font: 40px 'DroidKufi-Regular'; }
 #search .input .submit {border-radius: 8px; cursor: pointer; float: right; border: 0; background: #0076c5; font-size: 35px; color: #fff; height: 100px; padding: 18px; transition: all .3s ease-out;} #search .input .submit:hover { color: #0076c5; background: #fff;} #search #close { cursor: pointer; position: absolute; width: 50px; height: 50px; border: 0; background: rgb(255, 255, 255); border-radius: 8px; right: 30px; top: 30px; text-align: center;color: #09f; font-size: 20px;}.Text .widget-content:before{content:'\f10e';font-family:fontawesome;font-size:16px;color:#3498db;padding-left:5px}.Text .widget-content:after{content:'\f02c';font-family:fontawesome;font-size:16px;color:#3498db;padding-left:5px} .footer-columen h2:before {content: "\f192 ";display: block;font-family: FontAwesome;font-style: normal;background: #fff;padding: 5px;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #e4e4e4;position: absolute;bottom: -15px;right: 50%;margin-right: -15px;z-index: 9;}
/* التجاوب
--------------------------- */
.selectnav {display:none;} @media screen and (max-width : 1150px){ } @media screen and (max-width : 1000px){ .sizewrap { width: 100% !important; } #nav1 {display:none;} #selectnav1 { border: 0; display: block !important; width: 100%; background: #ffffff; color: #243748; font-size: 15px; padding: 8px 8px; border-radius: 3px; margin-top: 7px; margin-bottom: 6px; font-family: 'DroidKufi bold' , Tahoma; } #nav { display:none; } #selectnav2 { border: 0; display: inline-block !important; background: #ffffff; width: 100%; color: #243748; font-size: 13px; padding: 8px 8px; border-radius: 3px; margin-top: 0px; font-family: 'DroidKufi bold' , Tahoma; } #selectnav1 { float: right!important; width: 66%!important; right: 6px; top: -2px; position: relative; } #ads {display:none;} } @media screen and (max-width: 345px){ #selectnav1 { width: 58%!important; } #menu-left ul li a { width: 28px!important; padding-top: 7px!important; margin-left: 6px!important; height: 34px!important; } } @media screen and (max-width: 291px){ #selectnav1 { width: 58%!important; } #menu-left ul li a { width: 28px!important; padding-top: 7px!important; margin-left: 6px!important; height: 34px!important; } }
@media only screen and (max-width: 880px){ #search, #search .input .submit { width: 30%!important;} } @media only screen and (max-width: 684px){ #search, #search .input .submit { float: none!important; width: 100%!important; margin: 0px !important;} }
/***********************************************************/

• بعد دلك تبحث عن <body'> و تلصق هدا الكود اسفل

       <div class='main-menu'>
      <div class='sizewrap'>
      <a class='Home' href='/' title='الرئيسية'><i class='fa fa-home'/></a>
        <b:section class='section' id='main-menu'>
          <b:widget id='LinkList33' locked='true' title='القائمه الرئيسيه' type='LinkList' version='1'>
            <b:widget-settings>
              <b:widget-setting name='text-30'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-31'>الحماية</b:widget-setting>
              <b:widget-setting name='text-32'>فيس بوك</b:widget-setting>
              <b:widget-setting name='text-26'>فوتوشوب</b:widget-setting>
              <b:widget-setting name='text-27'>_الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-28'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-29'>الربح</b:widget-setting>
              <b:widget-setting name='text-22'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='link-31'><![CDATA[https://anaswebinfo.blogspot.com/search/label/الحماية?&max-results=12]]></b:widget-setting>
              <b:widget-setting name='text-23'>مواقع</b:widget-setting>
              <b:widget-setting name='link-30'>http://</b:widget-setting>
              <b:widget-setting name='text-24'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-25'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='link-32'><![CDATA[https://anaswebinfo.blogspot.com/search/label/فيس بوك?&max-results=12]]></b:widget-setting>
              <b:widget-setting name='text-9'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-8'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-20'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-21'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-1'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-0'>اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-3'>_اسم الموقع الجديد</b:widget-setting>
              <b:widget-setting name='text-2'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-5'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-4'>اسم الموقع</b:widget-setting>
              <b:widget-setting name='text-7'>الموقع</b:widget-setting>
              <b:widget-setting name='text-6'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-19'>الحلقات</b:widget-setting>
              <b:widget-setting name='text-15'>أندرويد</b:widget-setting>
              <b:widget-setting name='text-16'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-17'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-18'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-11'>بلوجر</b:widget-setting>
              <b:widget-setting name='text-12'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-13'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-14'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='text-10'>_اسم الموقع الجديد </b:widget-setting>
              <b:widget-setting name='link-17'>http://</b:widget-setting>
              <b:widget-setting name='link-16'>http://</b:widget-setting>
              <b:widget-setting name='link-19'><![CDATA[https://anaswebinfo.blogspot.com/search/label/الحلقات?&max-results=12]]></b:widget-setting>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='link-18'>http://</b:widget-setting>
              <b:widget-setting name='link-1'>http://</b:widget-setting>
              <b:widget-setting name='link-13'>http://</b:widget-setting>
              <b:widget-setting name='link-2'>http://</b:widget-setting>
              <b:widget-setting name='link-12'>http://</b:widget-setting>
              <b:widget-setting name='link-15'><![CDATA[https://anaswebinfo.blogspot.com/search/label/أندرويد?&max-results=12]]></b:widget-setting>
              <b:widget-setting name='link-0'>http://</b:widget-setting>
              <b:widget-setting name='link-14'>http://</b:widget-setting>
              <b:widget-setting name='link-11'><![CDATA[https://anaswebinfo.blogspot.com/search/label/بلوجر?&max-results=12]]></b:widget-setting>
              <b:widget-setting name='link-10'>http://</b:widget-setting>
              <b:widget-setting name='link-9'>http://</b:widget-setting>
              <b:widget-setting name='link-7'>http://</b:widget-setting>
              <b:widget-setting name='link-8'>http://</b:widget-setting>
              <b:widget-setting name='link-5'>http://</b:widget-setting>
              <b:widget-setting name='link-6'>http://</b:widget-setting>
              <b:widget-setting name='link-3'>http://</b:widget-setting>
              <b:widget-setting name='link-4'>http://</b:widget-setting>
              <b:widget-setting name='link-28'>http://</b:widget-setting>
              <b:widget-setting name='link-27'>http://</b:widget-setting>
              <b:widget-setting name='link-29'><![CDATA[https://anaswebinfo.blogspot.com/search/label/الربح?&max-results=12]]></b:widget-setting>
              <b:widget-setting name='link-24'>http://</b:widget-setting>
              <b:widget-setting name='link-23'><![CDATA[https://anaswebinfo.blogspot.com/search/label/مواقع?&max-results=12]]></b:widget-setting>
              <b:widget-setting name='link-26'><![CDATA[https://anaswebinfo.blogspot.com/search/label/فوتوشوب?&max-results=12]]></b:widget-setting>
              <b:widget-setting name='link-25'>http://</b:widget-setting>
              <b:widget-setting name='link-20'>http://</b:widget-setting>
              <b:widget-setting name='link-22'>http://</b:widget-setting>
              <b:widget-setting name='link-21'>http://</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
 <div class='widget-content'>
   <ul id='nav'>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
<script type='text/javascript'>
//<![CDATA[
$("#LinkList33").each(function(){var e="<ul id='nav'><li><ul id='sub-menu'>";$("#LinkList33 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);$("#LinkList33 ul").each(function(){var e=$(this);if(e.html().replace(/\s|&nbsp;/g,"").length==0)e.remove()});$("#LinkList33 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>
</b:includable>
          </b:widget>
        </b:section>
<li class='searchbutton'>
<a href='javascript:void(0)'><i aria-hidden='true' class='fa fa-search'/></a>
</li>
        </div>
        </div>

• وكذلك نفس الشيء تلصق كود البحث اسفل

 <form action='/search' id='search' method='get'>
<div class='input'>
<input class='search' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='أدخل كلمة البحث...'/>
<button class='submit fa fa-search' type='submit' value=''/>
</div>
<button class='fa fa-times' id='close' type='reset' value=''/>
</form><!-- end search -->

• الان اخر كود تضعه فوق وسم </body> مباشرة ... هذا كود التوافق 

 <script type='text/javascript'>
  //<![CDATA[
window.selectnav=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("selectnav"+t);t++);return e?"selectnav"+t:"selectnav"+(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="selectnav" 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(){selectnav('nav');selectnav('nav1');selectnav('nav3');});
  //]]>
</script>  

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

التسميات:

فيسبوك تويتر جوجل + لينكدن واتساب

أنس للمعلوميات

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