==Iklan Dipate Disini===
Menu is one of the important elements in the theme of the website and blogger, because with the menu to make it easier for visitors to see further and deeper into our website and blog. Menu is an element that leads to a page or post that is very important role in the website, what if a website or blog does not have a menu? If that happens? Then your website will be empty of visitors and your website will not BE SEO.
Menu is a heart in the appearance of the website, all website experts compete with each other to create a responsive and elegant menu.
On this occasion I want to share an easy way to create a navigation menu, this way can only be accessed through a smartphone only, when you open this blog through your smartphone it will appear the navigation menu from the left side when you click the menu icon.
This navigation menu is inspired by Indonesian blogger, Mrs. Igniel, this navigation menu is very important in addition to this navigation menu can be more value for your blog, especially if it is designed well. For those of you who want to install this igniel-style navigation menu can follow the steps below.
Easy Ways to Create a Navigation Menu
1. Open your blog2. Select Theme and then select Edit HTML
3. Find the code ]]></b:skin>, if you have found a copy of the code below and place it just above the code ]]></b:skin>
/* NAVIGASI Code Web */
.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 .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;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s;
bottom:0;
padding-top:15px;
-webkit-transform:translateX(-290px);
-ms-transform:translateX(-290px);
transform:translateX(-290px);
transition: all .5s ease;
}
#nav-wrapper:hover{overflow-y:auto}
#nav-wrapper.open{-webkit-transform:translateX(0);-ms-transform:translateX(0);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 .5s ease;display: none;}
#nav-wrapper>ul>li>a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:12px 0 13px 15px;color:#333333;font-size:13px}#nav-wrapper li a.nav-submenu{padding:10px 15px;padding-bottom: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:#008080;}#nav-wrapper svg.down{margin-right:0;margin-left:15px;display:block;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}
#nav-wrapper li.open svg.down{
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg)
}
#nav-wrapper svg{height:20px;width:20px;margin-right:15px;overflow:hidden;opacity:.7;fill:currentColor}#nav-wrapper>ul>li:not(.colormode)>a>span:not(.new){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-ms-flex:1 1;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;-webkit-border-radius:100px;-moz-border-radius:100px;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: #a1362a;
color: #fff;
border-radius: 20px;
}
#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;
}
}
@media screen and (max-width: 800px) {
#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: #a1362a;
color: #fff;
border-radius: 20px;
}
#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:none
}
@media screen and (max-width: 800px) {
.kotak9 {
fill: #fff;
margin-top: -4px;
display: block;
}
} <div class='darkshadow'/>
<nav class=';' id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='first'>
<a href='https://www.lapakinfo.net/'>
<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 14M12 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://www.lapakinfo.net/search/label/Blogger' 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://www.lapakinfo.net/search/label/CSS' 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://www.lapakinfo.net/search/label/JavaScript' 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://www.lapakinfo.net/search/label/Widget' 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://www.lapakinfo.net/search/label/Widget' 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://www.lapakinfo.net/search/label/SEO' 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://www.lapakinfo.net/search/label/Adsense' 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,480 c-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-480 C428.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://www.lapakinfo.net/search/label/Template' 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://www.lapakinfo.net/p/contact-us.html' 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://www.lapakinfo.net/p/about.html' 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='subs'>
<a href='https://www.blogger.com/follow-blog.g?blogID=6479446256188251383' 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/follow-blog.g?blogID=6479446256188251383' 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://www.lapakinfo.net/p/sitemap.html' itemprop='url' title='Sitemap'>
<span itemprop='name'>Sitemap</span>
</a>
-
<a href='https://www.lapakinfo.net/p/disclaimer.html' itemprop='url' title='Disclaimer'>
<span itemprop='name'>Disclaimer</span>
</a>
-
<a href='https://www.lapakinfo.net/p/privacy-policy_24.html' itemprop='url' title='Privacy Policy'>
<span itemprop='name'> Privacy</span>
</a>
<span class='social'>
<a class='facebook2' href='https://www.facebook.com/yusril.astuti' 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/lapakinfodotcom' 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/lapakinfodotcom' 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 © 2018 - 2020
</span>
<span class='developer'>Created <cite><b>Lapakinfo.net</b>
</cite>
</span>
</li>
</ul>
</nav>
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<a arial-label='Menu' class='menu-toggle' href='javascript:;'>
<svg class='kotak9' viewBox='0 0 24 24'>
<path d='M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z'/>
</svg>
</a>
</div>
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<!-- menu navigasi header start -->
<ul>
<li>
<a href='https://www.lapakinfo.net/'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10ZZ'/>
</svg>Beranda</a>
</li>
<li>
<a href='https://www.lapakinfo.net/search/label/Blogger'>
<svg style='width:24px;height:24px' 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</a>
</li>
<li>
<a href='https://www.lapakinfo.net/search/label/Adsense'>
<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,480 c-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-480 C428.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</a>
</li>
<li>
<a href='https://www.lapakinfo.net/p/contact-us.html'>
<svg class='mutermuter' style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19C21,20.11 20.1,21 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M16.7,9.35L15.7,10.35L13.65,8.3L14.65,7.3C14.86,7.08 15.21,7.08 15.42,7.3L16.7,8.58C16.92,8.79 16.92,9.14 16.7,9.35M7,14.94L13.06,8.88L15.12,10.94L9.06,17H7V14.94Z'/>
</svg>Guest Post</a>
</li>
<li>
<a href='https://www.lapakinfo.net/search/label/Template'>
<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</a>
</li>
</ul>
<!-- menu navigasi header end -->
</nav>5. Find the code </body> and place the code below just above the code </body>6. Find the .mline1, .mline2, .mline3 { code and then delete all those codes and replace them with the codes below<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};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}('w f=["\\i\\l\\h\\j","\\q\\i\\s\\s\\n\\h\\F\\n\\g\\o\\o","\\C\\j\\g\\t\\u\\r\\k\\g\\l\\l\\h\\k\\G\\L\\v\\m\\g\\k\\A\\o\\D\\g\\m\\i\\r","\\H\\n\\x\\H\\A","\\v\\B\\h\\j\\y\\u\\q\\i\\s\\s\\n\\h","\\k\\h\\B\\i\\t\\h\\F\\n\\g\\o\\o","\\C\\j\\g\\t\\u\\r\\k\\g\\l\\l\\h\\k\\G\\v\\m\\g\\k\\A\\o\\D\\g\\m\\i\\r","\\v\\m\\g\\k\\A\\o\\D\\g\\m\\i\\r","\\h\\n","\\B\\y\\n\\q\\x\\l\\n\\h","\\v\\j\\g\\t\\u\\o\\y\\I\\B\\h\\j\\y","\\M\\x\\j\\m","\\m\\k\\i\\l\\m\\i\\r\\j","\\i\\j","\\l\\k\\i\\q\\i\\q\\J\\l\\h","\\m\\g\\q\\g","\\j\\h\\N\\q","\\o\\n\\x\\m\\h\\O\\i\\s\\s\\n\\h","\\l\\g\\k\\h\\j\\q","\\o\\n\\x\\m\\h\\P\\l","\\j\\i\\q","\\v\\j\\g\\t\\u\\o\\y\\I","\\C\\j\\g\\t\\u\\r\\k\\g\\l\\l\\h\\k","\\k\\h\\g\\m\\J"];$(Q)[f[R]](z(){$(f[4])[f[3]](z(){$(f[2])[f[1]](f[0])});$(f[7])[f[3]](z(){$(f[6])[f[5]](f[0])});w d=z(a,b){p[f[8]]=a||{};p[f[9]]=b||K;w c=p[f[8]][f[11]](f[10]);c[f[13]](f[3],{S:p[f[8]],T:p[f[9]]},p[f[12]])};d[f[14]][f[12]]=z(a){w b=a[f[15]][f[8]];$p=$(p),$E=$p[f[16]]();$E[f[17]]();$p[f[18]]()[f[1]](f[0]);U(!a[f[15]][f[9]]){b[f[11]](f[V])[f[W]]($E)[f[X]]()[f[18]]()[f[5]](f[0])}};w e=Y d($(f[Z]),K)})',62,71,'|||||||||||||||_0x8991|x61|x65|x6F|x6E|x72|x70|x64|x6C|x73|this|x74|x77|x67|x76|x2D|x2E|var|x69|x75|function|x6B|x6D|x23|x68|next|x43|x2C|x63|x62|x79|false|x20|x66|x78|x54|x55|document|23|el|multiple|if|21|20|19|new|22|||||||||'.split('|'),0,{}))
//]]></script>
.mline1, .mline2, .mline3 {
position: absolute;
left: 0;
display: block;
height: 3px;
width: 22px;
background: $(search.icon.color);
content:'';
border-radius: 5px;
transition: all 0.2s;
display: none;
}
.mline1 {
top: 0;
}
.mline2 {
top: 7px;
}
.mline3 {
top: 14px;
}
.button.menu-opened .mline1 {
top: 8px;
border: 0;
height: 3px;
width: 22px;
background: $(search.icon.color);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.button.menu-opened .mline2 {
top: 8px;
background: $(search.icon.color);
width: 22px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.button.menu-opened .mline3 {
display: none;
height:0;
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
cursor: pointer;
background: linear-gradient(to left, $(header.background.kiri), $(header.background.kanan));
}
#cssmenu .submenu-button::after {
content: "\f0d7";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin: 0 20px;
color: $(search.icon.color);
line-height: 42px;
}
#cssmenu .submenu-opened::after {
content: "\f0d8";
}
#cssmenu ul ul .submenu-button::after {
line-height: 36px;
}
#cssmenu ul ul ul li.active a{
border-left: none
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{
border-top: none
}
}Try to open your blog using a mobile device and see the results. This method is actually the old way, if in writing code something is wrong or someone error immediately report to the admin through the contact page, the admin will immediately update the code.
That's how Easy Ways to Create a Navigation Menu in Blogger easily, good luck and happy with.
==Iklan Dipate Disini===