terça-feira, 7 de maio de 2013
Olá Galera, hoje vou ensiná-los como deixar o menu lateral do seu jeito!

Ex:



Vá em Modelo, Editar HTML.// Ctrl + F e procure por: ]]></b:skin>

Adicione o Seguinte Código Acima da Tag!

/* Menu Lateral do Seu Jeito GxpDesign

-----------------------------------------------*/

#menulateral li {

margin:0;

padding-top:0;

padding-bottom:.25em;

padding-$startSide:15px;

line-height:1.5em;

list-style:none;

}

#menulateral li {

height:20px;

font-family:Arial;/*TIPO DA FONTE*/

margin:-1px 0 0 3px;

text-indent:-15px;

text-shadow:0 0 .3em #2a2a2a;/*SOMBRA DO TEXTO*/

font-weight:bold;

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

text-decoration:none;

padding:1px 0 0 15px;

font-size:15px;

text-decoration:none;

padding:0px 0 0 1px;

font-size:120%;

}

#menulateral li:hover{

height:20px;

font-family:Arial;

text-indent:-15px;

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.2s linear;

transition: all 0.5s linear;

}

#menulateral li a{

padding:0px 0 0 18px;

font-family: Century Gothic;/*TIPO DA FONTE*/

font-size:15px;/*TAMANHO DA FONTE*/

width:186px;/*LARGURA*/

height:20px;/*ALTURA*/

font-weight:normal;/*ESTILO DA FONTE*/

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

text-decoration:none;

display:block;

border-bottom:0px solid #e0e1e4;

-webkit-transition:All 0.5s ease;

-moz-transition:All 0.5s ease;

-o-transition:All 0.5s ease;

}

#menulateral li a:hover{

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

width:186px;/*LARGURA*/

height:20px;/*ALTURA*/

text-decoration:none;

border-bottom:0px solid #e1e2e3;/*COR DA BORDA INFERIOR*/

-webkit-transition:All 0.2s ease;

-moz-transition:All 0.2s ease;

-o-transition:All 0.2s ease;

padding-left:54px;


}

Salve o Modelo!

Vá em Layout, adicione um Gadget HTML/JavaScript


<div id='menulateral' style='background: CORou url('');'>
<li><a href="Link Da sua Postagem AQUI" title="Home">Home</a>

0 comentários: