terça-feira, 26 de junho de 2012

Widgets Separados

E ai galera... vou ensinar como colocar widgets separados. É simples... você só precisa criar um novo sidebar e um widget. (Template Minima!)

Vá em Blogger > Design > HTML:

Agora procure por:  #sidebar-wrapper


Vai ter algo parecido como:
#sidebar-wrapper {
  width: 255px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


Abaixo disso você irá colocar o seguinte código:
#sidebar-wrapper h2 {
height: 23px;
background:transparent url(IMAGEM DO TITULO) no-repeat scroll 0pt;
margin:0pt;
margin-top:15px;
padding: 16px 24px 11px 25px;
color: #000;
text-shadow:0 0 .3em #000000;
font: bold 110%/110% "Lucida Grande", Arial, sans-serif;color: #FFFFFF;text-align: left;
}


1) Sidebar-wrapper h2, h2 representa título do widget... a imagem certamente seria algo como:





2) Padding é onde vai ficar a direção do título do widget. Ajuste os valores para seu agrado.
3) Margin é a direção da imagem.
4) Height é a largura da imagem.

Abaixo desse código acima você irá colocar o seguinte código:

.widget-content {
border: 0px solid #bcbdbd;
background:#555 url(IMAGEM DE CONTINUAÇÃO) repeat-y bottom left;
margin:0pt;
overflow:hidden;
padding:5px 0px 30px;
}

Mesma coisa... (Ajuste os dados para seu agrado.)
1) Padding é para ajustar a direção do texto.
2) A imagem seria algo como:
Essa imagem é para ficar dessa mesma forma... não é preciso criar um "OUTER".

0 comentários:

Postar um comentário