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

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.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKj5xBuhCNmEC9fI2C0C8zExFGjeAmC1XIFF3alZqM2udG37GBGIUvZBAZjJZmVuhlEOn0vy0cftlCrsQvFstYIoZHxMxyj7IiGLW0wdSXUHGZa46tDVJ6kgkD7wutGuRe1psB_UCz7Jex/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKj5xBuhCNmEC9fI2C0C8zExFGjeAmC1XIFF3alZqM2udG37GBGIUvZBAZjJZmVuhlEOn0vy0cftlCrsQvFstYIoZHxMxyj7IiGLW0wdSXUHGZa46tDVJ6kgkD7wutGuRe1psB_UCz7Jex/s1600/googleplus.png) no-repeat center center;}

#menu .SocialIcons ul li.icon_facebook a {background: #404040 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9GiRuRZfYJM0gWnOSODJpVsoxL02QncA9BrsOaI8dyDFJ-6k-zJOqTtYBEi8M2Rf5xbeBHT3Xyy_PWcDG4li6iaQCB_9JWJFGrCJURpxbozwzYnUHxT3ZhGqEhhIriaxl336fCXv5Ac/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9GiRuRZfYJM0gWnOSODJpVsoxL02QncA9BrsOaI8dyDFJ-6k-zJOqTtYBEi8M2Rf5xbeBHT3Xyy_PWcDG4li6iaQCB_9JWJFGrCJURpxbozwzYnUHxT3ZhGqEhhIriaxl336fCXv5Ac/s1600/facebook.png) no-repeat center center;}

#menu .SocialIcons ul li.icon_youtube a {background: #404040 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOw8ptFUjTPP5AUebtzohpfWLZWcy9JynSoO7FX3jz1zMqYnQAlO6bQn8s4e_plCfdDxrTHFGJDOaaJslZSBS6SYn6HinaLouB1YkEwKC6xVDQSunKn2KMEBjjLr1KiPnt8bZtYERhRiS/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOw8ptFUjTPP5AUebtzohpfWLZWcy9JynSoO7FX3jz1zMqYnQAlO6bQn8s4e_plCfdDxrTHFGJDOaaJslZSBS6SYn6HinaLouB1YkEwKC6xVDQSunKn2KMEBjjLr1KiPnt8bZtYERhRiS/s1600/youtube.png) no-repeat center center;}

#menu .SocialIcons ul li.icon_twitter a {background: #404040 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJHDGaxL6367qzNnGGC30Q6JPTvDXmavrBvXARnuTX0uugbXSzZnx4Jq_QRe8drlGNnWYUe_kAPEd76tACXx-Ug0QS155QL4HNE-zgiuvPOZomEUDxOThux9kDq102D42EceSyC_Mak9M/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJHDGaxL6367qzNnGGC30Q6JPTvDXmavrBvXARnuTX0uugbXSzZnx4Jq_QRe8drlGNnWYUe_kAPEd76tACXx-Ug0QS155QL4HNE-zgiuvPOZomEUDxOThux9kDq102D42EceSyC_Mak9M/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".

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.