How to Build Slide Navigation in Blogger (Dark Mode + UX Tips)

If your blog is starting to feel “flat,” upgrading the navigation can instantly refresh the overall experience. One of the most popular patterns in modern UI/UX is the slide (off-canvas) navigation—a menu that neatly slides in from the side, focuses the reader’s attention, and looks great on both desktop and mobile. In this guide, you’ll learn how to add a Slide Navigation to Blogger that is clean, accessible, and fast. We’ll also include a Dark Mode toggle, so your menu adapts to different reading environments without extra plugins or heavy frameworks.

We’ll start with a live preview, then walk through all the code you need—CSS for layout and transitions, semantic HTML for the menu structure, and a small sprinkle of JavaScript to open/close the panel and handle submenus. You’ll also get UX advice, performance notes, troubleshooting, and a short FAQ. Copy, paste, tweak, and ship.

Why Use a Slide Navigation?

Slide navs have become a staple pattern across blogs, magazines, and apps because they:

Save space: The menu stays out of the way until needed, keeping the content area clean.
Reduce noise: When the menu opens, a dimmed backdrop helps readers focus on the task of navigating.
Scale nicely on mobile: Off-canvas panels feel intuitive on touch devices and pair well with hamburger toggles.
Feel modern: Smooth transitions and layered submenus lend a polished, app-like quality to Blogger templates.

Live Demo: Slide Navigation (New & Old Versions)

Explore how the slide menu looks and behaves before you add it to your own theme:

See the Pen Slide Navigation Part 2 by Rian_kuno (@rian_kuno) on CodePen.

For reference, here’s an earlier version of the pattern. Comparing both will help you pick the style that suits your theme best.

See the Pen Side/Slide Navigation by Rian_kuno (@rian_kuno) on CodePen.

What You’ll Need

A Blogger blog you can edit.
Access to Theme → Edit HTML.
5–10 minutes to copy and paste the snippets below.

Step-by-Step: Add Slide Navigation to Blogger

1) Open the Theme Editor

From the Blogger dashboard, go to Theme → Edit HTML. We’ll paste CSS into the <b:skin> or a <style> block, then add the HTML structure and a tiny script.

2) Add the CSS (layout, transitions, submenu, and backdrop)

Place this CSS right under <style> or <b:skin>. It builds the off-canvas panel, submenu caret rotation, and the dimmed overlay (.darkshadow) that appears when the menu is open. You’ll also see styles for a Dark Mode toggle item.

