اسهل طريقة لانشاء قوائم منسدلة ومتجاوبة لمدونات بلوجر للمبتدأين

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

 

القائمة الاولى:

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

 

اسهل طريقة لانشاء قوائم منسدلة ومتجاوبة لمدونات بلوجر للمبتدأين

 

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

 

طريقة تركيب القائمة
من خلال لوحة التحكم في مدونتك –>> القالب ثم أنقر على زر تحرير html الأن أبحث عن الرمز ]]></b:skin> ثم أضف الكود التالي فوقه مباشرةً:

/* Navigation
----------------------------------------------- */
#mobilenav,.rcbytag.s .comnum,.rcbytag.h .a0 .comnum,.rcbytag.v .a0 .comnum{display:none}
#nav{height:40px;position:relative}
.sf-menu,.sf-menu *{margin:0;padding:0;list-style:none}
.sf-menu li{position:relative}
.sf-menu ul{position:absolute;display:none;top:100%;right:0;z-index:99}
.sf-menu > li{float:right;margin:0 1px}
.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:block}
.sf-menu a{display:block;position:relative}
.sf-menu > li > a{font-size:110%}
.sf-menu ul ul{top:0;left:100%}
.sf-menu{float:right}
.sf-menu ul{min-width:12em;padding-top:5px;*width:12em}
.sf-menu a{padding:0 10px;height:40px;line-height:40px;text-decoration:none;zoom:1}
.sf-menu a.home{background-color:#15587D;text-indent:-9999px;padding:0;width:45px;margin-right:4px;text-indent:-9999px}
.sf-menu a{color:#FFFFFF;font-size:100%}
.sf-menu li{white-space:nowrap;*white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}
.sf-menu ul li{background-color:#333;margin:1px 0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
.sf-menu ul a{font-weight:normal;height:30px;line-height:30px}
.sf-menu ul a:hover{padding-right:12px}
.sf-menu ul ul li{background:#3C3C3C;margin:0 0 1px 2px}
.sf-menu li:hover > a,.sf-menu li.sfHover,.sf-menu > li > a.current{background-color:#15587D;-moz-transition:none;-webkit-transition:none;transition:none}
.sf-arrows .sf-with-ul{padding-left:2em;*padding-left:1em}
.sf-arrows .sf-with-ul:after{content:'';position:absolute;top:50%;left:0.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFFFFF}
.sf-arrows > li > .sf-with-ul:focus:after,.sf-arrows > li:hover > .sf-with-ul:after,.sf-arrows > .sfHover > .sf-with-ul:after{border-top-color:#FFFFFF}
.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-left:-3px;border-color:transparent;border-right-color:#FFFFFF}
.sf-arrows ul li > .sf-with-ul:focus:after,.sf-arrows ul li:hover > .sf-with-ul:after,.sf-arrows ul .sfHover > .sf-with-ul:after{border-right-color:#FFFFFF}
.sf-menu li > i{position:absolute;top:5px;left:3px;width:27px;height:22px;cursor:pointer;display:none;background-color:#15587D;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0}
.sf-menu li > i:after{content:'+';color:#FFFFFF;font-size:19px;position:absolute;right:5px;top:-2px}
.sf-menu li > i.active:after{content:'-';font-size:36px;top:-14px}
/* Social Icon */
#socialicon{float:left;width:179px;padding:8px 0}
#socialicon ul,#socialicon li{padding:0;margin:0;list-style:none}
#socialicon li{float:right;margin:0 2px}
#socialicon a{display:block;text-indent:-9999px;width:24px;height:24px;background-image:url(http://3.bp.blogspot.com/-7N7Yc9pfpq4/UZWTCyT3cLI/AAAAAAAAARk/v8jfsiRfs9c/s1600/soicon.png);background-position:-1px 0;background-repeat:no-repeat;position:relative}
#socialicon a:active{top:1px}
#socialicon .fbx{background-position:-1px 0}
#socialicon .twix{background-position:-27px 0}
#socialicon .goex{background-position:-53px 0}
#socialicon .linx{background-position:-131px}
#socialicon .pinx{background-position:-79px 0}
#socialicon .drix{background-position:-157px}
#socialicon .vmex{background-position:-183px 0}
#socialicon .rssx{background-position:-105px}
#topmenu{overflow:hidden;padding:0 5px;color:#FFFFFF;font-size:90%}
#topmenu .tgltop{float:right;height:26px;line-height:26px;padding:4px 6px}
.sf-menu a.home:before,#searchnya button:before,#view a:before,.post-footer a.timestamp-link:before,.post-footer .post-author.vcard .fn:before,.post-footer .comment-link:before,.post-footer .post-labels > span:before,.rcentpost .date:before,.rcentpost .comnum:before,.morepostag a:before,#mobilenav:before,.comments .comments-content .icon.blog-author:before{position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}
.sf-menu a.home:before,#searchnya button:before,#view a:before{text-indent:0}
.sf-menu a.home:before{width:30px;height:30px}
.sf-menu a.home:before{content:"f015";top:0;font-size:27px;left:9px}
@media only screen and (max-width:979px){
  #mobilenav{display:block;text-indent:-9999px;width:40px;top:2px;right:10px;position:absolute;height:36px;outline:0;background-color:#15587D;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFFFFF;text-decoration:none}
#mobilenav.active{color:#FFFFFF}
.sf-menu a.home:before{display:none}
#mobilenav:before{content:"f0c9";top:3px;text-indent:0;right:7px;font-size:30px}
#menunav{float:none;display:none;position:absolute;top:45px;right:10px;left:10px;z-index:99;background-color:#333;padding:5px 10px}
#menunav li{float:none;margin:0}
#menunav > li{margin:1px 0}
.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;width:auto;height:auto;padding:0 10px;line-height:30px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D}
.sf-menu ul{position:static;padding-top:0}
.sf-menu ul li,.sf-menu ul ul li{background-color:transparent}
.sf-menu ul a{padding-right:20px}
.sf-menu ul ul a{padding-right:30px}
.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:none}
.sf-menu li:hover > a,.sf-menu li.sfHover{background-color:transparent}
.sf-menu a.home,.sf-menu li:hover > a.home,.sf-menu > li > a.current{color:#FFFFFF;background-color:#15587D}
.sf-menu ul a:hover{padding-right:25px}
.sf-menu ul ul a:hover{padding-right:35px}

الأن أبحث عن الرمز </head> ثم أضف الكود التالي فوقه مباشرةً:

  <script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
   <script type='text/javascript'>
      //<![CDATA[
      //Menu Call  
      function menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return false});b(".sf-menu ul").each(function(){var d=b(this).parent("li");d.append("<i></i>")});function a(){var d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu i").css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}}}}a();b(window).resize(a);b(".sf-menu i").click(function(){var d=b(this).parent("li");var e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return false});var c=window.location.href;b("#menunav a").each(function(){if(this.href===c){var d=b(this).parents("li").children("a").addClass("current")}})};
      ;(function($){
        $.fn.superfish = function(op){
          var sf = $.fn.superfish,
              c = sf.c,
              $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
              over = function(){
                var $$ = $(this), menu = getMenu($$);
                clearTimeout(menu.sfTimer);
                $$.showSuperfishUl().siblings().hideSuperfishUl();
              },
              out = function(){
                var $$ = $(this), menu = getMenu($$), o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer=setTimeout(function(){
                  o.retainPath=($.inArray($$[0],o.$path)>-1);
                  $$.hideSuperfishUl();
                  if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                },o.delay);    },
              getMenu = function($menu){
                var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu;
              },
              addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
          return this.each(function() {
            var s = this.serial = sf.o.length;
            var o = $.extend({},sf.defaults,op);
            o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
              $(this).addClass([o.hoverClass,c.bcClass].join(' '))
              .filter('li:has(ul)').removeClass(o.pathClass);
            });
            sf.o[s] = sf.op = o;
            $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
              if (o.autoArrows) addArrow( $('>a:first-child',this) );
            })
            .not('.'+c.bcClass)
            .hideSuperfishUl();
            var $a = $('a',this);
            $a.each(function(i){
              var $li = $a.eq(i).parents('li');
              $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
            });
            o.onInit.call(this);
          }).each(function() {
            var menuClasses = [c.menuClass];
            if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
            $(this).addClass(menuClasses.join(' '));
          });
        };
        var sf = $.fn.superfish;
        sf.o = [];
        sf.op = {};
        sf.IE7fix = function(){
          var o = sf.op;
          if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
            this.toggleClass(sf.c.shadowClass+'-off');
        };
        sf.c = {
          bcClass     : 'sf-breadcrumb',
          menuClass   : 'sf-js-enabled',
          anchorClass : 'sf-with-ul',
          arrowClass  : 'sf-sub-indicator',
          shadowClass : 'sf-shadow'
        };
        sf.defaults = {
          hoverClass : 'sfHover',
          pathClass : 'overideThisToUse',
          pathLevels : 1,
          delay  : 800,
          animation : {opacity:'show'},
          speed  : 'normal',
          autoArrows : true,
          dropShadows : true,
          disableHI : false,  // true disables hoverIntent detection
          onInit  : function(){}, // callback functions
          onBeforeShow: function(){},
          onShow  : function(){},
          onHide  : function(){}
        };
        $.fn.extend({
          hideSuperfishUl : function(){
            var o = sf.op,
                not = (o.retainPath===true) ? o.$path : '';
            o.retainPath = false;
            var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
            .find('>ul').hide().css('visibility','hidden');
            o.onHide.call($ul);
            return this;
          },
          showSuperfishUl : function(){
            var o = sf.op,
                sh = sf.c.shadowClass+'-off',
                $ul = this.addClass(o.hoverClass)
            .find('>ul:hidden').css('visibility','visible');
            sf.IE7fix.call($ul);
            o.onBeforeShow.call($ul);
            $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            return this;
          }
        });
      })(jQuery);
      //]]>
    </script>

ملاحظة هامة إذا كان في قالب مدونتك أحد إصدارات ajax كمثال الكود باللون الاحمر لا حاجة لإضافته مرة أخرى ويجب حذفه

الخطوة الأخيرة آختر المكان المناسب بقالب مدونتك حيث تريد أن تظهر القائمة أو اسفل الهيدر <header/> ثم أضف الكود التالي مع التعديل على الروابط بما يناسب مدونتك وروابط مواقع التواصل الإجتماعي:

 <div class='menu'>
<div id='navitions'>
<div class='isi'>
<nav class='navix' id='nav'>
<div id='socialicon'>
<ul>
<li>
<a class='fbx' href='http://www.facebook.com/mdadice' target='_blank' title='Facebook'>
facebook
</a>
</li>
<li>
<a class='twix' href='http://twitter.com/mohammed1811990' target='_blank' title='Twitter'>
twitter
</a>
</li>
<li>
<a class='goex' href='https://plus.google.com/+مدادالجليد' target='_blank' title='Google+'>
Google+
</a>
</li>
<li>
<a class='linx' href='#' target='_blank' title='Linkedin'>
Linkedin
</a>
</li>
<li>
<a class='pinx' href='http://www.pinterest.com/mohammedmaher/' target='_blank' title='Pinterest'>
Pinterest
</a>
</li>
<li>
<a class='rssx' href='http://feeds.feedburner.com/blogspot/medad' target='_blank' title='RSS'>
RSS
</a>
</li>
</ul>
</div>
<a href='#' id='mobilenav'>
الصفحات
</a>
<ul class='sf-menu' id='menunav'>
<li>
<a class='home' href='/'>
الرئيسية
</a>
</li>
<li>
<a href='#'>
قائمة 1
</a>
<ul>
<li>
<a href='#'>
تعديل 1
</a>
</li>
<li>
<a href='#'>
تعديل 2
</a>
</li>
<li>
<a href='#'>
تعديل 3
</a>
</li>
<li>
<a href='#'>
تعديل 4
</a>
</li>
<li>
<a href='#'>
تعديل5
</a>
</li>
</ul>
</li>
<li>
<a href='#' target='_blank'>
قائمة 2
</a>
</li>
<li>
<a href='#'>
قائمة 3
</a>
<ul>
<li>
<a href='#'>
تعديل 1
</a>
</li>
<li>
<a href='#'>
تعديل 2
</a>
</li>
<li>
<a href='#'>
تعديل 3
</a>
</li>
<li>
<a href='#'>
تعديل 4
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
قائمة 4
</a>
<ul>
<li>
<a href='#'>
تعديل 1
</a>
</li>
<li>
<a href='تعديل 2'>
اسلاميات
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
أدوات تحرير الصور
</a>
<ul>
<li>
<a href='http://www.madad2.com/p/blog-page_9.html' target='_blank'>
صنع إطار لصورك
</a>
</li>
<li>
<a href='http://www.madad2.com/p/blog-page_23.html' target='_blank'>
محرر الصور
</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='http://www.madad2.com/p/blog-page_3482.html' target='_blank'>
تحويل كود أدسنس
</a>
</li>
<li>
<a href='http://www.madad2.com/p/blog-page_10.html' target='_blank'>
أعرف IP جهازك
</a>
</li>
<li>
<a href='http://www.madad2.com/p/cellspacing0-stylewidth-99-function.html' target='_blank'>
عداد الأحرف
</a>
</li>
<li>
<a href='http://www.madad2.com/p/blog-page_26.html' target='_blank'>
صانع اكواد الالوان
</a>
</li>
<li>
<a href='http://www.madad2.com/p/html-javascribt.html' target='_blank'>
أداة تشفير/ فك تشفير HTML JavaScript
</a>
</li>
<li>
<a href='http://www.madad2.com/2013/10/Decoration-2014.html ' target='_blank'>
أكتب أسمك على شكل قلب حب&#9829;
</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='#' target='_blank'>
تعديل
</a>
</li>
<li>
<a href='#' target='_blank'>
تعديل
</a>
</li>
<li>
<a href='#' target='_blank'>
تعديل 
</a>
</li>
<li>
<a href='#' target='_blank'>
قائمة 7
</a>
</li>
</ul>
</li>
</ul>
<script type='text/javascript'>menunav(jQuery);searchxx({summaryLength:100,scrthumbSize:50});</script>
</nav>
</div>
</div>
</div>

قد لا تعمل بشكل صحيح هذه القائمة إذا كان هناك قوائم اخرى في مدونتك ثم حفظ القالب

 

القائمة الثانية:

هذه القائمة خفيفة جداً وسهلة التركيب ايضاً كما انها تتضمن زر الترجمة التلقائي لاي موضوع

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

طريقة تركيب القائمة
من خلال لوحة التحكم في مدونتك –>> القالب ثم أنقر على زر تحرير html الأن أبحث عن الرمز ]]></b:skin> ثم أضف الكود التالي فوقه مباشرةً:

#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:right;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;left:9px}
@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;left:0;right:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:right}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}

الآن آختر المكان المناسب بقالب مدونتك حيث تريد أن تظهر القائمة أو اسفل الهيدر <header/> ثم أضف الكود التالي مع التعديل على الروابط بما يناسب مدونتك:

 <nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>القائمة</span></label>
<ul>
<li><a href='/' title="Home">الرئيسية</a></li>
<li><a href='#' title="وصف 1">تعديل 1</a></li>
<li><a class='prett' href='#' title="وصف">قائمة 1</a>
<ul class='menus'>
<li><a href='#' title="وصف">تعديل 1</a></li>
<li><a href='#' title="وصف">تعديل 2</a></li>
<li><a href='#' title="وصف">تعديل 3</a></li>
</ul>
</li>
<li><a href='#' title="وصف 2">قائمة 2</a></li>
<li><a class='prett' href='#' title="وصف">تعديل 1</a>
<ul class='menus'>
<li><a href='#' title="وصف 1">تعديل 1</a></li>
<li><a href='#' title="وصف 2">تعديل 2</a></li>
<li><a href='#' title="وصف 3">تعديل 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>ترجمة</a></li>
</ul>
</nav>

ثم حفظ القالب

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