26 de novembro de 2013

Tutorial - Menu Sidebar

Oi, pessoaaaal! Sim, estou mais calma rs. Ontem, tive que desabafar aqui no meu cantinho, afinal foi pra isso que eu criei o blog. Desculpe-me as palavras, mas o assunto que eu abordei, realmente, era polêmico.

Bom, hoje, eu vou ensinar mais um tutorial para vocês. Dessa vez, vou mostrar passo a passo de como se faz um menu para sidebar. Para quem não sabe o que é sidebar, vou explicar. Sidebar são essas caixinhas que ficam ao lado das nossas postagens.


Portanto, vou ensiná-los a fazer um menu para o seu blog, e que fique nessas caixinhas, ao lado das postagens. Lembrando que os créditos vão para o falecido blog da Liah - Cherry Bomb. Para ver o resultado, clique aqui . 

Então, vamos lá!! É super simples. 

1º passo - Vá em Modelo, aperte Ctrl + f procure por ]]>. Quando o encontrar, cole o seguinte código ACIMA dele. 

/*menu por Liah - Cherry Bomb - credite sempre*/#menucb {
float: left;
display: line;
margin:1px;
background:#FFC0CB; /*Cor de fundo */
width: 87px; /*Largura de cada link do menu */
height: 25px;
text-align:center;
font-size: 16px; /*Tamanho da fonte*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 0px 9px #cccccc;
-webkit-box-shadow: 1px 0px 9px #cccccc;
box-shadow: 1px 0px 9px #cccccc;
text-shadow: 0px 1px 5px #cccccc;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
#menucb:hover {
background: #FF1493; /* Cor de funo quando passa o mouse*/
color: #fff; /*Cor do texto quando passa o mouse*/
}
2º passo - Salve e vá em Layout. Feito isso, clique em Adicionar um Gadget e procure por HMTL/Javascript. Ao encontrá-lo, cole o código abaixo nele. 

<a href='LINK' id='menucb'>TÍTULO DO LINK</a>
3º passo - visualize e, se estiver tudo ok, salve.

Pronto, galera. Seu menu está pronto para uso. Lembrando que tudo o que eu coloquei em negrito, você pode mudar. "LINK" E "TÍTULO DO LINK" você deve mudar, é claro. Então, gente, é isso. Um beijo e até a próxima, com mais novidades, claro.

Laris Carneiro

0 comentários:

Postar um comentário

Related Posts Plugin for WordPress, Blogger...