28 de junho de 2015

2

Menu horizontal com sub-menus e botões de redes sociais para Blog



Veja como colocar um menu horizontal personalizado com botões de redes sociais no seu Blog. Este menu horizontal compõem menus e sub-menus que é muito eficiente para organizar as páginas do Blog e também permite inserir suas redes sociais...






Este é um menu CSS horizontal  é totalmente editável, você pode mudar as cores e editar todos os botões, e ainda vem com botões de redes sociais (Facebook, Twitter, Google+ e YouTube) que é importante para as visitar lhe seguir nas redes sociais. Veja Exemplo:

*Clique na imagem para Visualizar
Menu horizontal com sub-menus e redes sociais para colocar no Blog

Ver demostração do Menu

Como colocar menu horizontal com sub-menus e botões de redes sociais


Primeiro acesse o painel de edição do seu Blog, vá na opção "MODELO" em seguida clique em "Editar HTML" para abrir o HTML do seu Blog.

Editando HTML do Blog


Estando no HTML do seu Blog, dê um clique em qualquer parte do código e pressione as teclas de atalho "Ctrl+F" do seu teclado para abrir a "caixa de pesquisa".

Na caixa de pesquisa você vai inserir esta Tag " ]]></b:skin> " e pressione Enter para localizar.
Após localizar a Tag, logo acima dela "acrescente" este código CSS:

Código CSS


/* CSS Main Menu Hover*/
#menu-wrapper{background: #222 ;height:40px;width:100%;position:relative;}
#menu{background: #222;color: #fff ;height:40px;padding-top: -10px} /*------ mudar a cor do fundo ----*/
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu ul{height:40px;}
#menu li{float:left;display:inline;position:relative;font-family:'Oswald', sans-serif;font-size:14px;font-weight:400;text-transform:uppercase;}
#menu li a{color: #fff;}

#menu a{display:block;line-height:40px;padding:0 15px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}
#menu li:hover > a{background: #4F4F4F;color: #fff;} /*------ mudar a cor do fundo Hover ----*/
#menu li a:hover{background: #4F4F4F;color: #fff;}  /*------ mudar a cor do fundo Hover ----*/

#menu input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}
#menu label{font-family:'Oswald', sans-serif;font-size:30px;font-weight:400;display:none;width:35px;height:51px;line-height:51px;text-align:center}

#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:166px;background:#fff;position:absolute;z-index:99;display:none;color:#444;box-shadow:0px 10px 0px -5px rgba(0,0,0,0.3);transition:all 0.3s ease-in-out;}
#menu ul.menus a{background:#fff;color:#444;}
#menu ul.menus a:hover{padding-left:25px;color:#dd4c39;box-shadow:none;}
#menu ul.menus li{display:block;width:100%;font-family:'Open Sans';font-size:13px;font-weight:400;text-transform:none;transition:all 0.1s ease-in-out;}
#menu ul.menus li:hover{width:100%;}
#menu ul.menus li:last-child {}
#menu ul.menus li:first-child a{border-top:none;}
#menu ul.menus li:last-child a{}
#menu ul.menus li:hover a {color:#dd4c39;}
#menu li:hover ul.menus{display:block;}

#menu .homers a{background: #4F4F4F; color: #fff;} /*--mudar a cor do fundo do botão inicio---*/
#menu .homers a:hover{background: #4F4F4F; color: #fff;} /*--mudar a cor do fundo Hover do botão inicio---*/

/* social */

#menu .SocialIcons {float:right;overflow:hidden;}
#menu .SocialIcons ul li a {display:block;text-indent:-300px;float:left;width:25px;}

#menu .SocialIcons ul li.icon_google a {background: #404040 url(http://1.bp.blogspot.com/-QZgL0wk7tzQ/UepfotYsscI/AAAAAAAAEp0/0P7asx7vlOA/s1600/googleplus.png) no-repeat center center;transition:all 0.2s ease-in-out;}

#menu .SocialIcons ul li.icon_google a:hover{background: #dd4b39 url(http://1.bp.blogspot.com/-QZgL0wk7tzQ/UepfotYsscI/AAAAAAAAEp0/0P7asx7vlOA/s1600/googleplus.png) no-repeat center center;}

