CPT - Centro de Produções Técnicas

Como colocar menu horizontal com botões de redes sociais no Blog.


Este menu horizontal compõem menus e 2 sub-menus com as principais redes sociais, Facebook, Twitter, Google+ e Youtube.
Se seu blog tem muito conteúdo, esse menu é indispensável, é bonito, dá uma aparência de sofisticação ao seu layout, abre espaço nas laterais, é de fácil acesso para os visitantes, porque além do cabeçalho, o menu é a primeira coisa que vemos ao abrir um site, está tudo ali. As chances de um visitante clicar em mais links é bem maior.


Veja também: Como colocar banner de afiliados no cabeçalho do blogger


Na verdade este menu é na cor preta, com uma fonte diferente, ele é totalmente editável, você pode mudar as cores e editar todos os botões.

Nos vamos mostrar aqui passo a passo, bem detalhado como fazer isso:

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:




/* 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;
}




 

Agora vamos 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.
<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>





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".

Se estiver tudo certo, o seu blog deve estar com este menu na cor preta, que é a cor padrão do código.

Após a verificação, volte ao HTML do Blog clicando no botão "Editar modelo" para que você possa  editar o menu


O código que iremos editar será o "Script do menu" que é o segundo código que foi inserido no Blog.
  • 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.
  • 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 clique em "Salvar modelo".

Está pronto seu menu!


Mas como faço para excluir ou adicionar mais Botões?

Para 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.

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.
Este tutorial eu segui de um outro blog, nele não explica como trocar a fonte, mas arrisquei e deu certo, neste mesmo código que foram trocadas as cores, lá no começo do código eu destaquei em vermelho o nome da fonte sans-serif, peguei o nome de outra fonte e substitui.