Entendendo um pouco mais sobre as Grids

Antes de fazer uso das Grids, temos que estabelecer algumas constantes. A primeira será a resolução de tela que nossos visitantes mais usam. Isso é conseguido pelo Analytics, ou ou programa de estatísticas de site.

Resolução de Tela
A maioria hoje em dia usa uma resolução de 1034 x 768. A apresentação das informações, geralmente ocupam, em um browser, 974 x 650 até a quebra de linha (quebra de linha seria o fim da tela do computador).


Então, um layout com dimensões de 960px seria o mais adequado.


Anúncios
Outra constante que deve ser avaliada, são os anúncios do Adsense. O maior bloco de anúncio seria a Caixa Grande de 336 x 280. Trabalhando com medidas em cima deste bloco, já otimizamos espaços para outros, como, o de 300 x 250.


Com medidas em cima deste bloco os outros anúncios estão com espaços garantidos.


Unidades e Colunas
As Grids são compostas de unidades e colunas uniformes que darão sustentação ao Designer do site.


A Grid
Em geral sempre estabelecemos unidades em multiplos de 3 ou 4. Por exempo 6, 8, 12, 14, etc.


Veja um Grid com 3 colunas e cada coluna com 4 unidades.


Grid com 2 colunas com 6 unidades.


Grid com 4 colunas com 3 unidades.


Grid com 6 colunas com 2 unidades.



As variações e combinações são diversas, mas vendo estes exemplos, já se pode ter uma idéia de como podemos criar vários layouts em cima de um grid.

Não fique preocupado(a) se não entender, ainda, para que serve as Grids. Em posts futuro verá que são muito práticas.

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Widgets e Gagets sem mistérios Desvendado

Antes falarmos em Widgets/Gagets precisamos entender como funcionam as coisas dentro do Blogger.
Marcação XHTML sempre será igual em um documento PHP,ASP, ColdFusion, Ruby ou outro qualquer. Para qualquer um entender isso, lógico que irá precisar ter uma noção boa de XHTML.

A mesma regra serve para CSS (Folhas de Estilo). Se você tem noção sobre CSS, verá que qualquer código que a utilize será identificado pelo começo de código <div id="algumacoisa"> </div> ou <div class="algumacoisa"> </div>. Essas marcações indicam um bloco que pode ser um elemento com id único ou uma classe que pode se repetir pela página várias vezes.

Se for em seu código do Blogger em HTML/Expandir Modelos de Widgets, verá que todo código, principalmente da Sidebar- Wrapper, irão conter essas marcações.
Fora isso, também deverá atentar para marcações nativas do XHTML como: h2, p, a, ul, li entre outros.
Exemplo do Widgets Links Recomendados que está em uma Sidebar qualquer:



Observe que existe um id='LinkList1 que identifica este elemento como único. Ele não pode se repetir na página pois contém um id e não uma classe.
Logo em seguida entram código interno do Blogger, mas quero que atentem apenas nos elementos XHTML e CSS. Vamos aos elementos que ele contém para que possa ser estilizado:

Elementos CSS: id='LinkList1'(elemento pai), id='main' e class='widget-content'

Elementos XHTML: h2, ul e um li com elemento (a dos links) que está sendo carregado através de um loop em php.

Sendo assim eu poderia escrever apenas um código CSS para estilizar este Widgets apontado algo como:



E assim estilizaria também o li, a e outros elementos XHTML que ele contivesse. Sabendo os elementos distintos de um widgets você pode colocar imagens ao lado dos links usando códigos CSS que já foram explicados em vários tutorias espalhados pela Internet, como também, colocar cor de fundo entre outras coisas.

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Como estilizar um widget em particular

Vamos tratar aqui de Widgets a pedido de um leitor. Para começarmos temos que entender onde estão os widgets no código XHTML. Por regra do Blogger os widgets ficam principalmente no id SideBar-Wrapper, mas podem estar em qualquer lugar em um Blog dependendo de quem criou o template.
Todo Widget tem um padrão de ínicio de código:

<b:widget id='HTML5' locked='false' title='Visitas Recentes' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

Vendo o código vemos como podemos seta-los na folha de estilo. Temos um id que neste exemplo é HTML5, temos um elemento H2 que também é uma classe, logo em seguida temos uma condição if que determina dentro de um loop que se condição igual a data do título então deve mostrar a data e por fim temos uma classe widget-content.

Para formata-la do jeito que desejar terá apenas que estilizar estes elementos conforme seu gosto. Antes de qualquer formatação que você faça será interessante estudar cada widget e seu código em um blog teste até você se familiarizar com cada um para poder fazer alterações mais extravagante.

Em próximo artigo vamos estilizar o widgets Links recomendados para todos terem uma idéia exata de como fazer.

Bom estudo

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Elemento post o mais importante no Blogger

A parte que abriga os post de todo blog é com certeza a parte mais importante de todo projeto.
Através dela nossos leitores aprendem, se divertem, ficam sabendo do que está acontecendo. Sendo assim vamos dar uma atenção para ela.
Antes de começar a codificar as postagens, você tem que ter em mente que, está parte tem que ter todo cuidado.
Primeiro padronize como ela será, seja no papel ou em sua cabeça, mas ela terá que ser agradável e ter um equilibrio, principalmente se forem textos enormes ou tutoriais. Crie um padrão para tamanhos de imagens, espaços entre parágrafos, lista simples e outros elementos.

Vamos começar:

A classe .post abriga os elementos de uma postagem. Sendo uma classe ela se torna um elemento filho de da div main-wrapper que configuramos em tutoriais anteriores com uma largura de 417px.
Veja o código CSS do nosso exemplo:

.post {
width:377px;
margin: 0 0 0 20px;
background: url(http://i37.tinypic.com/1z3z59x.jpg) no-repeat center bottom;
padding-bottom: 20px;
text-indent : 25px;
text-align : justify;
font-size:12px;
}

A largura de 377px para o post nos da uma sobra de 40px em relação a div main-wrapper.
Sendo assim, colocamos uma margem a esquerda (left) de 20px, o que centralizará nossa classe.
Colocamos uma imagem abaixo em vez de uma borda, para ficar mais bonito.
Demos um espaçamento de 20px abaixo do post para separar os links de comentários nome do autor, etc.
Text-indent é um recuo do primeiro parágrafo, que também serve para estilo de beleza.
Justificamos o texto para dar equilibrio na classe e definimos o tamanho da fonte em 12 px.

Todo post tem um título com um elemento h3. Se h3 está dentro da classe .post, então ele é filho deste elemento.
Vamos referencia-lo

.post h3 {
margin : 18px 0 10px;
font-size : 18px;
font-weight : normal;
font-style : italic;
letter-spacing : -1px;
text-align : center;
}

Demos uma margem em cima para dar espaço entre a imagem de sombreamento e demos uma margem embaixo para separar do texto da postagem.
Definimos o tamanho da fonte em 18px;
Estilo da fonte foi declarada em normal e ítalica (deitada)
Os espaços entre as letras do título foi declarada em 1px para dar equilibrio para fonte Georgia.
Colocamos o título no centro da classe .post.

Como o título é um link, vamos estilizar seus estados quando o mouse está por cima, quando é visitado, etc.

.post h3 a, .post h3 a:visited, .post h3 strong {
text-decoration:none;
border:none;
color:#000;
font-weight:normal;
}

Sempre que puder generalizar vários elementos, faça. Isso economiza código e trabalho.
Este trecho não precisa de muita explicação pois utiliza uma css simples, mas veja que foram estilizados 3 elementos de uma vez. Sempre que puder faça isso.
Uma dica é que aqui você poderá colocar uma imagem de fundo nos títulos.

Como o elemento .post é vasto vamos ficar por aqui hoje e continuar no próximo artigo.

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Estilização, herança, especificidade são importantes

Praticamente já deixamos nosso blog com um visual mais apurado e profissional com os tutoriais anteriores. Agora vamos dar estilos específicos aos elementes internos.
Esses elementos XHTML são: Títulos de widgets, data, títulos de post, etc.

Vamos começar de onde paramos:

No código CSS vá até o item /* Headings. É daqui que vamos começar e estilizar os títulos dos widgets

h2 {
  margin:1.5em 0 .75em;
  line-height: 1.4em;
 font-family: Georgia;
  text-transform:uppercase;
  color:#000;
  text-align:center;
 font-weight : bold;
 font-size:12px;

 Este trecho defini praticamente todos os títulos widgets, onde definimos as margens de todos os lados, o tamanho da linha, a fonte a ser usada, transformamos os texto em maiúsculas, definimos a cor, alinhamento do texto, em negrito e tamanho da fonte.
Uma coisa que todos devem prestar atenção é sobre herança dos elementos, por exemplo:

Eu defini no body que a fonte é Georgia, então h2 já herdou esta fonte e não preciso declara-la neste elemento, certo? Errado, pois declarei na sidebar que queria uma fonte Tahoma, logo h2 da sidebar herdará está fonte, então por isso preciso declarar a fonte Georgia novamente, pois é a que quero nos títulos.

Acho que essa parte ficou claro. Você deve ajustar este código para seus propósitos, mas sempre lembrando do que já declarou anteriormente. As vezes quebramos a cabeça, pois uma estilização não ocorre como queremos e isso pode ser efeito da Herança ou da especificidade do código. Ainda criarei um tutorial sobre esses dois assuntos que são de grande importância na CSS.

A data nos Blogs são também elementos h2 e aqui podemos ver o efeito da herança. Como são h2 iram receber toda herança do código acima, mesmo sendo uma classe distinta, então por isso precisamos estiliza-la:

h2.date-header {
  margin : 0 0 10px;
font-size : 12px;
font-weight : normal;
text-align : center;
color : #999;
}

Definimos uma margem embaixo para dar um espaço, tamanho da fonte, fonte normal, texto alinhado no centro e cor. Note que não declarei a fonte aqui, pois está herdando de h2.

Bom, este tutorial abrange mais 2 elementos de nosso tutorial para criar templates para blog blogspot, que demos inicio como o:

• Pensando o Designer
• Fatiando Imagens
• Definindo Tipografia

Eles devem ser lidos novamente para que as Heranças sejam notadas e aprendidas. Nosso tutorial é longo e tem muito mais para ser mostrado, mas garanto que se prestarem atenção neles, logo não terão dificuldades de criar templates profissionais.

Por hoje fico por aqui!
Abraços!

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Estilizando o corpo do Blogger Profissionalmente

Bom, já trabalhamos no Body do Blogger, criamos 2 tipos de Header, agora vamos ao corpo do Blog (outer-wrapper). Neste trecho de código está o fluxo do blog literalmente. Aqui neste conteiner estão os Post, Data, Marcadores, Comentários, Sidebar, Widgets, etc. Vamos neste artigo definir o Layout deste trecho.
Para isso vamos reler os artigos: Designer do Blog e Fatiando imagens, para relembramos algumas medidas de largura do Blog.

Defini que o conteiner (pense em uma caixa que contëm outras caixas quando falar no outer-wrapper) terá 729px para caber a imagem fatiada que se localiza no topo do meu Blog:

 

A imagem acima tem 727px. Peraí? Se o outer-wrapper tem 729px como pode?

Se você olhar no meu Blog o body tem uma imagem que se repete na vertical que contém o fundo do blog e um sombreamento nas laterais, está imagem tem dimensões maiores e exatamente no meio o espaço é de 729px. Sendo assim sobram 1px de cada lado para a imagem do outer-wrapper, dando um efeito interessante.

Imagem do body:

 

 Vamos ao que interessa, o código em si.

Aqui iremos só mexer na CSS (Folha de estilos) do outer-wrapper:

#outer-wrapper {
  width: 729px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  background: url(http://imagemdotopodoblog.jpg) no-repeat center top;
   }

Aqui neste trecho de código não se precisa explicar muita coisa, mas veja que a largura foi de 729px, a margens são automaticas na vertical para centralizar, dei um espaçamento em todos os lados do conteiner de 10px, o texto mandei alinhar a esquerda porque no body havia definido como center para corrigir o navegador IE6 que não entende margens automáticas e finalmente a imagem coloquei no centro e acima. Isso termina a configuração deste elemento.

Agora vamos aos elementos dentro de outer-wrapper, no caso são: content-wrapper, main-wrapper e sidebar-wrapper.

Content-wrapper também é um conteiner que contém: main-wrapper e sidebar-wrapper.

#content-wrapper {
  width:650px;
  padding:0;
  margin:0 auto;
  background: url(http://imagemdocontent-wrapper.jpg) repeat-y;
}

Largura definida em 650px, limpei todo espaçamento, mandei centralizar com margens automáticas e coloquei uma imagem de fundo se repetindo na vertical. Veja a imagem:

 

Está imagem cria uma coluna falsa. Coluna falsa é a melhor técnica para ser usar na sidebar. Se a sidebar for menor em altura que a área dos post, ela continuará fluindo normalmente, graças as colunas falsas. 

Main-wrapper é a área dos Post vamos defini-la:

#main-wrapper {
  width: 417px;
  padding : 20px 0 0 0px;
  float: left;
  background: url(imagemdomainwrapper.jpg) no-repeat top center;
  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 */
  }

