www.facebook.com/mundodeblogueira https://twitter.com/@mundoblogueira www.instagram.com/mundodeblogueira http://mundodeblogueira.blogspot.com.br/p/contato.html https://plus.google.com/u/0/105226761191522044936/posts https://www.youtube.com/channel/UCPDrL7CSt-lneOtMMtQoahw

Como criar menu vertical




No Tutorial de hoje, vamos aprender a fazer um menu vertical, 
como esse da imagem abaixo, que é bem bacana para você usar no seu blog. 






No Painel de seu blog, Vá em LAYOUT, ADICIONAR UM GADGET, HTML/JAVASCRIPT. 
Cole o código abaixo. Note que destaquei no código algumas áreas que você poderá alterar a seu gosto.


<STYLE type="text/css">

#menuzinho {

display: block;

width: 100%;

height: 19px; /* NESSA AREA VOCÊ VAI CONFIGURAR A ALTURA DO MENU /*

width:178px /*  NESSA AREA VOCÊ VAI CONFIGURAR A LARGURA DO MENU /*

vertical-align: middle;

font-family: Verdana, Arial, sans-serif;

font-size: 10px; /*  NESSA AREA VOCÊ VAI CONFIGURAR O TAMANHO DA FONTE */

font-weight: bold;

color: #fb67ad; /* COR DA FONTE */

text-indent: 5px;

line-height: 17px;

margin-bottom: 3px;

margin-left: -1px;

background-color:#ffffff; /* COR DO FUNDO */

}

#menuzinho:hover {

display: block;

color: #fe94f0; /*  NESSA AREA VOCÊ VAI CONFIGURAR A COR DA LETRA QUANDO PASSA O MOUSE */

background-color: #efceeb; /*  NESSA AREA VOCÊ VAI CONFIGURAR A COR DO FUNDO QUANDO PASSA O MOUSE */

}

</style>

<a id="menuzinho" href="URLDOLINK">LINK 1 COLOQUE O NOME DO LINK AQUI</a>
<a id="menuzinho" href="URLDOLINK">LINK 2 COLOQUE O NOME DO LINK AQUI</a> 
<a id="menuzinho" href="URLDOLINK">LINK 3 COLOQUE O NOME DO LINK AQUI</a> 
<a id="menuzinho" href="URLDOLINK">LINK 4 COLOQUE O NOME DO LINK AQUI</a> 
<a id="menuzinho" href="URLDOLINK">LINK 5 COLOQUE O NOME DO LINK AQUI</a> 




Sempre que você quiser acrescentar algum link ao menu, copie o código da linha abaixo, no final do seu código do menu.

<a id="menuzinho" href="ENDEREÇO DO SEU LINK">NOME DO SEU LINK </a> 




Ele deverá ficar mais ou menos assim, isso depende de você.

<a id="menuzinho" href="http://mundodeblogueira.blogspot.com.br/">HOME </a> 







1 comentários:

  1. Amei!! Ficou super fofo mas eu não achei a cor ideal pra colocar no meu fundo, então desisti! Mas talvez depois eu volte a procurar ache e use.

    http://thoughtsfromjulia.blogspot.com.br/

    ResponderExcluir

Obrigado por comentar. Mundo de Blogueira agradece sua visita !


* Clique aqui e aprenda a colocar o link do seu blog nos comentários
* Não serão aceitos comentários somente com objetivo de divulgação, ou que ofenda qualquer leitor.
*Antes de pedir algum tutorial, verifique se o mesmo já não foi postado.

 
© Mundo de Blogueira - 2017. Todos os direitos reservados.
Criado por: Vanessa P.