3/01/2018

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






المعاينة المباشرة للإضافة Mega menu



طريقة تخصيص الإضافة Mega menu


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





لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب



لاتنسى أخذ نسخة إحتياطية من القالب

خطوة إضافة أداة قائمة الروابط

  • قم بالبحث عن (رأس الصفحة) أسفل </b:section> قم بوضع كود.html التالي ...

  • 
         <div class='clear'/>
    <b:section id='Mega-menu' maxwidgets='1' showaddelement='no'>
      <b:widget id='LinkList100' locked='true' title='القائمة الرئيسية' type='LinkList' version='1'>
        <b:includable id='main'>
     <div class='widget-content'>
       <ul>
         <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>
    </b:includable>
      </b:widget>
    </b:section>
        <div class='clear'/> 
    

    عند وضع الكود سيكون بهذا الشكل

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

    1- في حقل "أسم الموقع الجديد" : نقوم بكتابة إسم القسم
    2-  في حقل "عنوان URL للموقع الجديد" : نقوم بإضافة رابط لتسمية أو صفحة من المدونة
    3-  نضغط على إضافة إرتباط وبعد الإنتهاء من إضافة جميع الروابط نقوم بالضغط على زر الحفظ

    طريقة إضافة القوائم الفرعيه Mega Menu

    في حقل "أسم الموقع الجديد" : نقوم بإضافة علامة + متبوعة بأسم القسم
    في حقل "عنوان URL للموقع الجديد" : نقوم بإضافة رابط لتسمية بهذا الشكل ...
    //blogg-code.blogspot-com/search/label/التسمية
    ضع مكان blogg-code.blogspot-com// رابط مدونتك تستطيع أن تضيفه بدون  http ثم ضع مكان التسمية إحدى التسميات الموجودة في المدونة بهذا الشكل ..

    ملاحظة مهمة
    حاول أن تجعل رابط العنصر الرئيسي في القائمة الفرعية عبارة عن علامة مربع # كي لا ننتقل إلى رابط خارجي في حالة النقر عليه وهذا مفيد كذلك على إصدار الجوال كونه لايوجد خاصية hover في الأجهزة الذكية وإليك صورة عن ذلك ...






لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية كود.js

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
       <!--Mega menu-->
    <script type='text/javascript'>
    //<![CDATA[
    (function(e){var t=function(e,t){this.elem=e;this.settings=t;this.addAjaxHtml();this.ajaxcall=null;this.lielem=this.elem.find(".verticlemenu li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(//[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(//[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(//[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.lielem.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.numPosts};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loader"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loader").remove()},showPosts:function(t){var n=this,r=[],i,s,o,tim,yer,day,mon,month,ba,rom;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s640-c/"):n.settings.defaultImg;tim=u.published.$t.substring(0,10);ba=u.author[0].name.$t;yer=tim.substring(0,4);day=tim.substring(8,10);mon=tim.substring(5,7);month=n.settings.MonthNames[parseInt(mon,10)-1];daystr= day+ ' ' + month + ' ' + yer ;r.push('<li><a rel="nofollow" title="',i,'" href="',s,'"><div class="imgCont"><img alt="',i,'" src="',o,'"/><div class="overlay-icon"></div></div><span class="mega-author">',ba,'</span><span class="mega-date">',daystr,'</span><h3 title="',i,'">',i,"</h3></a></li>")}):r.push("<h5>","لاتوجد مواضيع للعرض!!","</h5>");this.container.html(r.join(""));this.lielem.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>خطأ !! إنقطع الإتصال!</h5>")}},addArrow:function(){this.lielem.closest("li").find("span").remove();this.lielem.removeClass("hoverover");this.li.addClass("hoverover");e("<span></span>",{"class":"menuArrow"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var x=e(this);x.find(".submenu").addClass("hoveracive").fadeIn().animate({opacity: 1, marginTop: "0"},100);var t=e(this);t.find("a:first").addClass("hoverover");var r=e(this).find("ul.verticlemenu li").height()*e(this).find("ul.verticlemenu li").length;t.find("ul.postslist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hoverover"),e(this).find(".submenu").fadeOut().animate({opacity: 0, marginTop: "20px"},10)})},addAjaxHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("adajaxmenu").find(">li").find("ul:first").addClass("verticlemenu").wrap(e("<div></div>",{"class":this.settings.divClass}));this.elem.find(".submenu").parent().addClass("megaaccordion");e("ul.verticlemenu").after(e("<ul></ul>",{"class":"postslist"}))},requestFirstAjax:function(e){e=e.find(".verticlemenu li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.ajaxBloggerMenu=function(n){var r={},i=e.extend({divClass:"submenu",postsClass:"postslist"},r,n);return this.each(function(){var n=new t(e(this),i)})};
    //edit yor stayle
    var $mega = jQuery.noConflict();$mega(document).ready(function(){$mega("#adajaxmenu").ajaxBloggerMenu({
    numPosts:8,
    MonthNames: ["جانفى", "فيفرى", "مارس", "أبريل", "ماى", "جوان", "جويلية", "أوت", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"],
    defaultImg:"//3.bp.blogspot.com/-wvl3rLbmxlw/Wfsw0_rujFI/AAAAAAAAB-A/pHhFH89qOzE6bpecsHB23VN682xxWbZVACLcBGAs/s1600/no-image.png"
    })});})(jQuery);
    //LinkList list html
    $("#LinkList100").each(function() {var e = "<nav class='navigation' id='Megamenu-ba88'><div class='resp-desk chow-m'><a class='menubtn' href='#' id='duled-m1-menu'><i class='fa fa-bars'></i></a></div><div id='opj-m-mu-ba'><label class='switch-night-mode'><input id='js-switch' type='checkbox'/><div class='slidswi'></div></label><div class='opj random-button' id='abt-random'/><div class='opj fullecran'><a href='#' onclick='toggleFullScreen()'/></div></div><ul class='menu admenus' id='adajaxmenu'><li><li><div class='resp-desk close-m'><a class='menubtn' href='#' id='duled-m2-menu'><i class='fa fa-close'></i></a></div></li><li><a class='Meg-Home' href='/'><i class='fa fa-home'/></a></li><ul>";$("#LinkList100 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='childxmenu'>")});e += "</ul></li></ul></nav>";$(this).html(e);$("#LinkList100 ul").each(function() {var e = $(this);if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove()});$("#LinkList100 li").each(function() {var e = $(this);if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove()})});
    //activeTab menu mobil
    var touchmega = $('#duled-m1-menu, #duled-m2-menu');var menumega = $('.menu');$(touchmega).on('click', function(e) {e.preventDefault();menumega.slideToggle();});$(window).resize(function() {var w = $(window).width();if (w > 800 && menumega.is(':hidden')) {menumega.removeAttr('style');}});
    //FullScreen-button
    function toggleFullScreen(){document.fullScreenElement&&null!==document.fullScreenElement||!document.mozFullScreen&&!document.webkitIsFullScreen?document.documentElement.requestFullScreen?document.documentElement.requestFullScreen():document.documentElement.mozRequestFullScreen?document.documentElement.mozRequestFullScreen():document.documentElement.webkitRequestFullScreen&&document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT):document.cancelFullScreen?document.cancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitCancelFullScreen&&document.webkitCancelFullScreen()}
    //random-button
    function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}}function fetchLuck(luck){ script = document.createElement('script');script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript';document.getElementsByTagName('head')[0].appendChild(script); }function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber;a.onclick = function(){fetchLuck(this.rel);}; document.getElementById('abt-random').appendChild(a);};document.write('<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky" type="text/javascript"><\/script>');
    //mode night
    document.getElementById("js-switch").addEventListener("change", function() {document.body.classList.toggle("dark")});
    //]]>
    </script>  
    
    شرح الكود
    الكود defaultImg المحدد بهذا اللون خاص برابط صورة بديلة لموضوع لايحتوي على صور
    الكود LinkList المحدد بهذا اللون خاص أو يعمل على إستغلال أداة قائمة الروابط لغرض تسهيل عملية إنشاء الأقسام
    الكود activeTab المحدد بهذا اللون خاص بشريحة التبديل في إصدار الجوال أي إضهار وإخفاء القائمة كما هو معروف
    الكود FullScreen المحدد بهذا اللون خاص بزر وضع كامل الشاشة
    الكود random المحدد بهذا اللون خاص بزر تدوينة عشوائية
    الكود mode night المحدد بهذا اللون خاص بزر الوضع الليلي لحماية العين
    الكود numPosts:8, المحدد بهذا اللون خاص بعدد عرض المواضيع في المعاينة غير الرقم 8 بما يناسبك



لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة النهائية كود.css

  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css التالي ..

  • 
    /*=====================================
    = Mega menu
    =====================================*/
    div#LinkList100 .widget-content{display:none;}
    #Megamenu-ba88{position:relative;display:block;width:100%;}
    #Megamenu-ba88 a{text-decoration:none;}
    #Megamenu-ba88 a.hoverover{background:rgba(0,0,0,0.1)!important;}
    #adajaxmenu{width:100%;max-width:100%;position:relative;}
    .admenus *{margin:0;padding:0;}
    ul#adajaxmenu li ul{display:none;}
    ul#adajaxmenu li:hover ul{display:block;}
    ul.admenus{list-style:none;line-height:normal;overflow:visible!important;margin:0;padding:0;}
    ul.admenus:after{margin:0;padding:0;content:"";display:block;height:0;clear:both;}
    ul.admenus li{float:right;display:inline;font-size:14px;}
    ul.admenus li a{cursor:pointer;display:block;line-height:normal;padding:10px 15px;margin:15px 5px;font-size:14px;font-weight:700;text-transform:none;}
    ul.admenus ul li a{margin:5px;}
    ul.admenus div ul li a:hover{background:rgba(0,0,0,0.1)!important;}
    ul.admenus li a i{margin:0 5px;font-size:1.33333333em;line-height:normal;vertical-align:-15%;}
    ul.admenus li:hover ul{display:block;}
    ul.admenus ul li{z-index:72;float:none;min-width:160px;text-shadow:none;}
    ul.admenus ul ul{display:none;left:100%;top:0;}
    ul.adajaxmenu li div.submenu{position:absolute;width:100%;z-index:90;right:0;margin-top:20px;overflow:hidden;min-height:150px;display:none;}
    ul.adajaxmenu ul,ul.adajaxmenu ul li{display:inline-block!important;border:0 none!important;margin:0!important;padding:0!important;}
    ul.adajaxmenu ul li{background:none!important;float:none!important;position:relative;}
    ul.adajaxmenu ul.verticlemenu{position:relative;width:15%;right:0;top:0;bottom:0;}
    ul.verticlemenu li{display:block!important;width:100%;}
    ul.adajaxmenu ul.postslist{background: rgba(0, 0, 0, 0.14) !important;position:relative;display:block;width:85%;float:left;}
    ul.adajaxmenu ul.postslist li{overflow:hidden;position:relative;width:25%;width:calc(100% / 4);margin:0!important;text-align:center;}
    ul.adajaxmenu ul.postslist li a .imgCont{width:auto;height:150px;overflow:hidden;position:relative;display:block;margin:0 auto;border-width:5px;border-style:solid;}
    ul.adajaxmenu ul.postslist li a .imgCont img{width:100%;height:auto;display:block;}
    ul.admenus li a.Meg-Home{padding:0!important;margin:10px 10px!important;font-size:1.5em;vertical-align:inherit;position:relative;border-width:5px;border-style:solid;height:55px;width:55px;text-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;-moz-box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;-ms-box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;-o-box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;}
    ul.adajaxmenu ul.postslist li a{text-align:right;background:transparent!important;font-size:14px!important;padding:15px 20px!important;margin:0!important;float:right!important;border-left:1px solid rgba(255,255,255,.1);}
    ul.adajaxmenu ul.postslist li a h3{display:block;margin:5px 0!important;padding:5px!important;font-size:14px;font-weight:600;clear:both;overflow:hidden;height:60px;}
    ul.postslist h5{padding:10px;font-size:15px;font-weight:700;}
    /*====abbr + author======*/
    ul.adajaxmenu ul.postslist li a span{font-size:10px;float:right;direction:ltr;margin:5px 0;background-color:rgba(0, 0, 0, 0.23);position:relative;font-family:Segoe UI,Tahoma;overflow:hidden;padding:3px 30px 3px 10px;border:none!important;outline:none!important;text-decoration:none!important;}
    ul.adajaxmenu ul.postslist li a span.mega-date{direction:rtl;}
    ul.adajaxmenu ul.postslist li a span:before{display:inline-block;top:0;right:0;position:absolute;width:20px;height:20px;text-align:center;font-family:fontawesome;color:rgba(0, 0, 0, 0.39);font-size:14px;padding-top:3px;}
    ul.adajaxmenu ul.postslist li a span.mega-date:before{content:"\f017";}
    ul.adajaxmenu ul.postslist li a span.mega-author:before{content:"\f007";}
    /*====before======*/
    ul.adajaxmenu ul.postslist h5:before{content: "\f05e";font-family: FontAwesome;margin: 0 8px;}
    li.megaaccordion a:before{content:"\f114";font-family:FontAwesome;margin:0 5px;font-size:1.555em;line-height:normal;vertical-align:-15%;font-weight:normal;}
    ul.adajaxmenu ul.postslist li a:before{font-size:1em;content:"\f006";position:relative;z-index:2;}
    ul.adajaxmenu ul.postslist li a:hover:before{content:"\f005"}
    ul.adajaxmenu span.menuArrow:before{color:rgba(255,255,255,0.2);pointer-events:none;content:"\f053";font:normal normal normal 20px/1 FontAwesome;display:block;margin-top:-10px;padding:0 8px;position:absolute;left:0;top:50%;width:auto;height:auto;text-align:center;}
    span.loader{pointer-events:none;position:absolute;top:20px;left:20px;width:5px;height:16px;background:rgba(255,255,255,0.2);-webkit-animation:pulse 750ms infinite;animation:pulse 750ms infinite;-webkit-animation-delay:250ms;animation-delay:250ms;}
    .loader:before,.loader:after{content:"";position:absolute;display:block;height:16px;width:5px;background:rgba(255,255,255,0.2);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-animation:pulse 750ms infinite;animation:pulse 750ms infinite;}
    .loader:before{left:10px;}
    .loader:after{left:-10px;-webkit-animation-delay:500ms;animation-delay:500ms;}
    @-webkit-keyframes pulse{50%{background:white;}}
    @keyframes pulse{50%{background:white;}}
    /*---resp-desk---*/
    #Megamenu-ba88 .resp-desk{display:none;}
    /*====option opj Mega menu====*/
    #Megamenu-ba88 #opj-m-mu-ba{position:relative;padding:0 5px;margin:15px 5px;height:100%;z-index:2;overflow:hidden;float:left;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
    #Megamenu-ba88 #opj-m-mu-ba .opj{overflow:hidden;display:inline-block;text-align:center;margin:5px;cursor:pointer;}
    #Megamenu-ba88 #opj-m-mu-ba .opj a{overflow:hidden;display:block;}
    #Megamenu-ba88 #opj-m-mu-ba .opj:hover{background:transparent;}
    #Megamenu-ba88 #opj-m-mu-ba .opj a:before{font-family:FontAwesome;font-size:14px;cursor:pointer;width:34px;height:34px;display:block;line-height:34px;font-weight:normal;}
    #Megamenu-ba88 #opj-m-mu-ba .random-button a:before{content:"\f074";}
    #Megamenu-ba88 #opj-m-mu-ba .fullecran a:before{content:"\f26c";}
    /*========================================
    stat [ night-mode ]
    ========================================*/
    /*====switch btn======*/
    .switch-night-mode{position:relative;display:inline-block;margin:5px;}
    .switch-night-mode input{display:none;}
    .switch-night-mode .slidswi{width:60px;height:30px;will-change:auto;position:relative;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.32);-webkit-box-shadow:inset -0.15em 0.15em 0.25em rgba(0,0,0,0.1);box-shadow:inset -0.15em 0.15em 0.25em rgba(0,0,0,0.1);-webkit-transition:all 250ms cubic-bezier(0.65,0,0.15,1);transition:all 250ms cubic-bezier(0.65,0,0.15,1);}
    .switch-night-mode .slidswi:before {left: 0;top: 0;will-change: auto;position: absolute;content: "\f186";font-family: FontAwesome;font-size: 14px;text-align: center;height: 30px;width: 30px;line-height: 25px;border-width:2px;border-style: solid;-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition: all 250ms cubic-bezier(0.65,0,0.15,1);transition: all 250ms cubic-bezier(0.65,0,0.15,1);}
    body.dark .switch-night-mode .slidswi:before{content:"\f185";}
    input:checked + .slidswi{background:rgba(0,0,0,0.24);-webkit-box-shadow:inset -0.1em 0.1em 0.35em -0.05em rgba(0,0,0,0.15);box-shadow:inset -0.1em 0.1em 0.35em -0.05em rgba(0,0,0,0.15);}
    input:checked + .slidswi:before{-webkit-transform:scale(1.2) translateX(2em);transform:scale(1.2) translateX(2em);}
    /*====hover======*/
    ul.adajaxmenu ul.postslist li a:hover span{padding:3px 25px 3px 10px;margin-right:10px;}
    ul.adajaxmenu ul.postslist li a:hover .imgCont{-webkit-transform:scale(1.05) translateY(-20px);-moz-transform:scale(1.05) translateY(-20px);-ms-transform:scale(1.05) translateY(-20px);-o-transform:scale(1.05) translateY(-20px);transform:scale(1.05) translateY(-20px);-webkit-box-shadow:0 4px 8px -1px rgba(0,0,0,.3);-moz-box-shadow:0 4px 8px -1px rgba(0,0,0,.3);-ms-box-shadow:0 4px 8px -1px rgba(0,0,0,.3);-o-box-shadow:0 4px 8px -1px rgba(0,0,0,.3);box-shadow:0 4px 8px -1px rgba(0,0,0,.3);}
    /*====transition======*/
    #Megamenu-ba88 a,ul.admenus li a.Meg-Home,ul.adajaxmenu ul.postslist li a span,ul.adajaxmenu ul.postslist li a .imgCont, #Megamenu-ba88 #opj-m-mu-ba .opj{-webkit-transition:.3s ease-out;-moz-transition:.3s ease-out;-ms-transition:.3s ease-out;-o-transition:.3s ease-out;-o-transition:.3s ease-out;transition:.3s ease-out;}
    /*====border-radius======*/
    #Megamenu-ba88 .resp-desk a,ul.adajaxmenu ul.postslist li h3,ul.admenus li a,ul#adajaxmenu li ul a{border-radius:0.25em;-o-border-radius:0.25em;-ms-border-radius:0.25em;-moz-border-radius:0.25em;-webkit-border-radius:0.25em;}
    ul.admenus li a.Meg-Home,#Megamenu-ba88 #opj-m-mu-ba .opj,.switch-night-mode .slidswi:before{border-radius:100%;-o-border-radius:100%;-ms-border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;}
    .switch-night-mode .slidswi{border-radius: 30px;-o-border-radius: 30px;-ms-border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;}
    /*====box-shadow======*/
    ul.adajaxmenu li div.submenu{-webkit-box-shadow:0 6px 15px rgba(0,0,0,0.16);-moz-box-shadow:0 6px 15px rgba(0,0,0,0.16);-ms-box-shadow:0 6px 15px rgba(0,0,0,0.16);-o-box-shadow:0 6px 15px rgba(0,0,0,0.16);box-shadow:0 6px 15px rgba(0,0,0,0.16);}
    /*====Page Responsive all====*/
    @media screen and (max-width:1200px){
    #Megamenu-ba88 .resp-desk{display:inline-block;padding:10px;text-transform:uppercase;font-weight:600;}#Megamenu-ba88 .resp-desk a{width:50px;height:50px;font-size:35px;margin:0;padding:10px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}#Megamenu-ba88 ul#adajaxmenu li .resp-desk{float:right;}#Megamenu-ba88 .resp-desk.close-m a{font-size:1.3333em;}
    /*----ul-----*/
    .main-nav{position:relative;margin:0;display:block;width:100%;overflow:hidden;}ul#adajaxmenu,ul#adajaxmenu .submenu{max-width:50%;width:50%;height:100%;display:none;padding:0;top:0;margin:auto;position:fixed!important;overflow:hidden!important;}ul#adajaxmenu{right:0;z-index:9999;}ul#adajaxmenu li .submenu{margin-right:100%;min-height:auto;display:block!important;z-index:-1;}ul#adajaxmenu li:hover .submenu{margin-right:50%;}ul#adajaxmenu ul{width:100%;}ul#adajaxmenu li{float:none;display:block;width:100%;font-size:14px;}ul#adajaxmenu li div.submenu .postslist,ul#adajaxmenu ul li span{display:none!important;}}/*ipad pro*/
    @media screen and (max-width:384px){ul.admenus li a{font-size:11px;}}/*nexus 4 + LG optimus L70*/
    
    /*\
    ===============================
    Themes Mega-menu [ Purple ]  
    ===============================
    \*/
    #Megamenu-ba88, ul.adajaxmenu li div.submenu, .switch-night-mode .slidswi:before, ul#adajaxmenu, ul#adajaxmenu .submenu, ul.adajaxmenu ul.postslist li a h3, ul.adajaxmenu ul.postslist li a:hover span, ul.adajaxmenu ul.postslist li a span:before {
    background: #942b7c;}
    /*==========*/
    ul.admenus li a, ul.admenus li a.Meg-Home,#Megamenu-ba88 #opj-m-mu-ba .opj, #Megamenu-ba88 .resp-desk a {
    background: #541847;}
    /*==========*/
    ul.postslist h5, ul.admenus li a, ul.admenus li a.Meg-Home, #Megamenu-ba88 #opj-m-mu-ba .opj a:before, .switch-night-mode .slidswi:before, ul.adajaxmenu ul.postslist li a span, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a h3{
    color: #d0b3c7;}
    ul.adajaxmenu ul.postslist li a:before{
    color: #b66fa6;}
    /*=========*/
    #Megamenu-ba88 a.hoverover, ul.adajaxmenu ul.postslist li a:hover span, ul.adajaxmenu ul.postslist li a:hover h3 {
    color: #ffffff!important;}
    /*=========*/
    ul.adajaxmenu ul.postslist li a .imgCont{border-color:#942b7c;}
    ul.admenus li a.Meg-Home {border-color:#b66fa6;}
    .switch-night-mode .slidswi:before {border-color:#541847;}
    /*=========*/
    ul.admenus li a.Meg-Home:hover {
        -webkit-box-shadow: 0 0 0 0 #b66fa6 inset;
        -moz-box-shadow: 0 0 0 0 #b66fa6 inset;
        -ms-box-shadow: 0 0 0 0 #b66fa6 inset;
        -o-box-shadow: 0 0 0 0 #b66fa6 inset;
        box-shadow: 0 0 0 0 #b66fa6 inset;
    }
    
    /*=====خلفية الوضع الليلي=====*/
    
    body.dark {background: #541847 !important;}
    body.dark:before{background:rgba(231,255,140,0.21);pointer-events:none;content:"";position:fixed;width:100%;height:100%;z-index:99999999;-webkit-filter:invert(100%);-moz-filter:invert(100%);-ms-filter:invert(100%);-o-filter:invert(100%);filter:invert(100%);}
    /*\
    ===============================
            [ END ]  
    ===============================
    \*/ 
    

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

ألوان جاهزة للقائمة الرئيسية Mega menu

لون أخضر



/*\
===============================
Themes Mega-menu [ green ]  
===============================
\*/
#Megamenu-ba88, ul.adajaxmenu li div.submenu, .switch-night-mode .slidswi:before, ul#adajaxmenu, ul#adajaxmenu .submenu, ul.adajaxmenu ul.postslist li a h3 {
background: #353e4d;}

/*==========*/
ul.admenus li a, ul.admenus li a.Meg-Home,#Megamenu-ba88 #opj-m-mu-ba .opj, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a:hover span, ul.adajaxmenu ul.postslist li a span:before {
background: #6cc27b;}

/*==========*/
ul.admenus li a, ul.admenus li a.Meg-Home, #Megamenu-ba88 #opj-m-mu-ba .opj a:before, ul.adajaxmenu ul.postslist li a span, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a h3{
color: #ffffff;}
ul.adajaxmenu ul.postslist li a:before, .switch-night-mode .slidswi:before, ul.postslist h5, ul.admenus li a.Meg-Home:hover, ul.adajaxmenu ul.postslist li a:hover h3{
color: #6cc27b;}

/*==========*/
ul.adajaxmenu ul.postslist li a:hover span {color: #ffffff!important;}
/*==========*/
ul.adajaxmenu ul.postslist li a .imgCont{border-color:#353e4d;}
ul.admenus li a.Meg-Home, .switch-night-mode .slidswi:before {border-color:#6cc27b;}
/*==========*/
ul.admenus li a.Meg-Home:hover {
    -webkit-box-shadow: 0 0 0 0 #6cc27b inset;
    -moz-box-shadow: 0 0 0 0 #6cc27b inset;
    -ms-box-shadow: 0 0 0 0 #6cc27b inset;
    -o-box-shadow: 0 0 0 0 #6cc27b inset;
    box-shadow: 0 0 0 0 #6cc27b inset;
}
/*=====خلفية الوضع الليلي=====*/

body.dark {background: #353e4d !important;}
body.dark:before{background:rgba(255, 255, 255, 0.36);pointer-events:none;content:"";position:fixed;width:100%;height:100%;z-index:99999999;-webkit-filter:invert(100%);-moz-filter:invert(100%);-ms-filter:invert(100%);-o-filter:invert(100%);filter:invert(100%);}
/*\
===============================
        [ END ]  
===============================
\*/

لون أحمر



/*\
===============================
Themes Mega-menu [ red ]  
===============================
\*/
#Megamenu-ba88, ul.adajaxmenu li div.submenu, .switch-night-mode .slidswi:before, ul#adajaxmenu, ul#adajaxmenu .submenu, ul.adajaxmenu ul.postslist li a h3, ul.admenus li a.Meg-Home{
background: #38333a;
}
/*==========*/
ul.admenus li a,#Megamenu-ba88 #opj-m-mu-ba .opj, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a span:before, ul.adajaxmenu ul.postslist li a:hover span {
background: #e85744;
}

/*==========*/
ul.admenus li a, #Megamenu-ba88 #opj-m-mu-ba .opj a:before, ul.adajaxmenu ul.postslist li a span, #Megamenu-ba88 .resp-desk a{
color: #38333a;
}
ul.adajaxmenu ul.postslist li a:before, .switch-night-mode .slidswi:before, ul.admenus li a.Meg-Home, ul.postslist h5, #Megamenu-ba88 #opj-m-mu-ba .opj a:hover:before, ul.adajaxmenu ul.postslist li a:hover h3{
color: #e85744!important;
}
/*=====hover=====*/
#Megamenu-ba88 a.hoverover, ul.adajaxmenu ul.postslist li a h3 {color: #6f6f6f!important;}
/*==========*/
ul.adajaxmenu ul.postslist li a .imgCont{border-color:#38333a;}
ul.admenus li a.Meg-Home, .switch-night-mode .slidswi:before {border-color:#e85744;}
/*==========*/
ul.admenus li a.Meg-Home:hover {
-webkit-box-shadow: 0 0 0 0 #e85744 inset;
    -moz-box-shadow: 0 0 0 0 #e85744 inset;
    -ms-box-shadow: 0 0 0 0 #e85744 inset;
    -o-box-shadow: 0 0 0 0 #e85744 inset;
    box-shadow: 0 0 0 0 #e85744 inset;
}
/*=====خلفية الوضع الليلي=====*/

body.dark {background: #38333a !important;}
body.dark:before{background:rgba(255, 255, 255, 0.36);pointer-events:none;content:"";position:fixed;width:100%;height:100%;z-index:99999999;-webkit-filter:invert(100%);-moz-filter:invert(100%);-ms-filter:invert(100%);-o-filter:invert(100%);filter:invert(100%);}
/*\
===============================
        [ END ]  
===============================
\*/ 

لون أصفر



/*\
===============================
Themes Mega-menu [ yellow ]  
===============================
\*/
#Megamenu-ba88, ul.adajaxmenu li div.submenu, .switch-night-mode .slidswi:before, ul#adajaxmenu, ul#adajaxmenu .submenu, ul.adajaxmenu ul.postslist li a h3, ul.admenus li a.Meg-Home{
background: #38333a;
}
/*==========*/
ul.admenus li a,#Megamenu-ba88 #opj-m-mu-ba .opj, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a span:before, ul.adajaxmenu ul.postslist li a:hover span {
background: #f2c303;
}

/*==========*/
ul.admenus li a, #Megamenu-ba88 #opj-m-mu-ba .opj a:before, #Megamenu-ba88 .resp-desk a{
color: #38333a;
}
ul.adajaxmenu ul.postslist li a:before, .switch-night-mode .slidswi:before, ul.admenus li a.Meg-Home, ul.postslist h5, ul.adajaxmenu ul.postslist li a:hover h3, #Megamenu-ba88 #opj-m-mu-ba .opj a:hover:before{
color: #f2c303!important;
}
/*=====hover=====*/
#Megamenu-ba88 a.hoverover, ul.adajaxmenu ul.postslist li a h3 {color: #6f6f6f!important;}
/*==========*/
ul.adajaxmenu ul.postslist li a .imgCont{border-color:#38333a;}
ul.admenus li a.Meg-Home, .switch-night-mode .slidswi:before {border-color:#f2c303;}
/*==========*/
ul.admenus li a.Meg-Home:hover {
-webkit-box-shadow: 0 0 0 0 #f2c303 inset;
    -moz-box-shadow: 0 0 0 0 #f2c303 inset;
    -ms-box-shadow: 0 0 0 0 #f2c303 inset;
    -o-box-shadow: 0 0 0 0 #f2c303 inset;
    box-shadow: 0 0 0 0 #f2c303 inset;
}
/*=====خلفية الوضع الليلي=====*/

body.dark {background: #38333a !important;}
body.dark:before{background:rgba(255, 255, 255, 0.36);pointer-events:none;content:"";position:fixed;width:100%;height:100%;z-index:99999999;-webkit-filter:invert(100%);-moz-filter:invert(100%);-ms-filter:invert(100%);-o-filter:invert(100%);filter:invert(100%);}
/*\
===============================
        [ END ]  
===============================
\*/

لون أزرق



/*\
===============================
Themes Mega-menu [ blue ]  
===============================
\*/
#Megamenu-ba88, ul.adajaxmenu li div.submenu, .switch-night-mode .slidswi:before, ul#adajaxmenu, ul#adajaxmenu .submenu, ul.adajaxmenu ul.postslist li a h3, ul.admenus li a.Meg-Home{
background: #ece8df;
}
/*=====btn=====*/
ul.admenus li a,#Megamenu-ba88 #opj-m-mu-ba .opj, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a span:before, ul.adajaxmenu ul.postslist li a:hover span {
background: #435c72;
}

/*==========*/
ul.admenus li a, #Megamenu-ba88 #opj-m-mu-ba .opj a:before, ul.adajaxmenu ul.postslist li a span, #Megamenu-ba88 .resp-desk a{
color: #ece8df;
}
ul.adajaxmenu ul.postslist li a:before, .switch-night-mode .slidswi:before, ul.admenus li a.Meg-Home, ul.postslist h5, ul.adajaxmenu ul.postslist li a:hover h3, #Megamenu-ba88 #opj-m-mu-ba .opj a:hover:before{
color: #435c72!important;
}
/*=====hover=====*/
#Megamenu-ba88 a.hoverover, ul.adajaxmenu ul.postslist li a h3 {color: #6f6f6f!important;}
/*==========*/
ul.adajaxmenu ul.postslist li a .imgCont{border-color:#ece8df;}
ul.admenus li a.Meg-Home, .switch-night-mode .slidswi:before {border-color:#435c72;}
/*==========*/
ul.admenus li a.Meg-Home:hover {
-webkit-box-shadow: 0 0 0 0 #435c72 inset;
    -moz-box-shadow: 0 0 0 0 #435c72 inset;
    -ms-box-shadow: 0 0 0 0 #435c72 inset;
    -o-box-shadow: 0 0 0 0 #435c72 inset;
    box-shadow: 0 0 0 0 #435c72 inset;
}
/*=====خلفية الوضع الليلي=====*/

body.dark {background: #435c72 !important;}
body.dark:before{background:rgba(255, 255, 255, 0.36);pointer-events:none;content:"";position:fixed;width:100%;height:100%;z-index:99999999;-webkit-filter:invert(100%);-moz-filter:invert(100%);-ms-filter:invert(100%);-o-filter:invert(100%);filter:invert(100%);}
/*\
===============================
        [ END ]  
===============================
\*/


ماذا عن زر الوضع الليلي night mode ؟

تخصيص زر night mode

    ستجد في الجزء المحدد الخاص بالثيمات Themes تماما في الأسفل مكان لستايل خلفية الوضع الليلي أو بالأصح هي الواجهة التي تظهر عند النقر على الزر .. إستلهمت هذه الفكرة من الوضع الليلي الخاص بالويندوز 10 لأني رأيت أنها أبسط طريقة .. إذا فبمجرد حذف ذلك الجزء من الكود سيختفي التأثير .. لأن الطريقة الصحيحة لعمل هذا الزر هي بمجرد الضغط عليه سيتحول لون القالب إلى الداكن وذلك يعني تخصيصه يدويا والفكرة هي كالأتي ..
  • قم بحذف الأكواد الموجودة أسفل /*==خلفية الوضع الليلي==*/ ثم قم بإختيار العنصر الذي تريد أن تغير لونه مثلا ..

  • 
    body.dark {
    
    background: #000000 !important;
    
    }
    

    لاحظ أننا قمنا بإضافة لون لخلفية القالب لكن الوسم body أتى متبوعا بالكلاس .dark الذي حقن بواسطة الزر عند النقر عليه ..ثم أضفنا أمام اللون عنصر الأولوية !important كذلك هو الحال مع بقية العناصر مثل الهيدر و خلفية التدوينات وغيرها .. إلا أن الكلاس هذه المرة سيكون دائما في المقدمة وإليك مثال عن تغيير لون خلفية التدوينة

    
    .dark .post-body {
    
        background: #000000 !important;
     
    }
    

    لاحظ أننا قمنا بإضافة الكلاس .dark أمام الوسم الخاص بالبوست أي لنفترض أن الخلفية للتدوينات في قالب مدونتك بيضاء الآن عند النقر على زر الوضع الليلي ستصبح الخلفية باللون الذي تختاره أنت .. كذلك هو الحال مع بقية العناصر التي تريد أن تغير لها الخلفية ولون الخط ... إلخ مع العلم أنه إذا كان لديك عنصرين يحملان نفس اللون لاداعي أن تكرر الكود مرتين فقط ضعهما في نفس العارضة وبينهما فاصلة , بالشكل الآتي

    
    .dark .post-body, .dark .sidebar {
    
        background: #000000 !important;
        color: #ffffff  !important;
     
    }
    

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