...HELP-ME BLOG ...

Criando Um Blog!

noreply@blogger.com (7TTG) — Tue, 25 Nov 2008 15:07:00 +0000

Faça o Download do Tutorial

noreply@blogger.com (7TTG) — Thu, 20 Nov 2008 19:21:00 +0000

Como personalizar a sidebar

Você quer saber tudo sobre como personalizar a sidebar? Então chegou ao lugar certo :-)
Neste post vou detalhar todas as maneiras possíveis (que eu conheço, óbvio) de personalizar a sidebar (ou coluna do perfil, para alguns).

Primeiro quero lembrar que sempre pego o código do template Mínima (do Blogger) como base para ensinar as modificações. Templates que já foram alterados ou que são criações de outros blogs, podem apresentar algumas diferenças, por isso fique atento principalmente aos títulos que geralmente são os mesmos.

Onde encontrar o código da sidebar?

Procure por (ou algo semelhante):

#sidebar-wrapper {
width: 220px;
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 */
}

Como modificar a largura da coluna?

#sidebar-wrapper {
width: 220px;
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 */
}

Altere o valor de width (o que está em vermelho no código acima). Quanto maior o valor, mais larga será a coluna. Aqui o valor se apresenta em pixels, mas poderá ser determinado em % também. Vá alterando e visualizando por várias vezes, antes de salvar.

Como acrescentar um fundo colorido na sidebar?

acrescente a seguinte linha:
background-color: #000000;

o valor da cor aqui representada é a que equivale ao preto. A cor pode ser determinada por seu código html (como coloquei) ou por seu nome, por exemplo gray, red, black...O código todo então deverá ficar assim:

#sidebar-wrapper {
width: 220px;
background-color: #000000;
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 */
}

Como acrescento uma imagem ao fundo da coluna?

Para acrescentar uma imagem que deve se repetir continuamente, coloque:
background: url(endereço da imagem) repeat;

para que a imagem se repita somente na horizontal:
background: url(endereço da imagem) repeat-x;

para que a imagem se repita somente na vertical:
background: url(endereço da imagem) repeat-y;

para usar uma imagem que não se repete:
background: url(endereço da imagem) no-repeat;

e ainda, para usar uma imagem que não se repete na vertical e manter o restante do fundo de uma cor determinada (como após uma imagem gradiente) use:
background: #7E7E7E url(http://i26.tinypic.com/2z9lkzk.jpg) repeat-x;

ou seja, criei uma imagem de 20X150 para que se repita horizontalmente (preenchendo a largura real da coluna). Para que haja continuação da cor do final do gradiente, copio o valor desta última cor que se apresenta e coloco antes do endereço da imagem.
Veja como:

e a imagem já colocada na sidebar:

Como personalizar os títulos na Sidebar?

No template Mínima não existe o trecho referente aos títulos da Sidebar, então, se você está usando este template, crie o código, caso contrário, se estiver usando um template cujos títulos deseja modificar, procure por:

.sidebar h2{
margin: 0px;
padding: 8px 5px 3px 15px;
}

Para colocar cor ou imagem no fundo dos títulos, segue as mesmas fórmulas para o background da coluna, descritos acima.

Para centralizar o título use:
text-align: center;
para alinhar à esquerda:
text-align: left;

padding cria um espaço entre as letras e os limites determinados para o título e se apresentam
no sentido horário:
padding:8px 5px 3px 15px;

8px: espaçamento do título para o topo
5px: espaçamento do título para a direita
3px: espaçamento do título para a base
15px: espaçamento do título para à esquerda.

Vá testando os valores e visualizando, até que fique do seu agrado.

Como separar as widgets na Sidebar?

Para separar as widgets da sidebar procure por (se já não estiver separada no seu template):

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Separe desta maneira:

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

sendo que o que está em azul refere-se a Sidebar (esqueça o outro trecho por enquanto).

Para que as widgtes fiquem distintamente separadas, como nesta imagem:

deixe o código assim:

.sidebar. widget{
margin: 0px 0px 20px 0px;
padding:20px 5px 20px 15px;
background: #CFC6AF; (aqui coloque o valor da cor escolhida)
border: 2px solid #34201F; (aqui o valor da cor da borda)
}