#menu .SocialIcons ul li.icon_facebook a {background: #404040 url(http://3.bp.blogspot.com/-IgLhKGogvYw/VAXyF64cvbI/AAAAAAAAA4k/qYJx5Gp60Mk/s1600/facebook.png) no-repeat center center;transition:all 0.2s ease-in-out;}

#menu .SocialIcons ul li.icon_facebook a:hover{background: #3b5998 url(http://3.bp.blogspot.com/-IgLhKGogvYw/VAXyF64cvbI/AAAAAAAAA4k/qYJx5Gp60Mk/s1600/facebook.png) no-repeat center center;}

#menu .SocialIcons ul li.icon_youtube a {background: #404040 url(http://3.bp.blogspot.com/-dDqRZD4jYcE/UepeEiMFbZI/AAAAAAAAEpY/rSGtCSP88Jw/s1600/youtube.png) no-repeat center center;transition:all 0.2s ease-in-out;}

#menu .SocialIcons ul li.icon_youtube a:hover{background: #8B0000 url(http://3.bp.blogspot.com/-dDqRZD4jYcE/UepeEiMFbZI/AAAAAAAAEpY/rSGtCSP88Jw/s1600/youtube.png) no-repeat center center;}

#menu .SocialIcons ul li.icon_twitter a {background: #404040 url(http://4.bp.blogspot.com/-LrRSeaJSGKs/U7WslVm7HuI/AAAAAAAAAsQ/WKoHgGe1yls/s1600/twitter.png) no-repeat center center;transition:all 0.2s ease-in-out;}

#menu .SocialIcons ul li.icon_twitter a:hover{background:#55acee url(http://4.bp.blogspot.com/-LrRSeaJSGKs/U7WslVm7HuI/AAAAAAAAAsQ/WKoHgGe1yls/s1600/twitter.png) no-repeat center center;}

#menu ul.sub li {
position:relative;
float:left;
background-color:#222;
}
#menu ul.sub {
position:absolute;
top:40px;
left:0;
display:none;
z-index:999;
}
#menu li:hover ul.sub, #menu li.over ul.sub{display:block;}
#menu ul.sub li{
display:block;
width:150px;
}


Fim do código CSS

Adicionar o Script  do Menu

Próximo passo é adicionar o Script do menu, então, pressione novamente as teclas de atalho "Ctrl+F" e pesquisar esta segunda Tag " </header> ".

Quando encontrar a segunda Tag, logo acima da mesma coloque o código Script do Menu.

Código Script


<div id='menu-wrapper'>
<div class='content-wrapper'>
<nav id='menu'>
<ul>
<li class='homers'><a href=' URL'> Início</a></li>
<li><a href='#'>Sobre &#187;</a>
<ul class='sub'>
<li><a href=' URL '>Sobre nós</a></li>
<li><a href=' URL '>Anúncio</a></li>
<li><a href=' URL '>Parceria</a></li>
</ul>
</li>

<li><a href='#'>Categorias &#187;</a>
<ul class='sub'>
<li><a href=' URL '>Fotos</a></li>
<li><a href=' URL '>Vídeos</a></li>
<li><a href=' URL '>Músicas</a></li>
</ul>
</li>

<li><a href=' URL '>Contato</a></li>
<li><a href=' URL '>Serviços</a></li>
<li><a href=' URL '>Download</a></li>
<li><a href=' URL '>Artigos</a></li>

<li class='SocialIcons'>
<ul>
<li class='icon_facebook'><a href=' URL ' target='_blank'>Facebook</a></li>
<li class='icon_twitter'><a href=' URL ' target='_blank'>Twitter</a></li>
<li class='icon_google'><a href=' URL ' target='_blank'>Google+</a></li>
<li class='icon_youtube'><a href=' URL ' target='_blank'>YouTube</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>

Fim do Código Script


Depois de ter inserido os dois códigos do menu, é preciso em seguida "visualizar o template" para verificar se tudo ocorreu bem, então clique no Botão "Visualizar modelo".

Após a verificação, volte ao HTML do Blog clicando no botão "Editar modelo" para em seguida editar o menu.

Editando menu

"Nesta parte é preciso ter bastante atenção para não erra nada".

O código que iremos editar será o "Script do menu" que é o segundo código que foi inserido no Blog.
Observe que eu destaquei algumas parte do menu em cores diferentes.
  • Onde está destacado em vermelho trata-se do titulo de cada botão, e você pode renomear cada um deles: (Início, Categorias, Contato, Serviços, Download, Artigos..) entre outros.
  • Em azul  "URL" você vai substituir pelo endereço da página.
Exemplo:
<li><a href='http://variasdicasparablogs.blogspot.com/p/contato.html'>Contato</a></li>.
  • Os botões de redes sociais altere somente a "URL" o título não é necessário, pois o botão utiliza imagem.

Depois de editar cada botão, antes de salvar verifique seu template. Se tudo ocorreu bem cliquem em "Salvar modelo".

Salvar template do Blog

Pronto!!! Depois de salvar modelo a instalação do menu é concluída e o tutorial termina por aqui.



Como Excluir ou adicionar mais Botões


Excluir botão:
Se por acaso ficar algum botão em branco e deseja excluí-lo, basta apagar a linha referente a onde ele se encontra. (veja exemplo da linha do botão)
EX:  <li><a href=' URL '>Contato</a></li>
Observe: Se não quiser excluir o botão você pode deixá-lo em branco, basta substituir a parte azul por um sustenido jogo da velha "#".
EX<li><a href=' # '>Contato</a></li>

Para adicionar mais botões:

Você viu que este menu horizontal possui dois "sub-menus" e, se desejar adicionar mais opção dentro dos sub-menus basta fazer as seguintes alterações.

  • Copie este código:
<li><a href=' URL '>TITULO</a></li> 
  • Depois cole o código abaixo da linha do Sub " <ul class='sub'> ". 
Veja no exemplo como ficaria:
<li><a href='#'>Categorias &#187;</a>
<ul class='sub'>
<li><a href=' URL '>TITULO</a></li>
<li><a href=' URL '>Fotos</a></li>
<li><a href=' URL '>Vídeos</a></li>
<li><a href=' URL '>Músicas</a></li>
</ul>
</li>

  • Para colocar mais botões basta repetir o código quantas vezes quiser, sempre um abaixo do outro.
E pronto!!! Só salvar o modelo

Como alterar as cores do menu horizontal

Lembrando que a alteração das cores devem ser feita no "código CSS do menu" que foi mostrado no começo do tutorial.

  • Fundo do menu: Substitua este código de cor "#222" pelo código da cor em HTML que deseja colocar no menu. (Ver tabela de cores em HTML).
  • Cor do fundo Hover: Cor do fundo hover é quando passamos o mouse e ele muda de cor, então, substitua este código "#4F4F4F" e "#4F4F4F"pelo código da cor em HTML que deseja colocar. (Ver tabela de cores em HTML).
  • Cor do fundo das redes sociais: Você vai substituir esta parte " #404040 " pelo código da cor em HTM.
  • Cor da letra: Onde estiver este código destacado em negrito "#fff" o substitua por outra cor.


É bem fácil de mudar as cores, basta substituir o código HTML por outra cor, e você pode encontrar mais cores em HTM acessando esse link: "Ver tabela de cores em HTML".


Dica importante de edição: A onde estiver escrito "background" ele representará a cor do plano de fundo, e onde tem tiver "color" representará a cor da letra, e no código você encontrará eles desse jeito, exemplo:
background: #222; color:#fff
Sabendo isto, você conseguirá entender melhor.


Prontinho pessoal, espero que tenham gostado, aguardo comentários de todos e não deixe de curtir minha fã page no facebook.

2 comentários:

  1. boa tarde pratarrão, me fá o meu blog quando eu digito este codigo ]]> ele não mostra nada dentro da caixa html o q eu faco me explica mas um pouco, pra me estero resposta

    ResponderExcluir
  2. ou meu querido este menu não esta fusionando no meu blog não
    ele aparece as letras logo a baixo porque isso

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook