OiOi gente!!
Hoje eu vim trazer pra vocês um tutorial super simples de um menuzinho para links em Hover que fica como esse:
Na verdade eu nem sei porque coloquei o nome de Candy,Apenas achei ele muito fofo e usável.
Bora ao Tuto?!
Primeiro vá em modelo > editar html > e procure por ]]>
Acima Cole:
/*Menu Candy- My dreams---------------Agora você vai em layout > adicionar gadget > html/javascript
-------------------------------------*/
menucandy {font-family:Comic Sans MS;/*fonte*/letter-spacing: 1px; font-size: 11px;/*tamanho da fonte*/ line-height: 15px; display: inline-block;
background:#ffffff;/*cor do fundo*/color:#DB7093;/*cor da fonte*/ float: left; width: 100%; padding: 4px; text-align: center;
text-shadow: 2px 2px 3px #FFC0CB;/*sombra do texto*/ }
menucandy:hover {font-family:Comic Sans MS;/*Fonte em Hover*/ letter-spacing: 2px; font-size: 12px;/*tamanho da fonte em hover*/ line-height: 17px; display: inline-block;
background:#DB7093;/*cor do fundo em hover*/color:#ffffff;/*cor da fonte em hover*/ float:left; width: 100%; padding: 4px; text-align: center;
text-shadow: 2px 2px 3px #FFC0CB; }
faixa {font-family:Comic Sans MS; letter-spacing: 1px; font-size: 11px;line-height: 15px; display: inline-block; background: #DB7093;/*cor da faixa de cima*/color:#fff; width: 105%; padding: 2px; float:left; border-top-left-radius: 0px; border-top-right-radius: 0px; text-shadow: 2px 2px 3px #eee;}
faixa2 {font-family:Comic Sans MS; letter-spacing: 1px; font-size: 15px; line-height: 19px; display: inline-block; background:#DB7093;/*cor da faixa de baixo*/color:#fff; width: 105%; padding: 2px; float:left; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; text-shadow: 2px 2px 3px #eee;}
/*------------------------Fim do Menu Candy----------------------------*/
e cola o seguinte codigo
<div style="position:absolute; width:80px; left: 0px ; top:0px; padding-top:0px; z-index:2;">
<center><faixa> </faixa>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<faixa2></faixa2></center>
</div>
Atenção
Onde está left: 0px ; top:0px; é definido o lugar e a altura.
Se a sua Sidebar esta a Direita o Left fica em 900px e se a sua sidebar é a esquerda o left fica em 15px.
Já a Altura você define como quiser na minha opinião fica melhor em 20px.
2.Onde está escrito em Negrito, são as informações que você pode alterar.
3.Caso você queira adicionar mais um link, você cola a tag
<a href="LinkAqui"><menucandy>NOME</menucandy></a>antes de <faixa2></faixa2></center>.
Espero que vocês gostem..
Caso utilizem Favor Creditar ao Blog My Dreams.
anw amei o menu *-*
ResponderExcluir# cute-bii.blogspot.com
Que bom que você gostou Domênica >.<
ExcluirQue lindinho o menu :3 adorei!
ResponderExcluirquemprecisadetvparaverbeyonce.blogspot.com
Muito fofo *.*
Excluirbem explicadinho , vc mudou o theme? amei
ResponderExcluirquaseprincipa.blogspot.com.br
Mudei sim Vanussa ><
ExcluirQue bom que você gostou.
Oi te mandei convite no face,m adciona lá bjs
ResponderExcluirJá aceitei simone e deixei um recado pra vooc na inbox.
Excluir