Óbviamente, para que haja contraste entre o background das widgets e da coluna toda, os valores (cores) escolhidos devem ser diferentes.
Veja que aqui, tanto para margin quanto para padding os valores correspondem aos quatro cantos em sentido horário, como explicado acima

margin: 0px 0px 20px 0px;
margin: topo, direito, base, esquerdo

uma margem de 20px na base garante o afastamento de uma widget da outra.

Edit: à pedidos....

Como colocar uma linha sob os links da Sidebar

Procure por :
.sidebar li{

e acrescente:
border-bottom: 1px dotted $bordercolor;

É ISSO.

Mudar plano de fundo - background

Para mudar o plano de fundo do template, procure por Body no código CSS e alterar o que está em Background:

body {
background-color: $bgcolor;}

Se você deseja alterar somente a cor, faça como no exemplo: background-color e coloque o código da cor (hexadecimal, como: #ffffff), ficando assim:
body{
background-color: #ffffff;

Se deseja colocar uma imagem:

background: url(url da imagem) repeat;

Dica: para que o navegador Intenet Explore consiga interpretar o código, dê um espaço maior entre o endereço da imagem e repeat, caso contrário não aparecerá no navegador, apesar de aparecer normalmente no Firefox e no Ópera.

A imagem escolhida para o fundo do template não precisa necessariamente se repetir indefinidamente. Você pode querer, por exemplo, que esta imagem seja fixa no topo do template. Veja as maneiras como você pode estipular o comportamento da imagem do background (isto vale para a definição de background de qualquer elemento da página, seja body, main, sidebar, etc)

repeat; repete por todo o elemento
repeat-y; repete na vertical
repeat-x; repete na horizontal
no-repeat; não repete

quando for estipulado que a imagem não deve se repetir é necessário informar em que posição ela deverá aparecer:

background: url(url da imagem) no-repeat top left; -> não repete e se apresenta no topo à esquerda.

Para que a imagem fique fixa na tela:
background-attachment: fixed;

Para que a imagem role com a tela:
background-attachment: scroll;

menu com caixa de busca

noreply@blogger.com (7TTG) — Mon, 17 Nov 2008 20:13:00 +0000

Codigo

Resultado

TextArea Personalizada

noreply@blogger.com (7TTG) — Fri, 14 Nov 2008 18:24:00 +0000

Você pode alterar as cores da textarea é só seguir os passos abaixo:

1-Onde esta escrito background é a cor de fundo da textarea,.
2-Onde esta escrito color é a cor do texto da textarea.

Quando for mudar as cores,apague somente o que esta em números e letras,
mas não apague o # e nem o ;

Exemplo: background:#DAF0F8;
Coloque a sua cor somente onde esta em Vermelho

Resultado

Codigo

logo abaixo tem alguns codigos de cores

TEXTAREA AUTO SELECIONAVEL

noreply@blogger.com (7TTG) — Fri, 14 Nov 2008 15:27:00 +0000

TEXTAREA AUTO SELECIONAVEL É QUANDO VC PASSAR O MAUSE EM CIMA DO TEXTO SELECIONA AUTOMATICAMENTE!

RESEULTADO

CODIGO

TextArea com texto dentro

noreply@blogger.com (7TTG) — Sat, 08 Nov 2008 14:32:00 +0000

Resultado

TextArea com imagem dentro

noreply@blogger.com (7TTG) — Sat, 08 Nov 2008 14:20:00 +0000

Resultado

Crie um letreiro digital para o seu blog

noreply@blogger.com (7TTG) — Thu, 06 Nov 2008 11:59:00 +0000

Com signbot você pode criar um letreiro digital animado para inserir no seu blog ou site,Você tem a opção de salvar a imagem no seu computador ou hospedar em imageshack podendo utilizar a URL em seu blog

1° Escreva a frase que desejar no campo em branco
2° Clique em Generate sing
3° Se você quiser baixar a imagem para o seu pc clique em Download Your Sign
Caso queira hospedar no imageshack clique em Host to ImageShack