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

من مداد الجليد 2014-08-11 #CSS, #بلوجر

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

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

معاينة القائمة أنقر هنا او معاينة على مدونة بلوجر انقر هنا

معاينة على اجهزة الجوال كيف سوف تبدو

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

الدخول إلى لوحة تحكم بلوجر https://www.blogger.com القالب ->> ثم انقر على تحرير Html
الآن يجب التأكد من وجود إصدار من إصدارات ajax اجاكس يمكنك البحث داخل القالب لديك عن كلمة ajax إذا كان لديك كود شبيه للكود التالي لا حاجة لإضافة الكود التالي مرة أخرى إذا لم يكن لديك هذا الكود قم بإضافته فوق الرمز </head>

<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

الآن يجب يجب التحقق ما إذا كان لديك خط awesome إذا لم يكن لديك أيضاً أضف الكود التالي فوق الرمز </head> مجدداً

    <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

ثم كود جافا سكربت يجب إضافته فوق الرمز </head> أيضاً



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){

$.fn.orion = function(options){
 var settings = {
  speed     : 300,         // dropdown speed (ms)
  animation   : "fading",    // dropdown or panel animation
  indicator   : true     // dropdown indicator
 }
 $.extend( settings, options );
 $(".orion-menu").prepend("<li class='showhide'><span class='title'>القائمة</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");
 
 var firstClick = 0;
 
 if(settings.indicator == true){
  $(".orion-menu").find("li").each(function(){
   if($(this).children("ul").length > 0){
    $(this).append("<span class='indicator'></span>");
   }
  });
 }
 
 detectScreen();
 
 $(window).resize(function() {
  detectScreen();
 });
 
 function detectScreen(){
  $(".orion-menu").find("li, a").unbind();
  $(".orion-menu").find("ul").hide(0);
  if(window.innerWidth <= 768){
   showCollapse();
   bindClick();
   if(firstClick == 0){
    $(".orion-menu > li:not(.showhide)").hide(0);
   }
  }
  else{
   hideCollapse();
   bindHover();
  }
 }

 function bindHover(){
  $(".orion-menu li").bind("mouseover", function(){
   $(this).children("ul").stop(true, true).fadeIn(settings.speed).addClass(settings.animation);
  }).bind("mouseleave", function(){
   $(this).children("ul").stop(true, true).fadeOut(settings.speed).removeClass(settings.animation);
  });  
 }
 function bindClick(){  
  $(".orion-menu li:not(.showhide)").each(function(){
   if($(this).children("ul").length > 0){
    $(this).children("a").bind("click", function(){
     $(this).siblings("ul").slideToggle(settings.speed).addClass(settings.animation);
     firstClick = 1;
    });
   }
  });
 }
 function showCollapse(){
  $(".orion-menu > li.showhide").show(0);
  $(".orion-menu > li.showhide").bind("click", function(){
   if($(".orion-menu > li").is(":hidden")){
    $(".orion-menu > li").slideDown(300);
    firstClick = 1;
   }
   else{
    $(".orion-menu > li:not(.showhide)").slideUp(300);
    $(".orion-menu > li.showhide").show(0);
    firstClick = 0;
   }
  });
 }
 function hideCollapse(){
  $(".orion-menu > li").show(0);
  $(".orion-menu > li.showhide").hide(0);
 }
}
$(document).ready(function(){
    $(".panel a").click(function(e){
     e.preventDefault();
     var style = $(this).attr("class");
     $(".orion-menu").removeAttr("class").addClass("orion-menu").addClass(style);
    });
   });
jQuery(document).ready(function(){  
    $().orion({
     speed: 500
    });
   });
});//]]>  

</script>

ثم إضافة css فوق الرمز ]]></b:skin>

.orion-menu{
 width: 100%;
 padding: 0;
 position: relative;
 float: right;
 background: #252525;
 list-style: none;
 font-family: 'Roboto Condensed', sans-serif;
}
.orion-menu li {
 display: inline-block;
 font-size: 15px;
 margin: 0;
 padding: 0;
 float: right;
 line-height: 20px;
 position: relative;
}
.orion-menu li a {
 padding: 24px 22px 24px;
 color: #bababa;
 text-decoration: none;
 display: inline-block;
 -o-transition: color .3s linear, background .3s linear;
 -webkit-transition: color .3s linear, background .3s linear;
 -moz-transition: color .3s linear, background .3s linear;
 transition: color .3s linear, background .3s linear; 
}
.orion-menu li:hover > a{
 color: #fff;
}
.orion-menu li.active > a{
 background: #555555;
}
.orion-menu > li > a {
 text-transform: uppercase;
}

/* DROPDOWN */
.orion-menu ul, 
.orion-menu ul li ul {
 list-style: none;
    margin: 0;
    padding: 0;    
 display: none;
    position: absolute;
    z-index: 999;
 width: 150px;
 background: #454545;
}
.orion-menu ul{
    top: 68px;
    right: 0;
}
.orion-menu ul li ul{
    top: 0;
    right: 150px;
}
.orion-menu ul li{
 clear:both;
 width:100%;
 font-size:14px;
}
.orion-menu ul li a {
 width:100%;
 padding:12px 22px;
 display:inline-block;
 float:right;
 clear:both;
 box-sizing:border-box;
 -moz-box-sizing:border-box; 
 -webkit-box-sizing:border-box;
}
.orion-menu ul li:hover > a{
 background: #555555;
}

/* DROPDOWN ARROWS*/
.orion-menu .indicator{
 color: #bababa;
 position: absolute;
 right: 8px;
 top: 24px;
 font-family: 'FontAwesome';
 font-size: 12px;
}
.orion-menu .indicator:before{
 content: "f0d7";
}
.orion-menu ul li .indicator{
 left: 20px;
 top: 13px;
}
.orion-menu ul li .indicator:before{
 content: "f0da";
}


/* SOCIAL ICONS*/
.orion-menu li.social{
 float: left;
 margin-left: 20px;
}
.orion-menu li.social a{
 display: inline-block;
 padding: 24px 6px 24px;
 color: #bababa;
 position: relative;
 width: 15px;
 text-align: center;
}
.orion-menu li.social a:hover{
 color: #fff;
}
.orion-menu li.social a .tooltip{
 width: 70px;
 padding: 5px;
 background: #555555;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 opacity: 0;
 position: absolute;
 font-size: 9px;
 top: -20px;
 left: -27px;
 border-radius: 2px;
 text-align: center;
 -o-transition: opacity .3s linear;
 -webkit-transition: opacity .3s linear;
 -moz-transition: opacity .3s linear;
 transition: opacity .3s linear;
}
.orion-menu li.social a:hover .tooltip{
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 opacity: 1;
}
.orion-menu li.social a .tooltip:before,
.orion-menu li.social a .tooltip:after{
 content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #555555;
}


/* COLLAPSIBLE CONFIGURATION */
.orion-menu > li.showhide{
 display: none;
 width: 100%;
 height: 50px;
 cursor: pointer;
 color: #dedede;
 background: #454545;
}
.orion-menu > li.showhide span.title{
 margin: 16px 0 0 18px;
 float: right;
}
.orion-menu> li.showhide span.icon{
 margin: 17px 20px;
 float: left;
}
.orion-menu > li.showhide .icon em{
 margin-bottom: 3px;
 display: block;
 width: 20px;
 height: 2px;
 background: #ccc;
}


