29/08/2013

Tutorial: Menu Boom


Olá novamente image 

Faz um bom tempo que eu não trago menus né? No começo do blog eu trazia alguns menus que eram até uteis, mas ai não sei o que aconteceu, acho que por falta de tempo que não deu mais para procurar ou até mesmo fazer menus, então eu me desleixei e parei de postar qualquer outro tipo de tutorial né?! Bom, esse tutorial de hoje é de um menu simplesinho, eu nem sei porque o nome dele é Boom. Eu achei esse menu aqui no meio das minhas bagunças do PC, então eu não sei de quem é o menu, se alguém souber me fala que eu dou os devidos créditos. Eu achei muito bonito esse menu, não é atoa que eu estou usando ele, ele serve para várias coisas tanto como tags, afiliados, ou até menus de rede sociais né? Espero que gostem. 



 Como sempre, você vai em "Modelo" > "Editar HTML" e procurar por: 
]]></b:skin>

 Antes dessa tag você vai colar:

boom{
color: #fff;
text-align:center;
font-family: silkscreen;
font-size: 8px;
background: #5a99c0;
padding: 2px;
float: left;
margin: 2px;
width: 20%;
-webkit-transition-duration: .80s;
outline-style:solid;
outline-width:1px;
outline-color: #51809c;
outline-offset: -1px;
border-radius: 0px;
}
boom:hover{
border-radius: 0px;
padding: 2px;
background: #2a5a7d;
color: #fff;
outline-style:solid;
outline-width:1px;
outline-color: #fff;/*não mexer*/
outline-radius: 2px;
outline-offset: 0px;
border: 1px solid #3da8ce padding 5px;
text-shadow: 1px 1px 3px #36719e;
box-shadow: inset 0 0 5px #1b5886, 0 0 1px #1b5886;
-webkit-transition-duration: .80s;

 Editando apenas o que está em negrito. Depois de você salvar, vá em Layout, adicione um gadget e cole: 

<center style="font-weight: normal; font-style: normal;"><a href="SEULINK"><boom>TITULO</boom></a><a href="SEULINK"><boom>TITULO</boom></a><a href="SEULINK"><boom>TITULO</boom></a><a href="SEULINK"><boom>TITULO</boom></a></center>

 Editando também só que está em negrito, depois você salva e vê se esta tudo certo! Fácil né? Espero que tenham gostado. Até mais! 

2 comentários: