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

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

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

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

هذه القوائم جميعها متوافق مع الاجهزة المحمولة والمكتبية وكل الشاشات الأخرى فهي متجاوبة %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,'"> »</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'> أكتب أسمك على شكل قلب حب♥ </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>≡<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('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cen&hl=en'); return false;' rel='nofollow' target='_blank' title='English'>ترجمة</a></li> </ul> </nav>

ثم حفظ القالب

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