colocando estilo na sidebar do blog

Primeiramente antes de tudo, faça um backup do seu template para que não de nenhum tipo de poblema.

Designer > Editar Html > E baixar modelo completo.

O teste foi feito com template minima , Este modificação sera feita na H2 da sidebar.Que leva em conta a data do blogger e os titulos do post.

/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;}


Mas você pode dar outros estilos para os títulos da sidebar, inclusive usando imagens e cores diferentes para cada um, bastando acrescentar um pouquinho mais de css.

Aqui temos uma sidebar sem estilo.


Localize o trecho em Css:
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;}

Logo depois, acrescente:

.sidebar h2{   }
é entre as chaves que você irá acrescentar o estilo que pretende dar aos títulos da sidebar. Por exemplo:

.sidebar h2{
font-size: 22px;
color: red;}


Resultado:


Este codico abaixo serve para voçê dar estilo as cores de fundo da sidebar e titulos Pode, por exemplo, determinar que a primeira letra de cada titulo seja diferente do restante:

.sidebar h2{
font-size: 17px;
color: #777e95;
font-family: Tahoma;}

.sidebar h2:first-letter {
font-family:Tangerine;
color:#8262ae;
font-size:38px;
font-weight: bold}
Posso criar e acrescentar uma imagem de fundo (aqui criei uma imagem 320 x 50):

.sidebar h2{
width: 320px;
height: 50px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
}

Espero que tenha ajudado.....

Previous
Next Post »