Ajustar a largura do blog - Blogger

12 março 2011
Blogger , CSS/HTML
7 comentários

Antes de alterarmos as dimensões do blogger vamos conhecer como ele é estruturado e quanto de espaço vamos reservar para cada parte do layout.

»Estrutura básica do blogger.

Baseado no modelo Minima teremos a seguinte estrutura:
(Clique para ampliar / Abre em outra janela)

Legenda:

outer-wrapper: Bloco principal que engloba todo conteúdo do blog. Dentro dele estão as demais partes citadas abaixo;

header-wrapper: Aqui fica o cabeçalho(título) da página;

main-wrapper: Aqui ficam as postagens e os comentários;

sidebar-wrapper: Aqui fica a barra lateral;
Créditos: 10calco.blogspot.com
footer-wrapper: E aqui fica o rodapé da página.

»Alterando os valores.

Para começar acessamos Design > Editar HTML > e localizamos o seguinte trecho:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

#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 */
}Créditos: 10calco.blogspot.com

Como já sabemos o que cada parte faz, para mudarmos sua largura basta alterarmos o valor width de cada seletor para os valores desejados.
Lembrando que o valor do main e da sidebar juntos não devem ultrapassar o valor do outer-wrapper.

»Exemplo

Vamos deixar nosso blog compatível com resoluções de 1024px de largura para cima.

#outer-wrapper {
width: 980px;
margin:0 auto;
...
}

#main-wrapper {
width: 650px;
float: left;
margin-right:10px;
...
}

#sidebar-wrapper {
width: 320px;
float: right;
...
}

Somando o valor do main-wrapper, mais a margin-right com o valor da sidebar obtemos o valor do outer-wrapper.

Podemos ainda alterar a largura do cabeçalho com a seguinte parte do código:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
} /* Créditos: 10calco.blogspot.com */

Nota: Nem todos os templates apresentam os mesmos nomes e valores.
Baseado nas dicas passadas aqui cabe a você identificar cada parte e configurá-la como desejar.

»Não esqueça de testar seu blog em várias resoluções após definir novos valores.

Continuar lendo ... "Ajustar a largura do blog - Blogger"

Teste seu blog em várias resoluções

10 março 2011
Blogger
2 comentários

De acordo com as estatísticas da w3schools e do w3counter, a maioria dos usuários utilizam resoluções de 1024x768 ou superior. Enquanto o velho 800x600, que já foi muito usado a tempos atrás vem caíndo consideravelmente, sendo utilizado atualmente por cerca de 2% do total de usuários.

Qual a resolução mínima que seu blog ou site suporta?

Se você nunca se preocupou com isso é uma boa hora para começar. Já imaginou entrar em um blog com o menu pela metade e a sidebar jogada abaixo das postagens? Aqui no 10calço me aconteceu mais ou menos isso, resolvi ver como o blog estava sendo apresentado em outras resoluções e para minha surpresa em 1024x728 a sidebar ficava colada no rodapé.

Veja seu site em várias resoluções.

Foi usando o Viewlike.us que descobri o problema com a sidebar. Através dele podemos ver nosso site em 7 diferentes resoluções, desde 800x600 até 1920x1200!, sem contar a resolução para iPhone e Wii Browser.

Nota: Digite a url que quiser verificar sem o http://.

Outro serviço no mesmo estilo é o Simures. Com a diferença que nele digitamos a largura e altura que queremos avaliar.

E ai, já sabe como seu blog se comporta em outras resoluções? Será que a sua sidebar não anda "fugindo"?

Continuar lendo ... "Teste seu blog em várias resoluções"

Como colocar fundo degrade no blogger

06 julho 2010
Blogger , CSS/HTML
0 comentários

Alterar o background do blogger é muito fácil mesmo para quem não conhece muito (ou nada) de html.

Para começar acesse: Painel de Controle > Design > e clique em Editar Html.
Em seguida localize o trecho:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

O que nos interessa no momento é a parte em negrito, que deverá ser substituída pelo código a seguir:

background:#FFFFFF url("Endereço da imagem")
top repeat-x fixed;

Onde:
#FFFFFF = cor de fundo;
url("Endereço da imagem") = endereço da imagem (oh!);
top= é a posição da imagem;
repeat-x = indica que a imagem irá repetir horizontalmente;
fixed = mantem a imagem fixa na página mesmo com o rolamento da mesma.

» Exemplo 1, degradê horizontal:

body {
background:#FFFFFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEA06zUyWAoR_j08gl7ugEN2jYdozGAy-Ed_6b9IuAg9-w-IqDrIY0JGqJIaeELMRaDL6ddCQAWaYjeO1iNFYibVOewsRJB8J33G9ZTRRYL8Jon1q-VxipEWJuTlUT7mVeIBkCvQySeOk/") top repeat-x fixed;
margin:0;
...
...
}

» Exemplo 2, degradê vertical(repeat-y), partindo da esquerda(left) para o centro:

body {
background:#000000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTZLJklexVPaHS-w-Skija4MJfaYMjp0h_UbPS0h5ym_c4KRJvEMmpLcqwRsoSk66O4zc5OP35j6XZlsmquDy0mRt16FkzjPgSUagC1tnYBc2une4ZcHqZ2ne__ykhkIi2xP5hCS_XJgG/") left repeat-y fixed;
margin:0;
...
...
}