Largura de 417px, espaçamento de 20px na parte de cima para o título dos post não ficar muito expremido, mandei flutuar a esquerda, coloquei uma imagem no topo para dar um sombreado:

 

O restante do código são correções para IE, então deixe como está.

E finalmente a Sidebar:

#sidebar-wrapper {

  width: 233px;
  float: right;
  font : 11px Tahoma, Arial, sans-serif;
  padding: 20px 0 0 0;
  color : #999;
  background: url(imagemsombreamento.jpg) no-repeat top center;
  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 */
}

Largura 233px, flutuação a direita, a fonte eu mudei para Tahoma na sidebar, o mesmo espaçamento top que dei em main-wrapper, a cor do texto também mudei na sidebar e coloquei uma imagem de sombreamento:

 

Bom, feito tudo isso seu template já deve estár bem vestido. No próximo artigo vamos tratar da estilização mais apuradas destes elementos. Até lá!

Subscreva o CSS-Desvendado completo!

Subscreva CSS - Desvendado por Email

Header no blogger personalizado com flutuação e posição relativa e absoluta

Existem várias maneiras de se fazer a mesma coisa. Criamos um Header simples no Blogger no Artigo anterior e agora veremos mais uma opção, mas que pode ser totalmente personalizável.
Você pode faze-lo com 1, 2 ou três colunas. Para este tutorial criei com duas colunas.
Iremos usar algumas dicas que já foram dadas aqui no blog como Substituição de imagens, Propriedade Clear e Posição Absoluta e Relativa.

Como já disse também, faça este tutorial off-line no seu bloco de notas, depois quando estiver tudo certo e funcionando corretamente, copie o código para dentro do seu Blog.

Precisaremos de 2 imagens distintas:

• Fundo para o Header
• Imagem do LogoTipo

Imagem fundo do Header: Imagem Logotipo: O resultado final ficará assim:

O LogoTipo do lado esquerdo e um menu do lado Direito.
Vamos começar então:

A primeira coisa que vamos fazer é escrever nosso código XHTML:

<div id="header">
<h1 id="logo">
<span></span>CSS Padrões - CSS Desvendado
</h1>

<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Quem Sou</a></li>
<li><a href="#">Contato</a></li>
</ul>

<div class="clear"></div>

Explicando o código:
A div header é nosso container que abrigará o Logotipo e o Menu.
H1 id logo conterá os código de substituição de imagem.
Span server para fazermos a imagem ficar por cima do texto CSS Padrões - CSS Desvendado.

Div id NavMenu dispensa explicações.

A div class clear serve para limparmos as flutuações, caso haja dúvida de suas funções leia o artigo referenciado logo acima no artigo.

Tendo seu código XHTML bem estruturado semanticamente seu Header está pronto. Veja que no lugar do Menu poderiamos colocar um formulário, um Adsense ou outro elemento qualquer.

Feito isso vamos para o código CSS (Folha de Estilos):

#header {
width: 650px;
height: 100px;
margin:0;
padding:0;
background: url(fundo_h.gif) repeat-x left bottom;
}

Definimos o altura e largura do Header, limpamos margens e espaçamentos e no final colocamos a imagem de fundo se repetindo na vertical para preencher todo o Header.

#logo {
 float: left;
 margin: 0 auto;
}

#navmenu {
width: 100px;
float: right;
}