/* blue */
.blue, .blue li ul, .blue ul li ul, .blue > li.showhide{ background: #008C9E; }
.blue li a, .orion-menu li.social a{ color: #dedede; }
.blue li.active > a, .blue ul li:hover > a, .blue li.social a .tooltip{ background: #009fb4; }
.blue li.search form input.search:focus{ background-color: #009fb4; }
.blue li.social a .tooltip:before, .blue li.social a .tooltip:after{ border-top-color: #009fb4; }



@media only screen and (max-width: 768px) {
 .orion-menu{
  margin: 0;
  display: block;
 }
 .orion-menu li{
  display: block;
  width: 100%;
 }
 .orion-menu > li > a{
  padding: 16px 70px 16px 18px;
  text-align: left;
  border-top: solid 1px rgba(255, 255, 255, 0.05);
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box;
 }
 .orion-menu a{
  width: 100%;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 .orion-menu ul, 
 .orion-menu ul li ul{
  width: 100%;
  left: 0;
  padding: 0 20px;
  position: static;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 .orion-menu .indicator{
  right: 20px;
  top: 18px;
 }
 .orion-menu ul li .indicator{
  display: block;
 }
 .orion-menu ul li .indicator:before{
  content: "f0d7";
 }
 .orion-menu li.search{
  border-bottom: none;
 }
 .orion-menu li.search form{
  margin: 20px 18px 0 18px;
 }
 .orion-menu li.search form input.search,
 .orion-menu li.search form input.search:focus{
  width: 100%;
  color: #fff;
  background-color: #555555;
  background-position: 99% 8px;
  cursor: auto;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 
 .orion-menu li.social a{
  display: inline;
  padding: 8px 15px 8px 15px;
  border: none;
 }
 .orion-menu li.social a:hover{
  color: #fff;
 }
 .orion-menu li.social a:hover .tooltip{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0;
 }
 .orion-menu > li.showhide{
  display: block;
 }
}

الآن الإضافة الأخيرة يجب ان تضعها بالقالب في المكان حيث تريد ظهور القائمة على سبيل المثال فوق الرمز:
<div class=’outerpic-wrapper’>

<ul class="orion-menu">
   <li>
                <a href='/'>
                  الرئيسية
                </a>
              </li>
              <li>
                <a href='https://madad2.com/search/label/بلوجر' target='_blank'>
                  بلوجر
                </a>
              </li>
              <li>
                <a href='#'>
                  برامج
                </a>
                <ul>
                  <li>
                    <a href='#'>
                      برامج الكمبيوتر
                    </a>
                  </li>
                  <li>
                    <a href='#'>
                      برامج الهاتف
                    </a>
                  </li>
                  <li>
                    <a href='#'>
                      اندرويد
                    </a>
                  </li>
                  <li>
                    <a href='#'>
                      العاب
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  إسلاميات
                </a>
                <ul>
                  <li>
                    <a href='#'>
                      القران الكريم
                    </a>
                  </li>
                  <li>
                    <a href='#'>
                      اسلاميات
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  أدوات تحرير الصور
                </a>
                <ul>
                  <li>
                    <a href='https://madad2.com/p/blog-page_27.html' target='_blank'>
                      محرر الصور
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_23.html' target='_blank'>
                      2محرر الصور
                    </a>
                  </li>
                  <li>
                    <a href='http://www.photoshop-online.madad2.com/' target='_blank'>
                      فوتوشوب أون لاين
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  أدوات
                </a>
                <ul>
                  <li>
                    <a href='https://madad2.com/p/blog-page_3482.html' target='_blank'>
                      تحويل كود أدسنس
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_10.html' target='_blank'>
                      أعرف IP جهازك
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/cellspacing0-stylewidth-99-function.html' target='_blank'>
                      عداد الأحرف
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_26.html' target='_blank'>
                      صانع اكواد الالوان
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/html-javascribt.html' target='_blank'>
                      أداة تشفير/ فك تشفير HTML JavaScript
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/2014/07/stylish-fonts-for-facebook-2015.html' target='_blank'>
                      زخرف اسمك
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  روابط مفيدة
                </a>
                <ul>
                  <li>
                    <a href='http://flash-girls.blogspot.com/' target='_blank'>
                      ألعاب فلاش أون لاين
                    </a>
                  </li>
                  <li>
                    <a href='http://mdadalgled.blogspot.com/' target='_blank'>
                      أجمل الخلفيات HD
                    </a>
                  </li>
                  <li>
                    <a href='http://androidarbi.blogspot.com/' target='_blank'>
                      تطبيقات الاندرويد
                    </a>
                  </li>
                  <li>
                    <a href='http://www.templates.madad2.com/' target='_blank'>
                      قوالب بلوجر
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  المزيد..
                </a>
                <ul>
                  <li>
                    <a href='https://madad2.com/p/blog-page_17.html' target='_blank'>
                      أتصل بنا
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/bptoc-border-0px-solid-000000.html' target='_blank'>
                      خريطة المدونة
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_3585.html' target='_blank'>
                      إنضم إلينا
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_3.html' target='_blank'>
                      قسم المساعدة
                    </a>
                  </li>
                </ul>
              </li>
    <li class="social">
     <a href="http://www.facebook.com/mdadice"><i class="icon-facebook"></i><span class="tooltip">Facebook</span></a>
     <a href="http://twitter.com/mohammed1811990"><i class="icon-twitter"></i><span class="tooltip">Twitter</span></a>
     <a href="http://www.pinterest.com/mohammedsyria/"><i class="icon-pinterest"></i><span class="tooltip">Pinterest</span></a>
     <a href="https://plus.google.com/+مدادالجليد"><i class="icon-google-plus"></i><span class="tooltip">Google Plus</span></a>
    </li>
   </ul>

غير الروابط بما تناسبك ثم حفظ القالب ثم معاينة.

هذا كل شيء عن طريقة تركيب قائمة منسدلة إحترافية

طريقة سهلة

هناك طريقة سهلة أخرى لتركيب القائمة المنسدلة عن طريق الذهاب إلى لوحة التحكم –>> التخطيط –>> ثم إضافة أداة ثم إختيار أداة جافا سكربت HTML/JavaScript ثم لصق الكود التالي داخل الأداة:

  <style type='text/css'>
.orion-menu{
 width: 100%;
 padding: 0;
 position: relative;
 float: right;
 background: #252525;
 list-style: none;
 font-family: 'Roboto Condensed', sans-serif;
}
.orion-menu li {
 display: inline-block;
 font-size: 15px;
 margin: 0;
 padding: 0;
 float: right;
 line-height: 20px;
 position: relative;
}
.orion-menu li a {
 padding: 24px 22px 24px;
 color: #bababa;
 text-decoration: none;
 display: inline-block;
 -o-transition: color .3s linear, background .3s linear;
 -webkit-transition: color .3s linear, background .3s linear;
 -moz-transition: color .3s linear, background .3s linear;
 transition: color .3s linear, background .3s linear; 
}
.orion-menu li:hover > a{
 color: #fff;
}
.orion-menu li.active > a{
 background: #555555;
}
.orion-menu > li > a {
 text-transform: uppercase;
}

/* DROPDOWN */
.orion-menu ul, 
.orion-menu ul li ul {
 list-style: none;
    margin: 0;
    padding: 0;    
 display: none;
    position: absolute;
    z-index: 999;
 width: 150px;
 background: #454545;
}
.orion-menu ul{
    top: 68px;
    right: 0;
}
.orion-menu ul li ul{
    top: 0;
    right: 150px;
}
.orion-menu ul li{
 clear:both;
 width:100%;
 font-size:14px;
}
.orion-menu ul li a {
 width:100%;
 padding:12px 22px;
 display:inline-block;
 float:right;
 clear:both;
 box-sizing:border-box;
 -moz-box-sizing:border-box; 
 -webkit-box-sizing:border-box;
}
.orion-menu ul li:hover > a{
 background: #555555;
}

/* DROPDOWN ARROWS*/
.orion-menu .indicator{
 color: #bababa;
 position: absolute;
 right: 8px;
 top: 24px;
 font-family: 'FontAwesome';
 font-size: 12px;
}
.orion-menu .indicator:before{
 content: "f0d7";
}
.orion-menu ul li .indicator{
 left: 20px;
 top: 13px;
}
.orion-menu ul li .indicator:before{
 content: "f0da";
}


/* SOCIAL ICONS*/
.orion-menu li.social{
 float: left;
 margin-left: 20px;
}
.orion-menu li.social a{
 display: inline-block;
 padding: 24px 6px 24px;
 color: #bababa;
 position: relative;
 width: 15px;
 text-align: center;
}
.orion-menu li.social a:hover{
 color: #fff;
}
.orion-menu li.social a .tooltip{
 width: 70px;
 padding: 5px;
 background: #555555;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 opacity: 0;
 position: absolute;
 font-size: 9px;
 top: -20px;
 left: -27px;
 border-radius: 2px;
 text-align: center;
 -o-transition: opacity .3s linear;
 -webkit-transition: opacity .3s linear;
 -moz-transition: opacity .3s linear;
 transition: opacity .3s linear;
}
.orion-menu li.social a:hover .tooltip{
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 opacity: 1;
}
.orion-menu li.social a .tooltip:before,
.orion-menu li.social a .tooltip:after{
 content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #555555;
}


/* COLLAPSIBLE CONFIGURATION */
.orion-menu > li.showhide{
 display: none;
 width: 100%;
 height: 50px;
 cursor: pointer;
 color: #dedede;
 background: #454545;
}
.orion-menu > li.showhide span.title{
 margin: 16px 0 0 18px;
 float: right;
}
.orion-menu> li.showhide span.icon{
 margin: 17px 20px;
 float: left;
}
.orion-menu > li.showhide .icon em{
 margin-bottom: 3px;
 display: block;
 width: 20px;
 height: 2px;
 background: #ccc;
}


/* blue */
.blue, .blue li ul, .blue ul li ul, .blue > li.showhide{ background: #008C9E; }
.blue li a, .orion-menu li.social a{ color: #dedede; }
.blue li.active > a, .blue ul li:hover > a, .blue li.social a .tooltip{ background: #009fb4; }
.blue li.search form input.search:focus{ background-color: #009fb4; }
.blue li.social a .tooltip:before, .blue li.social a .tooltip:after{ border-top-color: #009fb4; }



@media only screen and (max-width: 768px) {
 .orion-menu{
  margin: 0;
  display: block;
 }
 .orion-menu li{
  display: block;
  width: 100%;
 }
 .orion-menu > li > a{
  padding: 16px 70px 16px 18px;
  text-align: left;
  border-top: solid 1px rgba(255, 255, 255, 0.05);
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box;
 }
 .orion-menu a{
  width: 100%;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 .orion-menu ul, 
 .orion-menu ul li ul{
  width: 100%;
  left: 0;
  padding: 0 20px;
  position: static;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 .orion-menu .indicator{
  right: 20px;
  top: 18px;
 }
 .orion-menu ul li .indicator{
  display: block;
 }
 .orion-menu ul li .indicator:before{
  content: "f0d7";
 }
 .orion-menu li.search{
  border-bottom: none;
 }
 .orion-menu li.search form{
  margin: 20px 18px 0 18px;
 }
 .orion-menu li.search form input.search,
 .orion-menu li.search form input.search:focus{
  width: 100%;
  color: #fff;
  background-color: #555555;
  background-position: 99% 8px;
  cursor: auto;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 
 .orion-menu li.social a{
  display: inline;
  padding: 8px 15px 8px 15px;
  border: none;
 }
 .orion-menu li.social a:hover{
  color: #fff;
 }
 .orion-menu li.social a:hover .tooltip{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0;
 }
 .orion-menu > li.showhide{
  display: block;
 }
}
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){

$.fn.orion = function(options){
 var settings = {
  speed     : 300,         // dropdown speed (ms)
  animation   : "fading",    // dropdown or panel animation
  indicator   : true     // dropdown indicator
 }
 $.extend( settings, options );
 $(".orion-menu").prepend("<li class='showhide'><span class='title'>القائمة</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");
 
 var firstClick = 0;
 
 if(settings.indicator == true){
  $(".orion-menu").find("li").each(function(){
   if($(this).children("ul").length > 0){
    $(this).append("<span class='indicator'></span>");
   }
  });
 }
 
 detectScreen();
 
 $(window).resize(function() {
  detectScreen();
 });
 
 function detectScreen(){
  $(".orion-menu").find("li, a").unbind();
  $(".orion-menu").find("ul").hide(0);
  if(window.innerWidth <= 768){
   showCollapse();
   bindClick();
   if(firstClick == 0){
    $(".orion-menu > li:not(.showhide)").hide(0);
   }
  }
  else{
   hideCollapse();
   bindHover();
  }
 }

 function bindHover(){
  $(".orion-menu li").bind("mouseover", function(){
   $(this).children("ul").stop(true, true).fadeIn(settings.speed).addClass(settings.animation);
  }).bind("mouseleave", function(){
   $(this).children("ul").stop(true, true).fadeOut(settings.speed).removeClass(settings.animation);
  });  
 }
 function bindClick(){  
  $(".orion-menu li:not(.showhide)").each(function(){
   if($(this).children("ul").length > 0){
    $(this).children("a").bind("click", function(){
     $(this).siblings("ul").slideToggle(settings.speed).addClass(settings.animation);
     firstClick = 1;
    });
   }
  });
 }
 function showCollapse(){
  $(".orion-menu > li.showhide").show(0);
  $(".orion-menu > li.showhide").bind("click", function(){
   if($(".orion-menu > li").is(":hidden")){
    $(".orion-menu > li").slideDown(300);
    firstClick = 1;
   }
   else{
    $(".orion-menu > li:not(.showhide)").slideUp(300);
    $(".orion-menu > li.showhide").show(0);
    firstClick = 0;
   }
  });
 }
 function hideCollapse(){
  $(".orion-menu > li").show(0);
  $(".orion-menu > li.showhide").hide(0);
 }
}
$(document).ready(function(){
    $(".panel a").click(function(e){
     e.preventDefault();
     var style = $(this).attr("class");
     $(".orion-menu").removeAttr("class").addClass("orion-menu").addClass(style);
    });
   });
jQuery(document).ready(function(){  
    $().orion({
     speed: 500
    });
   });
});//]]>  

</script>


</head>
<body>
  
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>    </script>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

<ul class="orion-menu">
   <li>
                <a href='/'>
                  الرئيسية
                </a>
              </li>
              <li>
                <a href='#'>
                  صور
                </a>
                <ul>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%B5%D9%88%D8%B1'>
                      صور
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%B1%D9%85%D8%B2%D9%8A%D8%A7%D8%AA'>
                      رمزيات
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%AE%D9%84%D9%81%D9%8A%D8%A7%D8%AA'>
                      خلفيات
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%85%D8%B3%D8%A7%D8%A1%20%D9%88%D8%B5%D8%A8%D8%A7%D8%AD%20%D8%A7%D9%84%D8%AE%D9%8A%D8%B1'>
                      صور صباح ومساء الخير
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%AE%D9%84%D9%81%D9%8A%D8%A9%20%D8%A7%D9%84%D8%A3%D8%B3%D8%A8%D9%88%D8%B9'>
                      خلفية الأسبوع
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%85%D8%AF%D9%87%D8%B4%D8%A9'>
                      صور مدهشة
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%81%D9%88%D8%AA%D9%88%D8%BA%D8%B1%D8%A7%D9%81%D9%8A%D8%A9'>
                      صور فوتوغرافية
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%85%D8%B6%D8%AD%D9%83%D8%A9'>
                      صور مضحكة
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='https://madad2.com/search/label/بلوجر' target='_blank'>
                  بلوجر
                </a>
              </li>
              <li>
                <a href='#'>
                  برامج
                </a>
                <ul>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%A8%D8%B1%D8%A7%D9%85%D8%AC%20%D8%A7%D9%84%D9%83%D9%85%D8%A8%D9%8A%D9%88%D8%AA%D8%B1'>
                      برامج الكمبيوتر
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%A8%D8%B1%D8%A7%D9%85%D8%AC%20%D8%A7%D9%84%D9%87%D8%A7%D8%AA%D9%81'>
                      برامج الهاتف
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%A7%D9%86%D8%AF%D8%B1%D9%88%D9%8A%D8%AF'>
                      اندرويد
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%A7%D9%84%D8%B9%D8%A7%D8%A8'>
                      العاب
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  إسلاميات
                </a>
                <ul>
                  <li>
                    <a href='https://madad2.com/p/blog-page_11.html'>
                      القران الكريم
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/search/label/%D8%A7%D8%B3%D9%84%D8%A7%D9%85%D9%8A%D8%A7%D8%AA'>
                      اسلاميات
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  أدوات تحرير الصور
                </a>
                <ul>
                  <li>
                    <a href='https://madad2.com/p/blog-page_27.html' target='_blank'>
                      محرر الصور
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_23.html' target='_blank'>
                      2محرر الصور
                    </a>
                  </li>
                  <li>
                    <a href='http://www.photoshop-online.madad2.com/' target='_blank'>
                      فوتوشوب أون لاين
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  أدوات
                </a>
                <ul>
                  <li>
                    <a href='https://madad2.com/p/blog-page_3482.html' target='_blank'>
                      تحويل كود أدسنس
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_10.html' target='_blank'>
                      أعرف IP جهازك
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/cellspacing0-stylewidth-99-function.html' target='_blank'>
                      عداد الأحرف
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_26.html' target='_blank'>
                      صانع اكواد الالوان
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/html-javascribt.html' target='_blank'>
                      أداة تشفير/ فك تشفير HTML JavaScript
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/2013/10/Decoration-2014.html' target='_blank'>
                      أكتب أسمك على شكل قلب حب&#9829;
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/2014/07/stylish-fonts-for-facebook-2015.html' target='_blank'>
                      زخرف اسمك
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  روابط مفيدة
                </a>
                <ul>
                  <li>
                    <a href='http://flash-girls.blogspot.com/' target='_blank'>
                      ألعاب فلاش أون لاين
                    </a>
                  </li>
                  <li>
                    <a href='http://mdadalgled.blogspot.com/' target='_blank'>
                      أجمل الخلفيات HD
                    </a>
                  </li>
                  <li>
                    <a href='http://androidarbi.blogspot.com/' target='_blank'>
                      تطبيقات الاندرويد
                    </a>
                  </li>
                  <li>
                    <a href='http://www.templates.madad2.com/' target='_blank'>
                      قوالب بلوجر
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  المزيد..
                </a>
                <ul>
                  <li>
                    <a href='https://madad2.com/p/blog-page_17.html' target='_blank'>
                      أتصل بنا
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/bptoc-border-0px-solid-000000.html' target='_blank'>
                      خريطة المدونة
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_3585.html' target='_blank'>
                      إنضم إلينا
                    </a>
                  </li>
                  <li>
                    <a href='https://madad2.com/p/blog-page_3.html' target='_blank'>
                      قسم المساعدة
                    </a>
                  </li>
                </ul>
              </li>
    <li class="social">
     <a href="http://www.facebook.com/mdadice"><i class="icon-facebook"></i><span class="tooltip">Facebook</span></a>
     <a href="http://twitter.com/mohammed1811990"><i class="icon-twitter"></i><span class="tooltip">Twitter</span></a>
     <a href="http://www.pinterest.com/mohammedsyria/"><i class="icon-pinterest"></i><span class="tooltip">Pinterest</span></a>
     <a href="https://plus.google.com/+مدادالجليد"><i class="icon-google-plus"></i><span class="tooltip">Google Plus</span></a>
    </li>
   </ul>

ثم التعديل على الروابط بما تناسبك ثم حفظ

ملاحظة تستطيع حذف أو زيادة الروابط

من مداد الجليد

لا توجد أراء حول “أفضل قائمة منسدلة لمدونات بلوجر متجاوبة”

يقول مجهول:

2026-08-12 الساعة 6:17 م

شكرا لك اخي جربت الطريقة تعمل مائة بالمائة بعد حذفي لاكواد القائمة القديمة جزاك الله كل خير

رد
1. يقول مداد الجليد:
  
  2026-08-12 الساعة 6:17 م
  
  العفو أخي كل التوفيق لك
  
  رد
يقول مداد الجليد:

2026-08-12 الساعة 6:17 م

طالما نك عرفت الرابط لماذا لم تضعه
فقط احذف الرابط
http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1
واضف الرابط الخاص بك مكانه

رد
يقول Seaf EL Din:

2026-08-12 الساعة 6:17 م

السلام عليكم ورحمة الله وبركاته شكرا أخي علي هذه التدوينة المفيدة ولكن انا عندي مشكلة وهي أن قالب مدونتني لا يوجد به قوائم منسدلة في الأقسام أرجو منك وضع طريقة نهائية للكود او أخد قالبي ووضع القوائم المنسدلة به ورفعه مرة أخري
أرجو الرد والسلام عليكم ورحمة الله وبركاته
رابط مدونتني للمعاينة http://alshabh4download.blogspot.com/

رد
1. يقول مداد الجليد:
  
  2026-08-12 الساعة 6:17 م
  
  اهلاً وسهلاً بك.. تسعدني خدمتك لكن كما هو ظاهر ان مدونتك تحوِ على قائمة لكن إذا كنت اردت تبديلها بهذه القائمة على الرحب والسعى قم برفع قالب مدونتك على مركز التحميل الخاص بنا http://mzy.in/up/ ثم أعطني الرابط
  
  رد
يقول مجهول:

2026-08-12 الساعة 6:17 م

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

رد
يقول عالم الإبداع:

2026-08-12 الساعة 6:17 م

ماقدرت احطها

رد
يقول مجهول:

2026-08-12 الساعة 6:17 م

اخى العزيز لى طلب بسيط عند حضرتك على افتراض ان هذا الرابط فى القالب
<a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1'>

اريد ان اعدل عليه واضع هذا الرابط مكانه
http://www.almajec.tk/2018/05/sky-sports-football.html
الرجاء التكرم من حضراتكم وتعديله وترسله لى ولكم جزيل الشكر

رد
يقول مداد الجليد:

2026-08-12 الساعة 6:17 م

قد تعطل القوائم الأخرى الموجودة في القالب في عدم ظهور هذه بشكل جيد أو تؤثر على عملها يجب حذف جميع اكواد القوائم القديمة Javascript و html و css

رد
يقول مداد الجليد:

2026-08-12 الساعة 6:17 م

إن شاء الله اخي الكريم, شكراً لتقييمك ونتطلع لمساعدتك لاحقاً إذا إحتاج الأمر بالتوفيق.

رد
يقول مداد الجليد:

2026-08-12 الساعة 6:17 م

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

رد
1. يقول مجهول:
  
  2026-08-12 الساعة 6:17 م
  
  السلام عليكم ورحمة الله وبركاته
  أخي الكريم جزاك الله الجنة ووالديك ومن تحب على شروحك المتميزة .. لكن كيف أجعل القائمة منسدلة ؟ فقط توجد الأقسم الأساسية
  
  رد
يقول مداد الجليد:

2026-08-12 الساعة 6:17 م

تأكد بأن مكتبة ajax موجودة في مدونتك وإن لم تكن موجودة عليك اضافتها في اول طريقة وإذا كانت موجودة لايجب إضافتها

رد

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

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

طريقة سهلة

من مداد الجليد

لا توجد أراء حول “أفضل قائمة منسدلة لمدونات بلوجر متجاوبة”

اترك تعليقاً إلغاء الرد

فاتك

أربع أدوات يومية تجعل حياتك الرقمية أسهل

لماذا تعد بوكسات محاصيل القهوة خيارًا اقتصاديًا وذكيًا لعشاق القهوة؟

تطور تجربة العملاء – كيف يجب أن تعمل خدمة الدعم في منصة المراهنات الموثوقة؟

من هم نجوم بطولة العالم التي زادت قيمتهم بشكل كبير؟

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

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

طريقة سهلة

من مداد الجليد

مقالة ذات صلة

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

بوابة اللغة تسبق شراء Guest Post للحملات الدولية

نصائح أمان الهواتف الذكية: كيفية حماية بياناتك الشخصية

لا توجد أراء حول “أفضل قائمة منسدلة لمدونات بلوجر متجاوبة”

اترك تعليقاً إلغاء الرد

فاتك

أربع أدوات يومية تجعل حياتك الرقمية أسهل

لماذا تعد بوكسات محاصيل القهوة خيارًا اقتصاديًا وذكيًا لعشاق القهوة؟

تطور تجربة العملاء – كيف يجب أن تعمل خدمة الدعم في منصة المراهنات الموثوقة؟

من هم نجوم بطولة العالم التي زادت قيمتهم بشكل كبير؟