Como fazer um template para o Blogger

Como fazer um template para o Blogger Listas e Links

Escrito por:Ariane

Continuando a série sobre como fazer um template, hoje vou tratar dos links e listas no Blogger.

No começo do código do seu template (o Mínima, de testes) você encontra este trecho:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

Toda a parte em vermelho refere-se aos links da página: suas cores e se serão sublinhados ou não; mas é claro que nem todos os links precisam se comportar da mesma maneira. Você pode determinar, por exemplo, que os links de sua postagem se apresentem de maneira diferente dos links da sidebar.

Basicamente os estilos dos links são representados desta maneira:



a:link estilo do link no estado inicial
a:visited estilo do link visitado
a:hover estilo do link quando se passa o mouse sobre ele
a:active estilo do link ativo, quando clicado.

As determinações para os links devem respeitar a hierarquia apresentada acima.



Para adicionar um sublinhado no link:
text-decoration: underline;

Sem subinhado:
Text-decoration: none;

Adicionando Sobrelinhado:
text-decoration: overline;

Você pode também acrescentar um fundo colorido para os links, utilizando a propriedade background como para os outros elementos da página.

Para estabelecer o comportamento dos links de sua postagem, é preciso determiná-los dentro da classe .post

.post-body a:link{
color: #993366;
text-decoration: underline;}

.post-body a:hover{
color: #EBC2D7;
text-decoration: underline overline;}

O resultado pode ser visto aqui: Aula Template . Passe o mouse onde está Link Primeiro e veja o efeito de underline e overline juntos.

Você pode detreminar comportamentos e cores diferentes para todos os elementos e classes do template: header, post, sidebar, etc.

Para a sidebar:

.sidebar a:link{
color: #000;
text-decoration: none;}

.sidebar a:hover{
color: #FF6600;
text-decoration: underline;}

Basta respeitar a sintaxe apresentada.

Listas e Menus

Procure no código do seu template este trecho:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Esta é uma lista simples e os valores contidos determinam a aparência das listas na sidebar (lista de marcadores, arquivos, blogroll, etc).

As tags <ul> e </ul> contém cada elemento da lista (ou menu), que são <li> &lt/li>.

Em .sidebar ul se determinará a aparência de toda a lista e em .sidebar li a aparência de cada item desta lista.

list-style é o seletor de marcadores da lista e aqui você determinará se cada item da lista exibirá um marcador ou não :

list-style-image imagem como marcador da lista;
list-style-position onde o marcador da lista é posicionado;
list-style-type tipo do marcador da lista;
list-style maneira abreviada para todas as propriedades;

list-style-type:
none: sem marcador
disc: círculo (bolinha cheia)
circle: circunferência (bolinha vazia)
square: quadrado cheio
decimal: números 1, 2, 3, 4, ...

list-style-image:
none (nenhuma imagem)
URL: url(endereço da imagem)

list-style-position:
outside: marcador fora do alinhamento do texto
inside: marcador alinhado com texto

Ex. 01 - Vou determinar que a minha lista contenha marcadores quadrados:

.sidebar ul{
list-style: square inside; } (quadrado e alinhado aos itens da lista)



Neste exemplo eu determino uma cor para o fundo da lista e outra para cada item :


Óbviamente você está aí pensando: não deu certo, só aparece uma cor e não duas. Sim, a cor que predomina é a cor dos itens da lista, isto por que não existe diferenças entre os limites de .sidebar ul e .sidebar li no template original. É preciso fazer as seguintes mudanças:

.sidebar ul {
width: 220px;
list-style:square inside;
margin:0 0 0;
padding:0 0 0;
background: #B89F67;
}
.sidebar li {
margin:2px auto 2px;
padding-top:0;
width: 200px;
padding: 3px 0 3px 10px;
text-indent:0px;
line-height:1.5em;
background: #E7DECB;
}

Determinei uma largura para ul e outra menor para li, além disso, estipulei uma margem de 2px entre um item da lista e outro, para que a cor de fundo (de .sidebar ul) possa ser notada:


As variações podem ser muitas: você pode acrescentar imagen de fundo e combinações de cor com o fundo da sidebar.

Note que aqui no meu blog, nas listas da sidebar, não só o link se comporta diferente, quando passa-se o mouse por cima, como o background de cada item também se altera (o fundo torna-se transprente e surge uma borda azul). Vejamos como isto é possivel:

Primeiro determine as cores, largura, etc, de sidebar ul:

.sidebar ul {
width: 200px;
list-style:square inside;
margin:10px auto 10px;
padding:5px;
background: #030303;
}

Depois determine a aparência de cada item da lista:

.sidebar li {
margin:2px auto 2px;
width: 190px;
padding: 3px 0 3px 10px;
text-indent:0px;
line-height:1.5em;
background: #F4F4F4;
border-bottom: 1px solid transparent;
}

Veja que aqui acrescentei uma borda de 1px abaixo de cada link da lista, transparente. É necessário que isso seja feito para que o elemento da lista não dance quando se passe o mouse por ele, já que vou acrescentar um border-bottom no estado hover.

Primeiro determino o comportamento dos links no estado natural e hover:

.sidebar a:link{color: #FF6600;text-decoration: none;}

.sidebar a:hover{color: #C6E6FD; text-decoration: none;}

E aqui determino o comportamento do background de cada espaço ocupado por cada um dos itens da lista, quando passa o mouse sobre eles:

.sidebar li:hover{background: transparent; border-bottom: 1px solid #00FFFF}

A diferença aqui é que determinei um comportamento para a linha onde se encontra o item, seja ele um link ou não. O resultado pode ser visto aqui, na lista da sidebar.

Fonte: http://templatesparanovoblogger.blogspot.com

Como fazer um template para o Blogger IV

Escrito por: Ariane

Quando eu comecei a utilizar o Blogger, imediatamente desejei alterar o template padrão e fui logo xeretando os códigos e tentando modificar alguma coisa. De imediato não percebí muita coisa mas, ao invés de sair perguntando por aí, à torto e à direito 'comofas', descobrí o que era CSS na marra. Uma maneira que encontrei para estabelecer uma ligação com os nomes dos seletores e suas divs ou classes foi colocar cor em tudo. Colorindo minha página,eu tive uma noção clara da localização e dimensão de cada elemento e sugiro que você faça o mesmo.


Aula Template_1220747783735

Mesmo que você tenha entrado aqui só com o intuito de aprender como colocar mais uma coluna no seu template, é importante conhecer todos os elementos que compõem a sua página para diminuir consideravelmente os erros na hora de mudar alguns detalhes.

Coloque em todos os seletores que encontrar a propriedade Background e estabeleça cores diferentes para cada um. Faça isso para #body, #header-wrapper, #header-inner, #header, #header h1, #header .description, #main-wrapper, #sidebar-wrapper, h2.date-header,.post, .post h3,.post-body , .post-footer, #footer e acrescente além disso os seletores .sidebar h2 (que já ensinei como criar no post anterior), #wrap2, #content-wrapper, #crosscol-wrapper, #Blog1 e .hfeed.

Conforme for adicionando cores para os fundos destes elementos, visualize, para perceber a localização e dimensão de cada um.

Para content-wrapper, acrescente, além do background:

word-wrap: break-word; overflow: hidden;

ou a cor (ou imagem) não tomará todo o espaço da div. O código deve ficar assim:

#content-wrapper{
background:#BBCCFF;
word-wrap: break-word; overflow: hidden;}

com croscoll-wrapper é preciso primeiro encontrar este trecho(use Ctrl+F):
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
</b:section>
</div>


onde está no coloque yes, depois vá para o painel Layout e insira no novo elemento que aparecrá sob o cabeçalho um gadget qualquer. Eu coloquei uma linha de links do adsense.

Com este método, além de perceber a localização e dimensão dos elementos, ficará claro que algumas divs contém outras divs e por isso as dimensões devem ser respeitadas. Por exemplo, na imagem do meu blog de testes, o que está em cinza é Body, que contém tudo. O que está em preto é Outer-wrapper, que contém todos os outros elementos. Assim, se outer-wrapper tem uma largura de 700px, por exemplo, a soma dos outros elementos não pode exceder esta largura, ou o template ficará desfigurado. Este é o erro mais comum ao tentar colocar uma nova coluna no blog: não respeitar as dimensões. A soma para o acréscimo de qualquer elemento tem que conter os espaços de margin e padding, que já foram explicados aqui além da largura das colunas. Então, a primeira coisa mais importante quando for alterar o seu template é Outer-Wrapper, a div que contém todas as outras.

Como lição de casa :-) faça este colorido no seu blog de testes e vá visualizando, para compreender (e decorar!) a posição dos elementos do template. Você pode ir além e alterar a largura deles também, onde está width. Se no seu blog de testes outer-wrapper tem uma largura width: 660px, aumente para 900px e vá aumentando também a largura ds colunas, para ir se familiarizando.

Fonte:http://templatesparanovoblogger.blogspot.com

Como fazer um template para o Blogger III Background

Criado por: Ariane

Bom, agora que já entendemos o que são as variáveis e aprendemos a criar algumas novas, vamos aprender a dar estilo a Body, que é o corpo do nosso documento, da nossa página, e que contém todos os outros elementos.


Procure no código do seu blog de testes este trecho:

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

A primeira propriedade que aparece para body é background, que é o fundo de um elemento html. Originalmente no template Mínima o valor é a variável $bgcolor. As propriedades background e seus valores possíveis são:

background-color: (cor do fundo)

Valores:

* código hexadecimal: #FFFFFF
* código rgb: rgb(255,235,0)
* nome da cor: red, green, white, etc
* transparente: transparent

background-image

* url(link da imagem)

background-repeat

* no-repeat
* repeat (repete por toda a página na horizontal e vertical)
* repeat-x (repete a imagem na horizontal)
* repeat-y (repete a imagem na vertical)

background-attachment (se a imagem rola ou não com a tela)

* fixed (imagem fixa na tela)
* scroll (imagem rola com a tela)

background-position: (posição da imagem na tela)

* x-% y-% (distância em porcentagem das margens do documento, horizontal e vertical)
* top left
* top center
* top right
* center left
* center center
* center right
* bottom left
* bottom center
* bottom right

A propriedade background pode ser aplicada a qualquer outro elemento html, além de body. Você pode determinar backgrounds diferentes para cada coluna, menu, títulos (sidebar, post) e footer.

Em nosso blog de testes vamos aplicar uma imagem de fundo em degradê, para testar.

Em seu editor de imagens (vou exemplificar no Photofiltre, aquele programa free que citei na primeira parte deste tutorial) crie uma imagem em branco de 50 de largura por 550 de altura e determine uma cor qualquer de fundo:

aula9

Clique na ferramenta gradiente: a primeira cor que escolhí foi a mesma que utilizei no fundo da imagem (#a3a3a3) e a segunda o branco:

aula10

Com a ferramenta conta-gotas, anote o valor da cor do final da imagem (bem do finalzinho mesmo, pois é esta cor que se repetira no background do seu template para além da imagem) A cor que eu anotei aqui foi #FEFEFE. Salve a imagem.

Agora vamos colocar esta imagem no background da nossa página.

1- Hospede a imagem no site TinyPic (ou qualquer outro de sua preferência). Tendo feito isso, copie o link fornecido (o último):

aula11

2- No código do template, você pode retirar a variável que está em background e colocar no lugar:

body {
background:#FEFEFE url(https://2img.net/h/oi33.tinypic.com/2ypd69z.jpg) repeat-x;

ou seja, a cor que eu obtí do final da imagem mais o link da imagem fornecido pelo TinyPic mais o valor repeat-x, pois desejo que a imagem que criei se repita horizontalmente. O resultado é este:

aula12

Note que rolando a página, a cor que continuará pelo background é a cor que colocamos antes do link da imagem e que continua o gradiente perfeitamente.

Posicionando uma imagem.

Vamos posicionar uma imagem no fundo. Vou usar esta imagem, tamanho 335x403:

marilyn

Hospede a imagem, copie o link fornecido e volte ao código do template:

body {
background:#FEFEFE url(https://2img.net/h/oi34.tinypic.com/behova.jpg) no-repeat top left;

resultado:

aula13

body {
background:#FEFEFE url(https://2img.net/h/oi34.tinypic.com/behova.jpg) no-repeat top center;

resultado:

aula14

background:#FEFEFE url(https://2img.net/h/oi34.tinypic.com/behova.jpg) no-repeat bottom left;

resultado:

aula15

ou ainda é possível um posicionamento mais preciso:

body {
background:#FEFEFE url(https://2img.net/h/oi34.tinypic.com/behova.jpg) no-repeat 80% 60%;

resultado:

aula16

o que eu fiz foi posicionar a imagem à uma distância de 80% da margem esquerda e 60% do topo.

Como lição de casa :-) teste diversas maneiras de posicionar imagens para o background da sua página, utilizando todos os valores possíveis.

Fonte: http://templatesparanovoblogger.blogspot.com

Como fazer um template para o Blogger Parte I

Criado por: Ariane

Preâmbulo

Muita, muita gente mesmo me pergunta como fazer um template para o Blogger e decidi então explicar, passo a passo, o meu método. Que isto fique claro já agora: vou ensinar aqui como eu faço, pois não tenho à menor idéia do método de outros blogueiros que também criam templates. Este tutorial vai ser longo, por isso se dividirá em várias partes. Posteriormente publicarei como faço para converter temas do Wordpress para o Blogger.

Antes de tudo é necessário algum conhecimento em HTML e CSS. Existem diversos tutoriais sobre o assunto; uma rápida pesquisa no Google trará excelentes resultados logo na primeira página. Recomendo o site do Maujor e o Apostilando, onde é possível baixar diversas apostilas sobre os dois temas.

Também que fique claro que não pretendo aqui dar aulas sobre HTML e CSS e as explicações serão dadas da maneira mais simples e acessível possível. Para quem pretende se aprofundar no assunto, procure os mestres nos sites que já indiquei e em outros tantos.

Que programa usar para criar o template?


Na verdade eu não uso programa nenhum. Faço modificações diretamente em um blog de testes e vou visualizando, até que fique ao meu gosto. Para criar ou editar as imagens que utilizo, uso tanto o Photofiltre Studio 09 quanto o Photoshop. Uma opção de programa gratuito é a versão free do Photofiltre, um programa francês que pode ser traduzido para o Português. Após instalar o programa, faça o download deste documento e descompacte-o dentro da pasta do Photofiltre, em Arquivos de Programas. Feito isso, vá até a pasta do Photofiltre e apague o arquivo EN, como mostra a imagem:

photofiltre

Abra o programa e ele estará traduzido para o Português.

Introdução

Tendo escolhido um programa de edição de imagens, crie um blog de testes, onde você fará o seu primeiro template. Eu criei um que vou chamar Aula Template e escolhí para ele o modelo Mínima que é o mais fácil de modificar. Agora vamos conhecer a estrutura da página onde se encontra o meu blog. Clique em Editar HTML. O que você verá é isso:

aula2

O trecho destacado diz ao navegador qual a linguagem de marcação que está sendo utilizada na página (XHTML) e você não deve modificar nada que está contido ali. É o início do nosso documento HTML e a respectiva tag de fechamento no final (role toda a página) é </html>.

Um documento HTML se compõe da seguinte estrutura básica:

<html>

<head>

cabeçalho: aqui está contido o estilo da página - CSS

<head/>

<body>

corpo - aqui está contida a estrutura da página, seus elementos.

</body>

</html>

Note que todas as tags devem ser fechadas respeitando uma hierarquia. O não fechamento de qualquer tag resultará em erro e rejeição da estrutura.

Início do código CSS

O código CSS, que dá estilo à página, começa com : <b:skin><![CDATA[/* e sua tag de fechamento é ]]></b:skin>. Tudo o que estiver contido entre estas duas tags refere-se ao estilo da página (aparência) e não à sua estrutura. Não é possível criar um novo elemento (uma coluna, por exemplo) com CSS. O CSS irá apenas determinar a aparência deste bloco, deste elemento.

Imediatamente após o fechamento da tag do CSS, encontra-se </head>, fechando o cabeçalho da página e imediatamente após </head> está <body>, dando início ao corpo do documento:

aula3

É entre <body> e </body> que se criam os blocos que serão mostrados na página: colunas, menus, etc.

Para começar, vamos nos deter apenas em modificar a aparência da página atual e deixemos para criar novos elementos mais para frente.

Conhecendo o CSS

CSS é uma sigla em inglês para Cascading Style Sheet, que foi traduzido para folha de estilo em cascata e é um mecanismo para adicionar estilo (fontes, cores, etc) para documentos web.

Regra CSS é uma declaração que segue uma linguagem própria e que define como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais simples, compõe-se de três partes: um seletor, uma propriedade e um valor, que devem ser apresentados conforme mostrado abaixo:

seletor { propriedade: valor; }

Seletor: genericamente, é o elemento HTML para o qual a regra será válida (por exemplo: <post>, <body>, <sidebar-wrapper>, <h1>, <p>, etc...);

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, background, color,etc...).

Valor: é a característica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

Um exemplo prático pode ser encontrado no topo do código do seu template de testes:

body {
background:$bgcolor

Onde body é o seletor (o elemento HTML que receberá o estilo) , background a propriedade deste elemento e $bgcolor o valor

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. Ex:

body{

background: $bgcolor;

margin:0; }

(fonte das informações: Maujor)

No topo da folha de estilos do seu blog de testes você encontrará Variable definitions, que são valores que podem ser modificados no Painel Fontes e Cores do Blogger. Substituindo valores como #ffffff (cor branca) por uma variável ($bgcolor, por exemplo) você poderá alterar esta cor no painel de Fontes e Cores sem precisar mexer no código do template. Quanto mais variáveis forem criadas, maior a facilidade de mudar cores e fontes dos elementos da página, através do painel. Muitas vezes não se consegue mudar a cor ou fonte de um determinado template por que o autor não usou as variáveis, especificando um determinado valor diretamente em uma propriedade. Por exemplo:

body{

background: #ffffff;}

determina que o fundo da página será branco e isto só poderá ser alterado no código.

body{

background: $bgcolor;}

aqui o valor é uma variável e poderá ser alterada no painel do Blogger (Fontes e Cores).

Uma mesma variável pode ser usada em várias propriedades, contanto que se deseje que as cores mudem de maneira idêntica. Por exemplo:

body{

background: $bgcolor;}

sidebar-wrapper{

background: $bgcolor;}

Ou seja, a mesma cor escolhida no painel Fontes e Cores para Background Color será aplicada nos dois casos (fundo da página e coluna lateral igualmente brancos ou verdes, etc.)

Se você prestar atenção nas variáveis do template Mínima, verá que são poucas as opções e se você pretende futuramente mudar as cores do seu template sem precisar tornar a alterar o código, crie tantas variáveis quanto achar interessante.

Note porém que deve ser respeitada a sintaxe para cada tipo de variável:

Variável Cor:

<Variable name="bgcolor" description="Page Background Color"
type="tipo da variável, no caso color" default="#fff" value="#ffffff">

ou seja:

<Variable name="nome da variável - pode ser qualquer nome que escolher, sem espaços" description="descrição que aparecerá no painel Fontes e Cores, pode conter espaços"
type="color" default="valor padrão, funciona na falta de um outro valor fornecido" value="valor da cor fornecida">

Variável Fonte:

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

ou seja:

<Variable name="nome da variável, sem espaços" description="Descrição da variável, pode conter espaços"
type="tipo da variável, no caso, font" default="o mesmo para que se aplica à cores, ou seja, uma fonte padrão" value="fonte escolhida">

Sobre fontes irei me estender mais nos próximos capítulos....

Vamos começar então criando uma nova variável do tipo color, para começar:

<Variable name="cordasidebar" description="Cor do Background da Sidebar"
type="color" default="#fff" value="#CC99FF">

o nome que criei, como exemplo, para esta variável é 'cordasidebar' (um nome qualquer, pois lembre-se que esta variável pode ser utilizada em qualquer propriedade, não apenas no background da sidebar), descrevi-a como Cor do Background da Sidebar (é o que irá aparecer no painel Fontes e Cores), mantive o valor #fff (branco) para default e escolhi o valor hexadecimal #CC99FF que corresponde ao lilás. Cole todo este trecho entre qualquer outra variável de sua página, como mostra a imagem:

aula4

Salve a modificação. Agora vamos ver como esta variável irá se apresentar no Painel. Clique em Fonte e Cores e se você fez tudo certinho até aqui, irá ver a nova variável assim:

aula5

Pois bem, agora que a nossa variável existe, podemos aplicá-la a qualquer propriedade de qualquer seletor onde é possível aplicar cor. Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.

Vou aplicar esta variável na propriedade background de dois seletores, header e sidebar:

#header-wrapper {
width:660px;
background: $cordasidebar;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

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

Note que originalmente, no template Mínima, não existe a propriedade background para nenhum dos dois seletores, é preciso criá-las, como fiz aqui.

Agora que você determinou a variável na propriedade background dos dois seletores, salve e retorne ao painel fontes e cores. Note que tanto o cabeçalho quanto a sidebar estão com a mesma cor de fundo:

aula6

Nota: Para fugir das cores do padrão do painel Fontes e Cores, determine outros valores para sua variável, que podem ser escolhidas em uma tabela como essa. Copie o código html e acrescente em value, como já foi explicado.

Para finalizar esta primeira parte, como lição de casa :-) fica a sugestão de criar variáveis do tipo color para cada um destes seletores: body, outer-wrapper, header, main-wrapper, sidebar-wrapper e footer. Não se esqueça de que a propriedade background deve ser criada para todos estes seletores (menos body, que já contém).

Fonte: http://templatesparanovoblogger.blogspot.com

Galera, recentemente desenvolvi um sistema para divulgação de blogs, caso desejem aumentar suas visitas, segue o link: www(ponto)buscablog(ponto)net
Agradeço desde já.