#navmenu a {
color: #fff;
}

.clear {
clear: both;
}

Aqui fizemos o Logo flutuar a esquerda, o Menu flutuar a direita e demos um tamanho de largura para ele, demos uma cor branca para os links e finalmente limpamos as flutuações com a classe clear. Mais uma vez insisto, caso não saiba para que serve a propriedade clear, que leia o artigo.

#logo {
width: 345px;
height: 100px;
position: relative;
}

#logo span {
background: url(logo.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%
}

Finalmente fazemos aqui a substituição do texto do Logo pela imagem.
Definimos a largura e altura do Logo e definimos sua posição relativa para podermos usar a posição Absoluta.
No span colocamos a imagem do Logo, definimos que sua posição de ser Absoluta e definimos que ocupará 100% da largura e altura do logo, ou seja 345px por 100px.

Teste e reteste off-line o seu código. Se estiver tudo do seu agrado vá em Blog apague os código CSS e XHTML referente ao Header e substitua pelo seu.

Até a próxima

Subscreva o CSS-Desvendado completo! Subscreva CSS - Desvendado por Email

Criando um cabeçalho de várias formas para seu Blogger

Existem várias maneiras de se criar o cabeçalho de seu Blog ( Header). Você pode usar o próprio sistema do Blogger, que é o mais fácil, e colocar uma imagem no Header, pode fazer um totalmente com flutuações e pode fazer um com posicionamento Relativo e Absoluto.
Qual o melhor? Depende do que você quer ter no seu cabeçalho. No meu caso eu quiz apenas o meu logo, então usei a funcionalidade nativo do Blogger. Simplesmente criei uma imagem de 650px por 100px e coloquei, dei uma mexida no CSS para estilização e pronto.

Onde você vê escrito na imagem, CSS Padrões - CSS Desvendado, está a imagem do meu logo. Caso eu queira muda-la clico em Editar e simplesmente acho a nova imagem no meu micro e está resolvido. Simples assim. A imagem do logotipo é está:

Veja que existe um menu com imagens em cima do meu logotipo, então se quiser um menu com imagens as crie agora, caso queira somente texto também o faça agora e defina que itens irão compor o menu.

Uma coisa que deve ser estudada em menus é se realmente você precisa utilizar uma lista simples para este fim. Você tem que entender o que são elementos de blocos e elementos inline.
Uma breve explicação sobre isso é:

Elementos de blocos são como uma caixa que se expandem tanto na vertical como na horizontal e seu fluxo no documento sempre será na vertical. Exemplo: uma div é criada na página e logo em seguida outra div. No documento uma vai estar em cima e outra abaixo dela. Caso queira que fiquem uma ao lado da outra, terá que flutua-la com o comando float da CSS.

Elementos inline são como linhas que se expandem somente na horizontal e seu fluxo no documento sempre será na horizontal. Exemplo: links criados na página. Se criar vários links, sem estar dentro de uma lista, eles vão aparecer um ao lado do outro porque sua expansão é horizontal. Caso queira que os links fiquem um embaixo do outro, terá que usar uma lista simples ou incluir o comando XHTML de quebra de linha na frente de cada link.

É uma explicação bem simplória, mas de fácil entendimento para continuação do tema.

Então vamos ao que interessa. Se escolheu a minha opção de cabeçalho faça o procedimento inicial citado. Vá no seu editor do blogger em Layout/Elementos de Página na guia Cabeçalho clique em Editar, procure sua imagem de logo no seu micro e Salve.

Agora vá em Layout/Editar HTML e procure o trecho:

#header-wrapper (iremos mexer no CSS do cabeçalho)

Defina o tamanho que foi estipulado do seu cabeçalho exemplo:

#header-wrapper {
width:650px;
margin:0 auto 1px; }

Em margin eu defini que na parte de cima a margem será 0 do lado esquerdo e direito ele deve centralizar automaticamente e embaixo quero uma distância de 1 px.
Os seguintes códigos definem todo o Cabeçalho para meu exemplo caso o usuário desative os estilos via navegador:

#header-inner {
background-position: center; (centraliza a imagem do logo)
margin-left: auto; (margens automaticas)
margin-right: auto;
}

