How to Add Categories Menu in Blogger - Mega Menu 2026

 

Blogger default menu = Pages only, no categories. Categories menu = user finds content fast, SEO internal linking, looks like pro blog. Mega menu = show recent posts under each category on hover.

In Post #146, add mega menu.

Step 1: Add Categories Menu HTML in Header

1. Blogger → Theme → Edit HTML → Find <nav> or class='menu' or header bottom → Replace with:

<nav class='cat-mega-menu'>
<ul class='mega-ul'>
<li><a href='/'>Home</a></li>
<li class='has-mega'><a href='/search/label/Blogger'>Blogger ▾</a>
  <div class='mega-box'>
    <div class='mega-links'>
      <a href='/search/label/Blogger'>All Blogger Guides</a>
      <a href='/search/label/SEO'>SEO Tips</a>
      <a href='/search/label/Widget'>Widgets</a>
      <a href='/p/sitemap.html'>Sitemap</a>
    </div>
    <div class='mega-posts' id='mega-blogger'>Loading...</div>
  </div>
</li>
<li class='has-mega'><a href='/search/label/Monetization'>Monetization ▾</a>
  <div class='mega-box'>
    <div class='mega-links'>
      <a href='/search/label/AdSense'>AdSense</a>
      <a href='/search/label/Affiliate'>Affiliate</a>
    </div>
    <div class='mega-posts' id='mega-money'>Loading...</div>
  </div>
</li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
</ul>
</nav>

Step 2: Add Mega Menu CSS

1. Find ]]></b:skin> → Above paste:

/* Mega Menu Post 146 */
.cat-mega-menu{background:#000;color:#fff;padding:0 16px;position:sticky;top:0;z-index:998;}
.mega-ul{list-style:none;margin:0;padding:0;display:flex;gap:20px;align-items:center;height:50px;}
.mega-ul a{color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:10px 0;display:block;}
.has-mega{position:relative;}
.mega-box{position:absolute;left:0;top:100%;background:#fff;color:#000;width:600px;border-radius:0 0 12px 12px;box-shadow:0 10px 30px rgba(0,0,0,0.15);display:none;grid-template-columns:160px 1fr;overflow:hidden;border:1px solid #e5e7eb;}
.has-mega:hover.mega-box{display:grid;}
.mega-links{background:#f9fafb;padding:16px;display:flex;flex-direction:column;gap:8px;}
.mega-links a{color:#333;font-size:13px;padding:6px 0;}
.mega-posts{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mega-post-item a{font-size:13px;color:#111;text-decoration:none;line-height:1.3;}
.mega-post-item img{width:100%;height:80px;object-fit:cover;border-radius:8px;margin-bottom:6px;}
@media(max-width:768px){
.cat-mega-menu{overflow-x:auto;}.mega-box{position:fixed;left:5%;right:5%;width:90%;grid-template-columns:1fr;}
}

Step 3: Auto Load Recent Posts in Mega Menu

1. Find </body> → Above paste:

<script>
function loadMega(label, id){
  var s=document.createElement('script');
  s.src='/feeds/posts/default/-/'+label+'?alt=json-in-script&max-results=4&callback='+id;
  document.body.appendChild(s);
}
function megaBlogger(json){ showMega(json,'mega-blogger'); }
function megaMoney(json){ showMega(json,'mega-money'); }
function showMega(json, wrapId){
  var posts=json.feed.entry; var wrap=document.getElementById(wrapId); if(!posts||!wrap) return;
  var html='';
  for(var i=0;i<posts.length;i++){
    var p=posts[i]; var url=''; for(var j=0;j<p.link.length;j++){ if(p.link[j].rel=='alternate'){ url=p.link[j].href; break; } }
    var title=p.title.$t; var thumb=p.media$thumbnail? p.media$thumbnail.url.replace('/s72-c/','/w200-h120-c/') : '';
    html+='<div class="mega-post-item"><a href="'+url+'"><img src="'+thumb+'"/>'+title+'</a></div>';
  }
  wrap.innerHTML=html;
}
document.addEventListener('DOMContentLoaded', function(){
  loadMega('Blogger','megaBlogger');
  loadMega('Monetization','megaMoney');
});
</script>

Step 4: Mobile Hamburger Menu

<button id="mob-menu-btn" style="display:none;background:#000;color:#fff;border:none;padding:10px;">☰ Menu</button>
<script>
document.getElementById('mob-menu-btn').onclick = function(){
  document.querySelector('.mega-ul').classList.toggle('show-mobile');
}
</script>
<style>
@media(max-width:768px){
#mob-menu-btn{display:block;}.mega-ul{display:none;flex-direction:column;height:auto;}.mega-ul.show-mobile{display:flex;}
}
</style>

Step 5: Labels to Add for This Menu (Create Now)

• Blogger, SEO, Widget, Monetization, AdSense, 2026
• Go to Posts → Select all Post #121-145 → Labels → Add Blogger → Done
• For Post #133-135 add AdSense label extra

Post #146 Complete - Mega menu done.

Next Post #147: How to Add Table of Contents Auto - advanced.