إضافة Mega Menu على قائمة الروابط لمدونات بلوجر

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

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

<style type='text/css'>
/*<![CDATA[*/
[Your List Name] .mega-menu{visibility:hidden;opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);-webkit-transition:.2s;transition:.2s;position:absolute;top:100%;min-width:250px;background:rgb(255,255,255);-webkit-box-shadow:0 2px 6px -1.1px rgb(0 0 0 / 11%);box-shadow:0 2px 6px -1.1px rgb(0 0 0 / 11%);padding:15px;right:0;max-width:100%;overflow:hidden;margin:0 auto;left:0;z-index:9}
[Your List Name].parent:hover .mega-menu{visibility:visible;opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px);-webkit-box-shadow:0 8px 30px -4.4px rgb(0 0 0 / 14%);box-shadow:0 8px 30px -4.4px rgb(0 0 0 / 14%)}
.mega-menu svg{display:inline-block;width:1em;height:1em;stroke-width:0}
.mega-items{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mega-items .item{}
.mega-items .item .thumb{margin-bottom:10px}
.mega-items .item .thumb,.mega-items .item .thumbnail-container{position:relative;overflow:hidden;z-index:0}
.mega-items .item .thumb .thumbnail-container:after{box-sizing:border-box;pointer-events:none;position:absolute;top:0;left:-5px;width:100%;height:100%;background:rgba(255,255,255,0.5);content:'';-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-108%,0)}
.mega-items .item .thumb:hover .thumbnail-container:after{-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transition:transform .6s}
.mega-items .item .thumbnail-container{display:block;height:0;background:#f7f7f7;background-position:50%;background-size:cover;padding-bottom:71.5%}
.mega-items .item .thumbnail-container img{position:absolute;top:0;bottom:0;left:0;width:100%;min-height:100%;color:#a0a0a0;z-index:-1;height:auto}
.mega-items .item .thumb .tag{position:absolute;z-index:3;bottom:10px;right:10px;margin:0;line-height:1}
.mega-items .item .thumb .tag a{display:inline-block;margin-left:5px!important;text-transform:uppercase;font-weight:500;font-size:16px!important;background:#2e3543;color:#fff;height:25px!important;line-height:25px;padding:0 6px!important;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}
.mega-items .item a{padding:0!important;margin:0!important;font-size:inherit!important}
.mega-items .item a:after,.mega-items .item a:before{display:none!important}
.mega-items .item .details{text-align:right}
.mega-items .item .details h2{font-size:16px;font-weight:700;line-height:1.4em;margin:0 0 5px;letter-spacing:-.02em}
.mega-items .item .details h2 a{color:#0d1317}
.mega-items .item .details .post-meta{font-size:11px;text-transform:uppercase;color:#a0a0a0}
.mega-items .item .details .post-meta>div .icon{fill:currentColor;margin-left:3px}

/*]]>*/        
    </style>
<script type='text/javascript'>
//<![CDATA[
const Mega_Menu_Name = "[Your List Name]";
function get_date(t){return new Date(t).toLocaleDateString("ar-AR",{year:"numeric",month:"long",day:"numeric"})}function get_thumb(t){var a=$("<div>").html(t);return t.indexOf("<img")>-1?a.find("img:first").attr("src").replace(/\/s72-w[0-9]+\-h[0-9]+\/?/,"/s72").replace(/\/w[0-9]+\-h[0-9]+\/?/,"/s72-c/").replace(/\/s[0-9]+(\-c)?/,"/s72-c").replace("s72-c","s600"):"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NjVOcFCHKXKenO5kXTiHmoHKhkmr8CRQItvIcdRX1BitHHWNykEm6MQcgZeGqlDuZ0NAtYxgc_elqjjSGyTFaH3xac0m3oNVDsQ-urPVTINC5kSehecTBXHMMZghlRcLP3OSsBgbNiru/s72-c/noimg.png"}function get_tag(t){try{return t}catch(a){tag="بدون تسمية"}}function postitem(t,a,e,s,i){return'<div class="item"><div class="thumb"><div class="tag"><a href="/search/label/'+i+'?&max-results=8">'+i+'</a></div><a href="'+a+'" title="'+t+'"><div class="thumbnail-container"><img src="'+e+'" alt="'+t+'"></div></a></div><div class="details"><h2 class="post-title"><a href="'+a+'" title="'+t+'">'+t+'</a></h2><div class="post-meta"><div class="post-date"><svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" fill-rule="evenodd"</path></svg><span>'+s+"</span></div></div></div></div>"}function Mega_ul(t,a,e){$.ajax({type:"GET",url:"/feeds/posts/default/-/"+t+"?alt=json-in-script&max-results="+a,dataType:"jsonp",success:function(a){var s=a.feed.entry,i="";if(s){for(var r=0;r<s.length;r++){var n,l=s[r].title.$t,c=s[r].link[4].href,d=get_thumb(s[r].content.$t);i+=postitem(l,c,d,get_date(s[r].published.$t),get_tag(s[r].category[0].term))}var o="<div class='mega-items'>"+i+"</ul>";e.append('<ul class="mega-menu">'+o+"</ul>")}else e.html('<div class="box-error"><div class="info-error">لا يوجد تسمية بهذا الاسم <span>'+t+"</span></div></div>")}})}$(document).ready(function(){$(""+Mega_Menu_Name+":not(.parent)>a").each(function(t){var a=$(this),e=$(this),s=e.text(),a=e.parent();"mega"==e.attr("href")&&(e.parent().addClass("parent").css("position","initial"),e.attr("href","/search/label/"+s+"?&max-results=10"),Mega_ul(s,4,a))})});
//]]>
</script>