Ajustar a largura do blog - Blogger

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

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

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

Redimensionar imagem no IE com CSS e HTML

Devido ao internet explorer não aceitar grande parte das propriedades CSS (como o background-size), vamos precisar fazer um macete para redimensionarmos imagens nele.

Tutorial testado no IE 6, Firefox 3.6, Chrome 9 e Ópera 11.

Imagem por: Marjan Krebelj

Caso queira redimensionar imagens usando CSS (background-size) acesse:

• redimensionar imagens com CSS3.

Para começar vamos fazer uma div que conterá a imagem a ser redimensionada:

Créditos: 10calco.blogspot.com
<div id='test'>
 <ul>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

Após a tag UL vamos acrescentar a imagem e vamos definir uma classe para ela através do seguinte código em negrito:

<div id='test'>
 <ul><img class='bg' src='plano_de_fundo.jpg'/>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

No CSS vamos definir o tamanho da div e aplicar z-index igual a 1 ao LI:

#test {
width:500px;
height:100px;
}

#test ul li {
z-index:1;
}

Por último vamos colocar a imagem por trás do texto com z-index igual a -1, definir posição absoluta e deixar a imagem do mesmo tamanho da div:

#test img.bg {
z-index:-1;
position:absolute;
width:500px;
height:100px;/* Créditos: 10calco.blogspot.com */
}

-Nota: Se o tamanho da imagem estiver em porcentagem ela só ficará correta no IE.
[Editado: 08/04/2011] Para resolver esse problema veja: Imagem auto ajustável com CSS.[/Editado]

Conhece algum outro macete ou algum aprimoramento para este? Então poste nos comentários ou entre em contato

Continuar lendo ... "Redimensionar imagem no IE com CSS e HTML"

Table e Tableless, quais as diferenças?

Não é raro encontrarmos layouts formulados em tabelas, ou ainda layouts que misturam table e tableless. Mas afinal, qual a diferença e quando usar cada um?

Vamos a uma breve explicação sobre essas duas técnicas:

Table/tabelas.

Técnica criada para apresentar dados tabulares, que passou a ser usada na estruturação de layouts.

•Código básico de uma tabela:

Créditos: 10calco.blogspot.com

<table>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

•E como seria visto no navegador:

Célula 1	Célula 2
Célula 3	Célula 4

Com a evolução do HTML e a individualidade dos browsers em interpretar os códigos, foram necessárias algumas mudanças na forma de estruturar layouts.

Tableless/"sem tabelas".

Consiste em dar maior semântica ao uso das tags HTML na construção de layouts. Uma das características do tableless é o fato de trabalhar com a linguagem de marcação (ex: HTML) separada da linguagem de estilo (CSS), o que permite maior controle e facilidade na hora de fazer alterações nos códigos.

•Código básico em tableless:

<div id='menu'>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

•E como seria visto no navegador:

• Item 1
• Item 2

Créditos: 10calco.blogspot.com

»Conclusão.

Table já foi a principal ferramenta para criação de layouts, e ainda é muito defendida e utilizada por parte dos usuários. Porém após a criação do Web standards, juntamente com o Tableless e o CSS podemos criar layouts com maior acessibilidade, semântica e facilidade na sua manutenção.
Isso não quer dizer fim ao table, ou condenar sua utilização, mas sim fazer uso racional dessas técnicas, utilizando cada uma para seu devido fim.

Para finalizar deixo aqui um link muito interessante do blog Revolução Etc, de Henrique C. Pereira sobre Introdução a Semântica.

Continuar lendo ... "Table e Tableless, quais as diferenças?"

Descompactar urls com Long URL Please

Urls compactadas tem como principal uso poupar espaço, principalmente em redes sociais, em que há um limite de carácteres por mensagem. Porém nem sempre esse artifício é utilizado com boas intenções, sendo muitas vezes arriscado clicar em qualquer link encontrado por ai.

Long URL Please é um complemento para firefox que tem a função de mostrar o endereço original escondido por trás da maioria desses links.



A sua utilização é bem simples, basta instalar que ele faz o resto sozinho.
Para baixar o Long URL Please acesse:

• https://addons.mozilla.org/pt-BR/firefox/addon/9549/.

Dica via: @softonic_br em http://long url-please.softonic.com.br/

Continuar lendo ... "Descompactar urls com Long URL Please"

Efeito mouse hover em Li pai de menu drop down

-Nota: "Este tutorial visa personalizar um menu drop down já pronto, fazendo com que o 'Li pai'(Menu Pai) dos submenus fique destacado quando estivermos com 'mouse hover' sobre os submenus"

Para explicar melhor o que iremos fazer seguem duas imagens:

A primeira é como geralmente se comporta esse tipo de menu. Note que o menu About não apresenta a imagem quando navegamos pelos seus submenus:



Já a segunda é o nosso objetivo, ou seja, o menu About(Li pai) mostra uma imagem quando navegamos pelos submenus:



Lembrando que esse tutorial foi baseado no modelo de menu drop down ensinado por Maujor.
Mãos à obra!

1-Na primeira parte definimos a imagem que aparecerá no estado mouse hover sobre todos os links do menu:

Créditos: 10calco.blogspot.com

#drop-down ul li:hover a {
background-image: url(...imagem do estado mouse hover...);
}

...
...

2-Na segunda parte vamos enganar o css, fazendo com que a imagem acima não apareça nos submenus.
Digamos que cada item do nosso menu apresente um degrade azul como background. Então no código abaixo vamos definir esse mesmo degrade aos submenus.
Se não fizermos isso, quando colocarmos o mouse sobre o menu pai a imagem do estado mouse hover aparecerá sobre todos os itens do submenu:

#drop-down li ul a {
background-image: url(Ex: degrade_azul.jpg) !important;
}

...
...

3-Por último mostramos a imagem do estado mouse hover novamente, mas dessa vez ela aparecerá somente enquanto estivermos com o mouse sobre cada item do submenu:

#drop-down li ul a:hover {
background-image: url(...imagem do estado mouse hover...) !important;
}

Créditos: 10calco.blogspot.com
O resultado será semelhante ao mostrado na segunda imagem postada nesse artigo.
Note que foi declarado !important nas duas últimas partes do código, caso contrário ele não funcionará como previsto.

Caso seja necessário redimensionar alguma das imagens usadas veja Redimensionar imagens com CSS.

Continuar lendo ... "Efeito mouse hover em Li pai de menu drop down"

Dividir plano de fundo da página - CSS 3

Nesse post usaremos uma técnica de CSS3 chamada multiplos backgroundsRef[2], que permite definir mais de uma imagem como plano de fundo.

-Nota 1: Para essa técnica são necessários conhecimentos básicos de CSS.

-Nota 2: Apesar deste tutorial mostrar especificamente como dividir a página do blogger, essa técnica pode ser usada para dividir qualquer background que esteja em CSS.

Mãos à obra.

Acesse Painel de Controle > Design > Editar Html e localize algo semelhante a isso:

/* Créditos: 10calco.blogspot.com */
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Altere a parte em negrito pelo seguinte código:

background-color:$bgcolor;
background-image: url(Plano de fundo 01), url(Plano defundo 02);
background-position: left top, left bottom;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat-x;
background-size: 200px 50%, 100px 100px;
-o-background-size: 200px 50%, 100px 100px;
-moz-background-size: 200px 50%, 100px 100px;
-webkit-background-size: 200px 50%, 100px 100px;
background-attachment:fixed;

Substituir "Plano de Fundo" pelo endereço das imagens a serem utilizadas.
Esse é um código comum para background, porém note que há dois valores separados por vírgula em cada propriedade, cada um deles define sua respectiva imagem. Se quiser utilizar mais imagens basta separar os valores por vírgulas.
O background-size define o tamanho de cada imagem, para mais informações sobre essa propriedade veja: Redimensionar imagem com CSS
No mais é CSS básico. Divirtam-se.

Meu exemplo ficou assim:

E o código usado:

background-color:$bgcolor;
background-image: url(http://lh5.ggpht.com/_gkCCEPUJN58/TFGLOGhDgTI/AAAAAAAABJ4/27IEt3o-a54/s640/lua-1919.jpg), url(http://lh5.ggpht.com/_gkCCEPUJN58/S7Hpx44wlaI/AAAAAAAAAag/zCmT7pYZlGQ/s640/chuva.jpg);
background-position: left top, left bottom;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat-x;
background-size: 100% 50%, 100px 50px;
-o-background-size: 100% 50%, 100px 50px;
-moz-background-size: 100% 50%, 100px 50px;
-webkit-background-size: 100% 50%, 100px 50px;
background-attachment:fixed/* Créditos: 10calco.blogspot.com */

Azul= Imagem de cima com 100% de largura, ocupando 50% da altura da página e não se repete (no-repeat).
Vermelho= Imagem do rodapé com 100px de largura, 50px de altura e repetindo horizontalmente (repeat-x).
A propriedade background-origin como o próprio nome diz, define a origem do posicionamento do background, que no caso é a borda do elemento (border-box). Ver Ref[3]
Ambas as imagens estão com position=fixed, ou seja, estão fixas na página mesmo com a rolagem da mesma, o que dá um efeito interessante ao fundo.
A cor do background é preta para esconder o espaço entre as duas imagens.


Links recomendados:

• Ref[1]Guia W3C - Background
• Ref[2]Técnica de Multiplos Backgrounds - CSS3 Info
• Ref[3]Criarweb - Background-origin

Continuar lendo ... "Dividir plano de fundo da página - CSS 3"

Redimensionar imagem com CSS - background-size

Neste tutorial veremos como redimensionar imagens usando CSS, através da propriedade "background-size".

Imagem por: mauricesvay

Se a imagem que será redimensionada estiver em uma tag html <img src="..."/>, utilizamos width e height na própria tag ou no CSS:

/* Créditos: 10calco.blogspot.com */
seletor img {
width:xx; /* largura */
height:xx; /* altura */
}

Porém se a imagem estiver no CSS, como no exemplo abaixo:

#div {
background-image: url(imagem.jpg);
}

Usaremos o background-size. E nosso exemplo fica assim:

#div {
background-image: url(imagem.jpg);
background-size:100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
/* Créditos: 10calco.blogspot.com */

Os valores 100% 100% representam respectivamente largura e altura, que devem ser alterados para os valores desejados nas cinco linhas.

Lembrando que essa é uma técnica de CSS3 que ainda não está totalmente funcional, então por isso foram acrescentados os códigos "-webkit-", "-o-", "-khtml-" e "-moz-".

-09/09/2010: Acrescentado propriedade "-moz-background-size", o que torna o código funcional com Mozilla Firefox.


Esta técnica não funciona no Internet Explorer, para isso veja:

• redimensionar imagens no ie com css e html.

Links recomendados:

• CSS3 Info - background-size
• W3C - background-size

Continuar lendo ... "Redimensionar imagem com CSS - background-size"

Como colocar fundo degrade no blogger

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;
...
...
}

Fácil não?

Essa dica foi baseada no tutorial do Maujor em: http://maujor.com/dicas/bgdegrade.php

Continuar lendo ... "Como colocar fundo degrade no blogger"