Como Colocar Menu Responsivo No blogger - Atualizado 2017

  Ola, hoje vou ensinar a colocar um menu responsivo no seu blogger, ou seja ele se adapta a versão desktop e mobile.   Veja como ex...

  Ola, hoje vou ensinar a colocar um menu responsivo no seu blogger, ou seja ele se adapta a versão desktop e mobile.



  Veja como exemplo o menu do nosso site: Android Digital Midia

  Primeiro entre no painel do blogger e va em Tema depois clique em Editar HTML.



 Depois procure pela pela tag <body> e cole o seguinte codigo, onde voce quer que apareca o menu, que geralmente e abaixo do cabecalho. Se seu blog ja tem um menu e so substituir por esse codigo.

<!---Menu--> <nav id='nav-main'>
    <ul>
        <li><a href=''>Home</a></li>
        <li><a href=''>About</a></li>
        <li><a href=''>Gallery</a></li>
        <li><a href=''>Tutorials</a></li>
        <li><a href=''>Contact</a></li>
    </ul>
</nav>
<div id='nav-trigger'>
    <span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>


   Depois procure ainda dentro do html procure pela tag  </b:skin> e acima dela cole este outro codigo abaixo. Ai fica as CSS do menu onde se ajusta core,tamanho etc...


#nav-trigger {
    display: none;
    text-align: center;
}
#nav-trigger span {
    display: block;
    background-color: #279CEB;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
}
nav#nav-mobile {
    margin: 0px;
}
nav {
    margin-bottom: 30px;
}
#nav-main {
    background-color: #279CEB;
    margin: 0px;
    float: left;
}
#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#nav-main li {
    display: inline-block;
    float: left;
    ont-family: &#39;
    Open Sans&#39;
    , sans-serif;
}
#nav-main li:last-child {
    border-right: none;
}
#nav-main a {
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
    display: block;
}
#nav-main a:hover {
    background-color: #3AB0FF;
    text-decoration: none;
    color: #fff;
}
#nav-mobile {
    position: relatifve;
    display: none;
}
#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ddf0f9;
    z-index: 10;
    padding: 0px;
    border-bottom: solid 1px #cc0028;
}
nav#nav-mobile li:last-child {
    border-bottom: none;
}
nav#nav-mobile ul {
    padding: 0;
    margin: 0;
}
nav#nav-mobile a {
    display: block;
    color: #29a7e1;
    padding: 10px 0px;
    text-decoration: none;
    border-bottom: 1px solid #00aeef;
    text-align: center;
}
nav#nav-mobile a:hover {
    background-color: #111;
    color: #fff;
}
nav#nav-mobile li {
    display: block;
}
nav#nav-mobile {
    display: none;
}
/* =Media Queries
-------------------------------------------------------------- */

@media all and (max-width: 900px) {
    #nav-trigger {
        display: block;
    }
    #nav-main {
        display: none!important;
    }
    nav#nav-mobile {
        display: block;
    }
}



  Depois Procure a tag </head> e cole o seguinte codigo acima dela.


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $("#nav-mobile").html($("#nav-main").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
            $(this).removeClass("open");
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
        }
    });
});
//]]>
</script>


  Pronto o menu ja foi adicionado ao seu site agora para mudar cor , tamanho e outrar coisas, voce vai ter que mexer nas CSS se voce quiser que eu faca um tutorial explicando comenta ai.



  Caso seu menu nao queira abrir na versao  mobile, e porque esta faltando um codigo que nao tem no seu template.

 Procure a tag <head> e coloque o seguinte codigo abaixo dela.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

  Pronto agora veja que o menu foi adicionado. Gostou ? Comente o oque voce achou e ate a proxima.

 

COMENTÁRIOS



Nome

AÇÃO,51,APLICATIVOS,49,ARCADE,6,AVENTURA,28,CARTAS,3,CASUAL,4,COMUNICAÇÃO,1,CORPORATIVO,2,CORRIDAS,12,DICAS,27,EDITOR DE VIDEOS,2,EDUCAÇÃO,3,EMULADORES,2,ESPORTES,11,ESTRATÉGIA,17,FERRAMENTAS,9,FOTOGRAFIA,6,FPS,1,JOGOS,239,LUTA,3,MUSICA E ÁUDIO,1,NAVEGADOR,1,PALAVRAS,1,PERSONALIZAÇÃO,1,PLAYER DE VIDEOS,2,QUEBRA-CABEÇAS,9,ROOT,1,RPG,19,SAÚDE,1,SIMULAÇÃO,24,SOCIAL,1,TABULEIRO,6,TERROR,3,TIRO,4,TUTORIAIS,34,
ltr
item
Android Digital Midia: Como Colocar Menu Responsivo No blogger - Atualizado 2017
Como Colocar Menu Responsivo No blogger - Atualizado 2017
https://2.bp.blogspot.com/-49TqOfr0YQ0/WNAtt41vVcI/AAAAAAAAAEI/OlAtmMxJUH0zl0rU0ubxFItNn8npqUZrwCLcB/s320/PicsArt_03-20-02.12.37.jpg
https://2.bp.blogspot.com/-49TqOfr0YQ0/WNAtt41vVcI/AAAAAAAAAEI/OlAtmMxJUH0zl0rU0ubxFItNn8npqUZrwCLcB/s72-c/PicsArt_03-20-02.12.37.jpg
Android Digital Midia
http://www.androidigitalmidia.com.br/2017/03/como-colocar-menu-responsivo-no-blogger.html
http://www.androidigitalmidia.com.br/
http://www.androidigitalmidia.com.br/
http://www.androidigitalmidia.com.br/2017/03/como-colocar-menu-responsivo-no-blogger.html
true
9203304007035329198
UTF-8
Carregar Todos os Pots Não Existe Postagens Ver Todos Ver Post Responder Cancelar Resposta Excluir Por Home Paginas Postagens Ver Todos Recomendados Para Você Categorias Arquivos Pesquisar Todos Os Posts Sua Pesquisa Não Encontrou Nenhuma Postagem... Back Home Domingo Segunda-Feira Terça-Feira Quarta-Feira Quinta-Feira Sexta-Feira Sábado Dom Seg Ter Qua Qui Sex Sab Janeiro Fervereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Mai Jun Jul Ago Set Out Nov Dez Agora Mesmo 1 Minuto Atrás $$1$$ Minuto Atrás 1 Hora Atrás $$1$$ Hora Atrás ontem $$1$$ Dias Atrás $$1$$ Semanas Atrás Mais de 5 Semanas Atrás Followers Follow Este Please share to unlock Copiar Todo Código Selecionar Todo Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar