Cara Membuat Nav Header Blog

1.  Widget HTML/JavaScript 

<nav> <ul> <li class='mega-menu'><a href='#'>&#61498; </a> <div class='mega-menu-inner'>
<ul> <h3><a href='https://dakota003.blogspot.com/search/label/Web%20Browsers'>Web Find</a></h3>
<li><a href='#'>Sublink</a></li>
<li><a href='#'>Sublink</a></li>
<li><a href='#'>Sublink</a></li>
<li><a href='#'>Sublink</a></li>
<li><a href='#'>Sublink</a></li> </ul>
<ul> <h3><a href='https://dakota003.blogspot.com/search/label/Download'>Download</a></h3>
<li><a href='https://dakota003.blogspot.com/search/label/Mobile'>Mobile</a></li>
<li><a href='https://dakota003.blogspot.com/search/label/PC'>PC</a></li>
<li><a href='https://dakota003.blogspot.com/search/label/Apps'>Apps</a></li>
<li><a href='#'>Antivirus</a></li>
<li><a href='#'>Security</a></li> </ul>
<ul> <h3><a href='https://dakota003.blogspot.com/search/label/How%20to'>How To</a></h3>
<li><a href='https://dakota003.blogspot.com/search/label/Blogger'>Blogger</a></li>
<li><a href='#'>Comunication</a></li>
<li><a href='#'>Customization</a></li>
<li><a href='#'>Sublink</a></li>
<li><a href='#'>Sublink</a></li> </ul> </div> </li>
<li class='drop-down'><a href='#'>&#61737; </a>
<ul> <li><a href='#'>&#61950; Profile</a></li>
<li><a href='#'>&#61670; Community</a></li>
<li class='sub-menu'><a href='#'>&#61632; Team</a> <ul>
<li><a href='#'>&#61948; Designers</a></li> <li><a href='#'>&#61729; Developers</a></li> <li><a href='#'>&#61953; Marketers</a></li> </ul> </li> </ul> </li> <li class='contact-menu'><a href='#'>&#61664; </a></li> </ul>
</nav>  

2. Sebelum ]]></b:skin>

/* Menu Dakota */
nav {height: 35px;backdrop-filter: saturate(180%) blur(20px);font-family: 'fontawesome', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";position: relative;transition: min-height .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1);z-index: 2;}
nav ul {padding: 0;margin: 0;list-style: none;}
nav a {text-decoration: none;color: #000}
nav>ul>li {position: relative;float: left;}
nav>ul>li>a {position: relative;line-height: 28px;padding: 0 20px;font-size: 14px;display: block;font-weight: 400;transition: all .3s;color: #222;}
nav>ul>li>a:hover {color: #606060}
nav>ul>li.contact-menu>a:after, nav>ul>li.mega-menu>a:after, nav>ul>li.blogger-pos>a:after, nav>ul>li.drop-down>a:after {content: '\f0d7';position: absolute;top: 0;right: 0;color:#fff}
nav>ul>li.mega-menu {position: static;}
nav>ul>li.mega-menu .mega-menu-inner {position: absolute;opacity: 0;width: 100%;overflow: auto;top: -9999px;left: -9999px;box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 18px;transition-duration: 0.2s;transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);transition-delay: 0s;background-color: #fff;visibility: hidden;transition: opacity .3s;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;}
nav>ul>li.mega-menu .mega-menu-inner ul {width: 27%;float: left;margin: 12px 0;} nav>ul>li.mega-menu .mega-menu-inner ul li a {display: block;text-decoration-line: none;font-size: 12px;margin: 5px 5px;} nav>ul>li.mega-menu .mega-menu-inner ul h3 {color: #212529;padding: 0;margin: 0 5px;font-size: 12px;} nav>ul>li.mega-menu:hover .mega-menu-inner {opacity: 1;left: 0;top: 100%;visibility: visible;} nav>ul>li.blogger-pos {position: static;} nav>ul>li.blogger-pos:hover .nav-item {opacity: 1;top: 100%;left: 0;visibility: visible;} nav>ul>li.blogger-pos .nav-item {position: absolute;width: 100%;overflow: auto;padding: 10px 0;top: -9999px;opacity: 0;left: -9999px;background: #fff;visibility: hidden;transition: opacity .3s;box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 18px;} nav>ul>li.blogger-pos .nav-item .item {float: left;width: calc(23.1% - 100px);background: #fff;margin: 0 10px;padding: 10px;}
nav>ul>li.blogger-pos .nav-item .item img {width: 100%;height: 180px;} nav>ul>li.blogger-pos .nav-item .item h3 {font-size: 12px;} nav>ul>li.blogger-pos .nav-item .item a {color: #c3002e;} nav>ul>li.drop-down>ul {position: absolute;top: -9999px;visibility: hidden;opacity: 0;left: -99999px;width: 100px; transition-duration: 0.2s;transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);transition-delay: 0s;background-color: #fff;transition: opacity .3s;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;} nav>ul>li.drop-down>ul:after, nav>ul>li.drop-down>ul:before {bottom: 100%;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;} nav>ul>li.drop-down>ul:after {border-color: rgba(236, 240, 241, 0);border-bottom-color: #c3002e;border-width: 5px;margin-left: -5px;} nav>ul>li.drop-down>ul:before {border-color: rgba(231, 76, 60, 0);border-bottom-color: #c3002e;border-width: 9px;margin-left: -9px;} nav>ul>li.drop-down:hover>ul {opacity: 1;top: 100%;left: 0;visibility: visible;} nav>ul>li.drop-down>ul a {padding: 5px;display: block;color: #1d1d1d;font: 400 12px 'Google Sans', 'fontawesome', sans-serif;transition: all .3s;}
nav>ul>li.drop-down>ul>li.sub-menu:after {content: '\f101';position: Absolute;right: 10px;top: 50%;margin-top: -10px;height: 20px;width: 20px;line-height: 20px;text-align: center;display: block;} nav>ul>li.drop-down>ul>li.sub-menu {position: relative;} nav>ul>li.drop-down>ul>li.sub-menu>ul {left: 90%;width: 110px;opacity: 0;transition-duration: 0.2s;transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);transition-delay: 0s;background-color: #fff;top: -99999px;visibility: hidden;border-left: 3px solid #c3002e;position: Absolute;transition: opacity .3s;box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 18px;transition-property: background-color, box-shadow;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;} nav>ul>li.drop-down>ul>li.sub-menu:hover>ul {opacity: 1;left: 100%;top: 0;visibility: visible;} .arrow_box:after, nav>ul>li.drop-down>ul>li.sub-menu>ul:before {right: 100%;top: 15px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;} nav>ul>li.drop-down>ul>li.sub-menu>ul:after {border-color: rgba(236, 240, 241, 0);border-right-color: #c3002e;border-width: 5px;margin-top: -5px;}
nav>ul>li.drop-down>ul>li.sub-menu>ul:before {border-color: rgba(231, 76, 60, 0);border-right-color: #c3002e;border-width: 9px;margin-top: -9px;}
nav>ul>li.contact-menu {position: static;} nav>ul>li.contact-menu .contact-menu-inner {position: Absolute;left: -9999px;top: -9999px;opacity: 0;visibility: hidden;width: 100%;overflow: auto;background: #fff;transition: opacity .3s;box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 18px;} nav>ul>li.contact-menu:hover .contact-menu-inner {opacity: 1;left: 0;top: 100%;visibility: visible;} nav>ul>li.contact-menu .contact-menu-inner form {float: left;width: 46%;padding: 20px 0;margin: 0 2%;} nav>ul>li.contact-menu .contact-menu-inner form span {display: block;font: 400 12px 'system-ui', 'fontawesome', sans-serif;letter-spacing: 1px;} nav>ul>li.contact-menu .contact-menu-inner form input, nav>ul>li.contact-menu .contact-menu-inner form textarea {display: block;width: 50%;padding: 10px;transition-duration: 0.2s;transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);transition-delay: 0s;background-color: rgba(242, 242, 242, 0.9);outline: none;color:#1d1d1d;margin: 10px 0;} nav>ul>li.contact-menu .contact-menu-inner .misc-contact {float: right;width: 50%;padding: 0;} nav>ul>li.contact-menu .contact-menu-inner .misc-contact span, nav>ul>li.contact-menu .contact-menu-inner .misc-contact a {color: #c3002e;}
.fa-2x {font-size: 1.1em;}  

3. Preview and Save