.darkshadow{visibility:hidden;opacity:0;position:fixed;top:48px;background:rgba(0,0,0,0.59);left:0;right:0;bottom:0;margin:0;z-index:5;transition:all 0.4s ease-in-out;}
.darkshadow.open{visibility:visible;opacity:1;}
#nav-wrapper{font-size:13px;width:265px;position:fixed;z-index:5;top:48px;overflow:hidden;left:0;background:#fff;transition:all 0.5s ease;bottom:0;padding-top:15px;transform:translateX(-290px);}
#nav-wrapper:hover{overflow-y:auto;}
#nav-wrapper.open{transform:translateX(0);}
#nav-wrapper.close{display:none;}
#nav-wrapper ul{margin:0;padding:0;list-style:none;}
#nav-wrapper li{display:block;list-style:none;position:relative;}
#nav-wrapper li.first{background:#d0d0d0;border-radius:0 50px 50px 0;margin:0 20px 0 0;transition:all 0.5s ease;display:none;}
#nav-wrapper > ul > li > a{display:flex;align-items:center;justify-content:space-between;padding:12px 0 13px 15px;color:#333;font-size:13px;}
#nav-wrapper li a.nav-submenu{padding:10px 15px 12px;}
#nav-wrapper li ul.nav-sub{display:none;}
#nav-wrapper li li a{display:block;position:relative;padding-left:4em;line-height:40px;color:#657786;}
#nav-wrapper a:hover{color:#6495ed;}
#nav-wrapper svg.down{margin-right:0;margin-left:15px;display:block;transition:all 0.4s ease;}
#nav-wrapper li.open svg.down{transform:rotate(90deg);}
#nav-wrapper svg{height:20px;width:20px;margin-right:15px;overflow:hidden;opacity:0.7;fill:currentColor;}
#nav-wrapper > ul > li:not(.colormode) > a > span:not(.new){align-items:center;display:inline-flex;flex:1 1;}
#nav-wrapper > ul > li.colormode > a > span{align-items:center;flex:1 1;}
#nav-wrapper > ul > li > a > span > span.new{background:#e1f5fe;color:#004c88;line-height:normal;margin-left:10px;font-size:8px;padding:3px 10px;border-radius:100px;}
@media only screen and (max-width:480px){
  #nav-wrapper .profile img{width:24px;height:24px;margin-right:15px;margin-left:1px;border-radius:20px;}
}
@media screen and (max-width:600px){
  #nav-wrapper .subs{display:flex;margin-left:24px;margin-top:10px;}
  #nav-wrapper .subs a{font-size:11px;margin-right:10px;width:auto;height:auto;padding:7px 10px;margin-top:0;background-color:#e1f5fe;color:#666;border-radius:20px;}
  #nav-wrapper .subs a:hover{background-color:#6495ed;}
  #nav-wrapper .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px;}
  #nav-wrapper .subs button{flex-grow:1;margin-top:0;width:auto;height:auto;padding:7px 10px;display:flex;align-items:center;justify-content:center;background-color:#657786;border-radius:20px;border:none;margin-right:23px;color:#fff;outline:none;}
  #nav-wrapper li.footer a{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0;}
  #nav-wrapper .footer{display:block;margin-top:14px;margin-left:24px;}
  #nav-wrapper .footer .social{display:flex;margin:7px 0;}
  #nav-wrapper .footer .credit{display:block;color:#657786;}
  #nav-wrapper .footer .developer{color:#657786;}
}
#nav-wrapper .subs{display:flex;margin-left:15px;margin-top:10px;}
#nav-wrapper .subs a{font-size:11px;margin-right:10px;width:auto;height:auto;padding:7px 10px;margin-top:0;background-color:#e1f5fe;color:#666;border-radius:20px;}
#nav-wrapper .subs a:hover{background-color:#6495ed;color:#fff;}
#nav-wrapper .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px;}
#nav-wrapper .subs button{flex-grow:1;margin-top:0;width:auto;height:auto;padding:7px 10px;display:flex;align-items:center;justify-content:center;background-color:#657786;border-radius:20px;border:none;margin-right:23px;color:#fff;outline:none;}
#nav-wrapper li.footer a{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0;}
#nav-wrapper .footer{display:block;margin-top:14px;margin-left:15px;}
#nav-wrapper .footer .social{display:flex;margin:7px 0;}
#nav-wrapper .footer .credit{display:block;color:#657786;}
#nav-wrapper .footer .developer{color:#657786;}
.kotak9{fill:#fff;margin-top:-4px;display:block;}

3) Add the Backdrop Element

Add the overlay that sits behind the panel when it’s open (improves focus and click-to-close behavior). Place this directly under <body>:

<div class='darkshadow'></div>

4) Add the Navigation Markup

Place this block right under </header>. It includes a profile slot, category groups, submenu toggles, social links, and a Dark Mode entry you can wire to your theme later.

