Como instalar um menu responsive no blogger

responsive menu how to install at blogger

Hoje vamos lhe ajudar com um tutorial de como instalar um menu responsive para utilização em seu template isso é util uma vez que você pode sair na frente oferecendo para as pessoas algo a mais então siga o tutorial abaixo

Adicionando o Menu no blogger

Para instalar o menu primeiro faça login no painel do blogger 
então clique em layout adicionar novo gadget  procure por JavaScript e instale isso de preferencia abaixo do header então copie e cole o seguinte código abaixo:


<!-- CSS -->
<style type='text/css'>
#menunav *{text-decoration:none;list-style:none;margin:0;padding:0;outline:none}
#menunav .section{width:100%;max-width:1200px;margin:0 auto;display:table;position:relative}
#menunav{width:100%;display:table;background-color:#fde428;margin-bottom:50px}
#menunav #logo{float:left;font-size:24px;text-transform:uppercase;color:#002e5b;font-weight:600;padding:20px 0}
#menunav nav{width:auto;float:right}
#menunav nav ul{display:table;float:right}
#menunav nav ul li{float:left}
#menunav nav ul li:last-child{padding-right:0}
#menunav nav ul li a{color:#002e5b;font-size:18px;padding:25px 20px;display:inline-block;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover{background-color:#002e5b;color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover i{color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a i{padding-right:10px;color:#002e5b;transition:all 0.5s ease 0s}
#menunav .toggle-menu ul{display:table;width:25px}
#menunav .toggle-menu ul li{width:100%;height:3px;background-color:#002e5b;margin-bottom:4px}
#menunav .toggle-menu ul li:last-child{margin-bottom:0}
#menunav input[type=checkbox],label{display:none}
@media only screen and (max-width:1440px){#menunav .section{max-width:95%}}
@media only screen and (max-width:980px){#menunav{padding:20px 0}#menunav #logo{padding:0}#menunav input[type=checkbox]{position:absolute;top:-9999px;left:-9999px;background:none}#menunav input[type=checkbox]:fous{background:none}#menunav label{float:right;padding:8px 0;display:inline-block;cursor:pointer}#menunav input[type=checkbox]:checked ~ nav{display:block}#menunav nav{display:none;position:absolute;right:0;top:53px;background-color:#002e5b;padding:0;z-index:99}#menunav nav ul{width:auto}#menunav nav ul li{float:none;padding:0;width:100%;display:table}#menunav nav ul li a{color:#FFF;font-size:15px;padding:10px 20px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}#menunav nav ul li a i{color:#fde428;padding-right:13px}}
@media only screen and (max-width:480px){#menunav .section{max-width:90%}}
@media only screen and (max-width:360px){#menunav label{padding:5px 0}#menunav #logo{font-size:20px}#menunav nav{top:47px}}
</style>
<!-- HTML -->
<div id="menunav">
  <div class="section">
  <a href="https://mybloggerseo.com" id="logo" target="_blank">Logo</a>
  <label for="toggle-1" class="toggle-menu"/>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  </label>
  <input type="checkbox" id="toggle-1">
  <nav>
    <ul>
      <li><a href="#logo"><i class="fa fa-home"></i>Home</a></li>
      <li><a href="#about"><i class="fa fa-user"></i>About</a></li>
      <li><a href="#portfolio"><i class="fa fa-thumb-tack"></i>Portfolio</a></li>
      <li><a href="#services"><i class="fa fa-gears"></i>Services</a></li>
      <li><a href="#gallery"><i class="fa fa-picture-o"></i>Gallery</a></li>
      <li><a href="#contact"><i class="fa fa-phone"></i>Contact</a></li>
    </ul>
  </nav>
  </div>
</div>

Salve e verifique no template para modificar é só procurar e substituir os links quais deseja

Click to comment