#header {
margin:0; (Zera as margem do elemento pai)
text-align: center; (alinha tudo no centro, usado para corrigir o IE6)
}

#header h1 {
margin:5px 5px 0; (pegua o texto e posiciona no header)
padding:15px 20px .25em; (mesma função de margin)
line-height:1.2em; (Estipula tamanho da linha)
text-transform:uppercase; (Deixa o texto todo em maiúscula)
letter-spacing:.2em; (Cria espaço em cada letra do texto)
}

#header a {
text-decoration:none; (tira o sublinhado do link)
}

#header a:hover {
color:blue; (quando o mouse está sobre o link, muda cor)
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:660px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
}

Ufa! Está seria a configuração para meu exemplo, cabe a você agora ir testando qual será a melhor para seu caso.

Bom este cabeçalho está pronto agora só falta colocar o menu acima dele como no meu caso. Para isso teremos que criar uma marcação XHTML no documento e acrescentar uma CSS para estilização deste novo elemento. Isto é simples e fácil. Localize em seu código o trecho:


<div id="header-wrapper">

e crie logo acima dele este código:

<div id='navmenu'>
<a href='http://csspadroes.blogspot.com' rel='nofollow'><img alt='Home' src='http://seubotão.jpg'/></a>
<a href='#'><img alt='Sobre o Autor' src='http://seubotão'/></a>
<a href='#'><img alt='Perguntas e respostas' src='http://seubotão.jpg'/></a>
<a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2216647&amp;loc=en_US' rel='nofollow'><img alt='Feed/RSS' src='http://seubotão.jpg'/></a>
<a href='http://csspadroes.blogspot.com/2008/07/contato.html' rel='nofollow'><img alt='Contato' src='http://seubotão.jpg'/></a>
</div>

Veja que nao criei nenhuma lista simples, apenas criei os links e referenciei as imagens a cada item do menu. Agora preciso apenas dar um estilo ao menu para isso vou no CSS e escrevo este código:

#navmenu {

width:650px;
height:34px;
margin:48px auto 1px auto;
background: url(http://i37.tinypic.com/e654oz.jpg) repeat-x;
}

Defini o tamanho total do menu em 650px por 34px, ajustei as margens e coloquei uma imagem de fundo para dar constraste.
#navmenu img {
margin:3px 1px 0 2px;
}

Aqui neste trecho do código ajustei as margens de cada botão.

Bom para este artigo, acho que temos já bastante coisa para estudar, no próximo faremos uma Header com flutuação.

Até a próxima!
Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Definindo a tipografia, cores e estilo do Blog

Agora vamos tratar de tipografia do Blog. Tipo de fontes, tamanho, cores, estilos, etc.
Veja bem, tudo que está sendo feito aqui, pode ser feito off-line.
Sempre que crio um código CSS, primeiro crio off-line. Testo várias vezes, depois copio o código pronto para dentro do Blog.
Espero que tenham escolhido o tipo de fonte que queiram usar em seu Blog. Caso não, na Internet existem vários sites que oferecem fontes gratuitas para todos os gostos.
Eu escolhi a fonte Georgia (Adoro). Além de estar instalada em todos computadores, ela é elegante, remete a um texto sério, tem seu charme de vanguarda.

Iremos mexer no código CSS, para isso abra seu Bloco de Notas (Só trabalho com códigos com ele), e digite o seguinte:

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

Salve este arquivo clicando em arquivo/salvar como salve como: testetemplate.html
Você acaba de criar uma página de teste para seus códigos off-line.

Para trabalharmos as fontes iremos escrever algo entre as tags body para fazermos testes de fontes. Escreva qualquer coisa que tenha acentos, maiúsculas, caracteres especiais entre outras coisas, para você ver como fica todos estes itens com o tipo de fonte que você escolheu. Eu escrevi:

Tipografia de Blog. Escolha de fontes com acentos. Fonte para cabeçalho e vários itens de página do blog.

Feito isso vamos colocar o CSS em ação. Entre as tags <head></head> escreva o seguinte código:
<style>
body {
   font-family: Georgia, Palatino, Palatino Linotype, serif; (definimos a fonte a ser usada)
   color : #000; (definimos a cor padrão do texto do blog inteiro)
}
</style>