<nav class='' id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <ul>
    <li class='first'>
      <a href='https://koderian.blogspot.com/'>
        <span itemprop='name'>
          <svg height='24' viewBox='0 0 24 24' width='24'>
            <path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10ZZ' fill='#000' />
          </svg>Beranda</span></a></li>

    <li>
      <a class='nav-submenu' href='javascript:;' title='Bahasa Program'>
        <span>
          <svg height='24' viewBox='0 0 24 24' width='24'>
            <path d='M15 17V14H18V12L22 15.5L18 19V17H15M17 18V21H14V23L10 19.5L14 16V18H17M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M21.66 8.73L19.66 5.27C19.54 5.05 19.28 4.96 19.05 5.05L16.56 6.05C16.05 5.64 15.5 5.31 14.87 5.05L14.5 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.5 2.42L9.13 5.07C8.5 5.33 7.96 5.66 7.44 6.07L5 5.05C4.77 4.96 4.5 5.05 4.39 5.27L2.39 8.73C2.26 8.94 2.31 9.22 2.5 9.37L4.57 11L4.5 12L4.57 13L2.46 14.63C2.26 14.78 2.21 15.06 2.34 15.27L4.34 18.73C4.45 19 4.74 19.11 5 19L5 19L7.5 18C7.74 18.19 8 18.37 8.26 18.53L9.91 17.13C9.14 16.8 8.46 16.31 7.91 15.68L5.5 16.68L4.73 15.38L6.8 13.8C6.4 12.63 6.4 11.37 6.8 10.2L4.69 8.65L5.44 7.35L7.85 8.35C8.63 7.45 9.68 6.82 10.85 6.57L11.25 4H12.75L13.12 6.62C14.29 6.86 15.34 7.5 16.12 8.39L18.53 7.39L19.28 8.69L17.2 10.2C17.29 10.46 17.36 10.73 17.4 11H19.4L21.5 9.37C21.72 9.23 21.78 8.95 21.66 8.73M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14ZZ'></path>
          </svg>Tutorial Blogger<span class='new'> News</span>
        </span>
        <svg class='down' height='24' viewBox='0 0 24 24' width='24'>
          <path d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5M7.5,10.5A1.5,1.5 0 0,1 9,12A1.5,1.5 0 0,1 7.5,13.5A1.5,1.5 0 0,1 6,12A1.5,1.5 0 0,1 7.5,10.5M16.5,10.5A1.5,1.5 0 0,1 18,12A1.5,1.5 0 0,1 16.5,13.5A1.5,1.5 0 0,1 15,12A1.5,1.5 0 0,1 16.5,10.5ZZ' />
        </svg>
      </a>

      <ul class='nav-sub'>
        <li><a href='https://koderian.blogspot.com/' itemprop='url'><span itemprop='name'><svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'><path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' /></svg>Blogger</span></a></li>>

        <li><a href='https://koderian.blogspot.com/' itemprop='url'><span itemprop='name'><svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'><path d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' /></svg>CSS</span></a></li>

        <li><a href='https://koderian.blogspot.com/' itemprop='url'><span itemprop='name'><svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'><path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' /></svg>Javascript</span></a></li>

        <li><a href='https://koderian.blogspot.com/' itemprop='url'><span itemprop='name'><svg class='muter3' viewBox='0 0 24 24'><path d='M14.19,14.19L6,18L9.81,9.81L18,6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,10.9A1.1,1.1 0 0,0 10.9,12A1.1,1.1 0 0,0 12,13.1A1.1,1.1 0 0,0 13.1,12A1.1,1.1 0 0,0 12,10.9Z' /></svg>Widget</span></a></li>

        <li><a href='https://koderian.blogspot.com/' itemprop='url'><span itemprop='name'><svg class='muter3' viewBox='0 0 24 24'><path d='M3.14,1A2.14,2.14 0 0,0 1,3.14V5H3V3H5V1H3.14M7,1V3H10V1H7M12,1V3H14V5H16V3.14C16,1.96 15.04,1 13.86,1H12M1,7V10H3V7H1M9,7C7.89,7 7,7.89 7,9C7,11.33 7,16 7,16C7,16 11.57,16 13.86,16A2.14,2.14 0 0,0 16,13.86C16,11.57 16,7 16,7C16,7 11.33,7 9,7M18,7V9H20V11H22V9C22,7.89 21.11,7 20,7H18M9,9H14V14H9V9M1,12V13.86C1,15.04 1.96,16 3.14,16H5V14H3V12H1M20,13V16H22V13H20M7,18V20C7,21.11 7.89,22 9,22H11V20H9V18H7M20,18V20H18V22H20C21.11,22 22,21.11 22,20V18H20M13,20V22H16V20H13Z' /></svg>HTML</span></a></li>

        <li><a href='https://koderian.blogspot.com/' itemprop='url'><span itemprop='name'><svg class='muter2' viewBox='0 0 24 24'><path d='M17.45,15.18L22,7.31V19L22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L16.74,12.5L10.23,8.75L4.31,19H6.57L10.96,11.44L17.45,15.18Z' /></svg>SEO</span></a></li>
      </ul>
    </li>

    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:20x;height:24px' viewBox='0 0 512 512'>
            <g><path d='M425.19,7.392C422.246,2.784,417.158,0,411.686,0h-160c-6.208,0-11.872,3.584-14.496,9.248l-224,480c-2.304,4.96-1.952,10.752,0.992,15.36c2.944,4.608,8.032,7.392,13.504,7.392h160c6.208,0,11.872-3.584,14.496-9.216l224-480C428.486,17.824,428.134,12,425.19,7.392z' /></g>
            <g><path d='M497.798,263.392c-2.912-4.608-8.032-7.392-13.472-7.392H352.678L233.222,512h146.464c6.208,0,11.872-3.584,14.496-9.216 l104.64-224C501.126,273.824,500.742,268,497.798,263.392z' /></g>
          </svg>Adsense</span>
      </a>
    </li>>

    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12ZZ' /></svg>Template</span>
      </a>
    </li>

    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z' /></svg>Guest Post</span>
      </a>
    </li>

    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z' /></svg>About</span>
      </a>
    </li>

    <li class="colormode">
      <a href="javascript:;">
        <svg class="drk" height="24" viewBox="0 0 24 24" width="24"><path d="M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z"></path></svg>
        <svg class="lgt" height="24" viewBox="0 0 24 24" width="24"><path d="M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z"></path></svg>
        <span class="drk">Mode Gelap</span><span class="lgt">Mode Terang</span>
      </a>
    </li>

    <li class='subs'>
      <a href='https://www.blogger.com/follow-blog.g?blogID=1730898404600797650' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>
        <svg viewBox='0 0 24 24'><path d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z' /></svg>
        <span>FOLLOW</span>
      </a>
      <a href='https://www.blogger.com/' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>
        <svg class='widget12' viewBox='0 0 24 24'><path d='M16,17H7V10.5C7,8 9,6 11.5,6C14,6 16,8 16,10.5M18,16V10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18M11.5,22A2,2 0 0,0 13.5,20H9.5A2,2 0 0,0 11.5,22Z' /></svg>
        <span>BERLANGGANAN</span>
      </a>
    </li>

    <li class='footer'>
      <a href='https://koderian.blogspot.com/' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a> -
      <a href='https://koderian.blogspot.com/' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a> -
      <a href='https://koderian.blogspot.com/' itemprop='url' title='Privacy Policy'><span itemprop='name'>Privacy</span></a>

      <span class='social'>
        <a class='facebook2' href='https://www.facebook.com/' rel='nofollow noopener' target='_blank' title='Facebook'>
          <svg viewBox='0 0 24 24'><path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z' /></svg>
        </a>
        <a class='instagram' href='https://www.instagram.com/' rel='nofollow noopener' target='_blank' title='Instagram'>
          <svg viewBox='0 0 24 24'><path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z' /></svg>
        </a>
        <a href='https://www.twitter.com/' rel='nofollow noopener' target='_blank' title='Twitter'>
          <svg viewBox='0 0 24 24'><path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z' /></svg>
        </a>
      </span>

      <span class='credit'>Copyright &#169; 2018 - 2020</span>
      <span class='developer'>Created <cite><b>Pintarsaurus</b></cite></span>
    </li>
  </ul>
</nav>

5) Add the Menu Toggle Button

Place this next to your blog title/logo (inside the header). It’s the familiar “hamburger” icon that opens the panel.

<a arial-label='Menu' class='menu-toggle' href='javascript:;'>
  <svg focusable='false' height='24' viewBox='0 0 24 24' width='24'>
    <path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' />
  </svg>
</a>

6) Add the Lightweight JavaScript

Paste this right above </body>. It handles opening/closing the panel, backdrop clicks, and submenu toggling with a tiny, compressed routine.

<script>//<![CDATA[eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(n).o(1(){$(".p-q").8(1(){$("#2-9, .f").g("4")});$(".f").8(1(){$("#2-9,.f").h("4")});5 d=1(a,b){0.3=a||{};0.6=b||i;5 c=0.3.j(".2-r");c.s("8",{3:0.3,6:0.6},0.k)};d.t.k=1(a){5 b=a.l.3;($0=$(0)),($7=$0.7());$7.u();$0.m().g("4");v(!a.l.6){b.j(".2-w").x($7).y().m().h("4")}};5 e=z d($("#2-9"),i)});',36,36,'this|function|nav|el|open|var|multiple|next|click|wrapper||||||darkshadow|toggleClass|removeClass|false|find|dropdown|data|parent|document|ready|menu|toggle|submenu|on|prototype|slideToggle|if|sub|not|slideUp|new'.split('|'),0,{}))//]]></script>