Agora que definimos a fonte padrão existem mais algumas coisas que precisam ser codificadas no body como: margens, paddings e outros. O código completo ficaria assim:

body {
    background :  url(http://endereçodoservidor/imagem do body.jpg) repeat-y 50% 0; (em azul substitua pela imagem fatiada para o Body do Blog)
    margin:0;
    font-family : Georgia, Palatino, Palatino Linotype, serif;
    color : #000;
    text-align: center;
 }

A imagem que estipulei para o Body é está:

O body está configurado, agora outro elemento constante no blog são os links. Nesta etapa você já deve ter decidido que cor será os estados, link, visited e hover, então colocaria este código logo a seguir:

a:link {
  color:#b30000;
  text-decoration:none;
  }
a:visited {
  color:#999;
  text-decoration:none;
  }
a:hover {
  color:#123974;
  text-decoration:underline;
}

O arquivo testetemplates.html completo ficaria assim então:

          <html>

<head>
<title></title>
<style>
body {
    background :  url(http://endereçodoservidor/imagem do body.jpg) repeat-y 50% 0; (em azul substitua pela imagem fatiada para o Body do Blog)
    margin:0;
    font-family : Georgia, Palatino, Palatino Linotype, serif;
    color : #000;
    text-align: center;
 }

          a:link {
             color:#b30000;
             text-decoration:none;
           }
          a:visited {
             color:#999;
             text-decoration:none;
           }
          a:hover {
             color:#123974;
             text-decoration:underline;
           }
           </style>
          </head>

<body>
Tipografia de Blog. Escolha de fontes com acentos. Fonte para cabeçalho e vários itens de página do blog. <a href="link.html">Teste de estado de links</a>.
</body>
</html>

Veja que em verde criei um link para podermos ver eles em ação.
Agora salve o arquivo e abra em seu navegador. Confira se está tudo do seu agrado. Se estiver entre no seu blog na guia Editar HTML e cole no trecho que está a tag Body da CSS.

Como já havia dito este tutorial abrangerá todas partes do blog por isso será dividos em partes para que o leitor entenda cada uma. Caso haja dúvidas, não deixe de fazer suas perguntas nos comentários.

Até a próxima
Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Fatiando sua imagem para construir o Layout

Você desenhou ou scaneou sua imagem com os itens que quer no seu Blog, agora chegou a hora de fazer ele ganhar vida, mas ainda falta algumas coisas. Você precisa criar um menu (caso queira um) e definir o tamanho do seu header. No meu caso eu optei por um menu com imagens e um Header abaixo deste menu. Você pode construir um Header que tenha um menu abaixo ou do lado. Neste estudo usaremos ainda as funcionalidades nativa do Blogger, mas em artigo futuro ensinarei a criar um Header totalmente personalizável.

 

Então, agora iremos fatiar esta imagem para podermos colocar cada parte no seu lugar.

Como disse antes, eu uso o Firework para edição de imagens e em questão de fatiar imagens pra mim tem dado conta do recado, veja figura abaixo:

 

Os campos em verdes são as fatias que irá compor o Layout. Vamos nomea-las de cima para baixo para todos entenderem.

• outer-wrapper - imagem com as bordas da parte principal do template. Esta imagem tem 727px por 60px.
  
  
• Body - Imagem que vai preencher todo o Layout. Tamanho 1590px por 26px.
  
  
• Postagem topo - Aqui fatiei uma imagem para colocar no topo dos post ( 417px por 30px - main-wrapper )para dar um sombreamento e fatiei também uma para a Sidebar (233px por 30px - SideBar )
  
  
• content-wrapper - Uma fatia que fará a divisão entre os post e a SideBar graficamente de 650px por 30px. Chamamos isto de coluna falsa. Mais para frente você saberá porque de se usar está técnica.
  
  

Bom, nossa imagem está fatiada corretamente. Como já tinha dito, veja que a imagem total se dividiu em 5 partes distintas: TopodaPagina, Body, TopodasPostagem, TopodaSidebar, CorpoPostagemSidebar.

No próximo artigo iremos mexer na CSS para darmos vida ao Template, até lá.

 Subscreva o CSS-Desvendado completo! Subscreva CSS - Desvendado por Email

Pensar o Designer do Blog o primeiro passo

Vamos começar nosso tutorial para criar um template para Blogspot. Espero que tenham lido os artigos sugeridos no post anterior.
A primeira etapa será o Designer do template, então peguem lápis e papel e vamos começar. Lápis e papel? Sim, um template começa fora do ambiente digital.
Iremos elaborar a roupa do blog.
No papel você irá desenhar como será seu blog. Caso tenha uma imagem já pronta melhor, só scaneie e coloque no tamanho desejado, caso não tenha crie usando os conselho do artigo Qual template serve para meu Blog ou Site. Também iremos definir os atributos constantes do Blog como: cor de links, tipografia, etc.

Para estudo usarei meu próprio blog:

• Largura total do template é de 729px.(outer-wrapper)
• Largura do conteiner que vão: Header, Posts, Sidebar e Footer, 650px (content-wrapper)
  
• Largura do Cabeçalho de 650px; (Header)
• Largura dos Posts de 417px (main-wrapper)
  
• Largura da Sidebar: 233px 
• Rodapé do Blog de 650px (Footer)
  

Agora iremos a matemática do Designer. Sabendo as larguras dos itens principais vamos as contas:

417px (main-wrapper) + 233px (Sidebar) = 650px (Soma dos dois itens).

Veja bem, que a largura total do Blog é de 729px que foi calculada sobre a imagem que quero usar, veja mais abaixo a figura.

Então o restante que sobra que é :

729px (outer-wrapper) - 650px (content-wrapper) = 79px.

Este valor será usado para dar espaçamento no Post e na Sidebar.

Para se fazer um estudo correto de largura do blog você precisa ter a imagens completa e final do blog pronta para examinar onde vai ter que colocar: margens e paddings, para que o layout fique com aspecto limpo. Usarei imagens do Css Padrões como exemplo, veja figura do template abaixo:

A partir desta imagem pronta que se chegou as medidas acima.

Depois que se tem todas as medidas anotadas em papel e a imagem inteira pronta faremos a fatiação da imagem para aplicarmos no Layout.
No próximo artigo veremos cada fatia pronta e veram que está imagem se tornará em no máximo 5 ou 6 para aplicamos no Blog inteiro.
Até o próximo artigo.

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Daqui 5 dias começa o Tutorial para cria Templates para Blogger

Daqui 5 dias começarei um Tutorial de como criar templates para blogger blogspot profissionais. Antes de qualquer coisa, para os interessados, peço que leiam os artigos sobre: Estruturando seu código (Aqui você aprenderá a deixar seu código semânticamente correto), Divs e Spans e suas funções (Entenderá o que são div e span), Propriedade Clear (Veja como clear corrige flutuações) e Flutuações (Aprenda a usar float em seu código).

Este Tutorial não será somente um arquivo, ele será dividos em vários sendo eles:

• Designer: Primeiro falaremos sobre o desenho do template. Isso inclui vários fatores como: Imagens, fundos, botões, largura de colunas, largura dos posts, margens, paddings, entre outro itens.


• Header: Iremos começar de cima para baixo. Ao contrário de uma construção de uma casa, que começa de baixo para cima, os templates são construídos de cima para baixo. Aqui decidiremos o que vai no Header: Adsense, banner 468x60, ou dois banner de 125x125 em cada canto e no meio o Logo? Veremos.


• Corpo: Onde vai os post. Aqui estudaremos tipos de tipografia, conforme o Designer proposto, se o texto é justificado ou alinhamento a esquerda ou a direita, formatação do rodapé do post, etc.


• Sidebar: Estudaremos, Largura, se uma apenas ou duas e estilização.


• Rodapé: Aqui chegamos ao último item de um Template que é o rodapé. Terá 1, 2 ou 3 colunas? Cada um irá decidir em cima do Designer que estiver criando.

Espero que estejam ansiosos como eu estou. Lembrando que este tutorial é sobre Designer de Template e não inclusão de funcionalidades como: Leia mais, Artigos relacionados entre outros. Estas funcionalidades podem ser incluídas depois do template pronto.
Aguardo todos vocês para começarmos e divulguem este artigos para os interessados.

Obrigado!

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email