7) Save and Test

Click Save, then refresh your blog. Tap the hamburger to open the slide panel. Click the dark overlay to close. Expand a category that has a submenu to confirm the caret rotates and children reveal smoothly.

Extra UX Tips (Make It Feel Premium)

Timing matters: 300–500ms transitions feel fluid without dragging.
Backdrop opacity: Around 0.55–0.65 helps focus users without making the page feel “blocked.”
Touch targets: Keep links at least 40px high for comfortable tapping on mobile.
Keyboard support: Consider adding Esc to close and manage focus for accessibility (advanced).
Dark Mode: Pair the “Mode Gelap/Mode Terang” item with your theme’s dark class or system preference.

Customize the Look

Change colors and spacing to match your brand:

Panel width: Adjust #nav-wrapper{ width:265px } to 280–320px if you have longer labels.
Accent color: Replace hover color #6495ed with your brand’s accent.
Rounded corners: Add a gentle radius to clickable chips like the “subs” links for a softer look.

Troubleshooting

Menu doesn’t open: Ensure the toggle anchor (.menu-toggle) exists, the script is above </body>, and no JS errors appear in the console.
Panel appears behind content: Increase z-index on #nav-wrapper and .darkshadow (e.g., 1000+).
Submenus don’t expand: Confirm the “nav-submenu” anchor wraps the label and caret; its sibling ul.nav-sub should be present.
Body scrolls when open: Consider adding body{ overflow:hidden } while the panel is open (advanced enhancement).
Dark Mode text unreadable: Tweak foreground/background pairs to preserve contrast.

FAQ

1) Will this slow down my Blogger site?

No. The CSS is lightweight and the JavaScript is tiny. Slide navs are an efficient way to organize links without bloating your layout.

2) Can I use icons from a different set?

Absolutely. Swap the inline SVGs with your favorite icon system, but keep sizes consistent for visual rhythm.

3) How do I make the menu push the page instead of overlaying?

Use a container wrapper around your main content and shift it with transform: translateX(...) when the panel opens. Keep the overlay to maintain focus.

4) Does it work without jQuery?

The compressed snippet above assumes jQuery. If you prefer vanilla JS, you can write a small handler to toggle classes and slide submenus using CSS transitions.

5) Can I put widgets inside the panel?

Yes—tags, search, profile, or newsletter forms all work well. Just be mindful of height on smaller screens.

Conclusion

A thoughtfully crafted Slide Navigation for Blogger gives your site an immediate visual upgrade and a smoother path for users to explore your content. With a dimmed backdrop, crisp icons, and a subtle transition, you get an app-like feel while keeping your theme fast and tidy. Start with the defaults here, then tune colors, spacing, and submenu behavior until everything aligns with your brand.

Was this helpful? Please bookmark this guide, share it with a fellow blogger, and subscribe for more clean, practical UI patterns you can drop into Blogger with minimal effort.

Comment Guidelines

Please keep your comments relevant to the topic (Blogger, SEO, coding, etc.).

Be respectful — no spam, offensive language, or personal attacks.

You may share suggestions, bug reports, or tutorial requests.

External links are allowed only if they are truly helpful and not for promotion.

Feedback will be reviewed, and I will try to reply as soon as possible.

By commenting here, you help improve KodeRian and keep the discussion useful for everyone.

Abdul SomadMarch 16, 2021 at 8:27 PM
Mantap tutorial nya gan, Optimasi kecepatan blog nya juga mantap, cuma saran saya untuk post bergambar sebaiknya optimasi gambar nya, gunakan JPEG Progresif. kemudian Kecilkan file size gambar nya biar loading nya lebih cepat. Atau bisa juga dengan Mengubah file gambar ke format jpeg 2000, jxr atau webp.