CriaRecria

Blah...que tratante soy jo!

2008-07-25T23:01:00.002-03:00

Desisto! Desisto de marcar datas, estabelecer metas e coisas assim, o motivo é simples: EU NÃO CONSIGO CUMPRIL-LOS. Não é por mal, mas não consigo! Acho que é uma questão genética, ou zodiaca, enfim, desisto...

Completamente fora da data, e sem todas as modificações necessárias, sem posts novos prontos, sem responder as várias perguntas e comentários, mas com layout atualizado!
Vocês perceberão alguns erros, mas vou arrumando aos pouco (Não me perguntem quando!).

É isso, o CriaRecria está reinaugurado, ainda há coisas, mas vamos por partes! E pouco a pouco deixo tudo certo!

PS: Sabem a caixa de busca ali em cima? Alguém sabe como arrumar?

Até, gente! (Só Deus sabe quando!)

Reinauguração!

2008-06-30T22:55:00.002-03:00

Sim, senhoras e senhores, é isso mesmo! O CriaRecria será reinaugurado e, é por esse motivo que fecharemos as portas por alguns dias!
Fecharemos amanhã a noite (1º de julho) e reabriremos dias 5 de julho com nova cara, novos posts enfim, tudo novo. Tirando eu, que serei a velha Rô mesmo, talvez atualize o sobrenome...uhm...boa idéia, mas enfim, aguardem e não percam a Versão 2.0 do CriaRecria!!

Trabalhando...

2008-06-06T20:03:00.002-03:00

Vim aqui rapidinho só para me desculpar com quem passa por aqui esperando novos posts e para explicar que meu sumiço tem uma explicação e das boas! Comecei a trabalhar, e junto vieram as provas da faculdade, imaginem a correria!
Ainda não consegui organizar minha vida, mas logo as aulas acabam e eu fico mais tranqüila e volto a postar com freqüencia! E eu não abandonei o blog, as dúvidas demorarão mais para serem respondidas, os posts serão mais esporádicos, mas ainda estou por aqui!

Até!

Efeito carimbo nos seus posts

2008-05-12T14:00:00.000-03:00

Hoje eu vou ensinar um efeito simples, mas que dá outra cara para o blog e até o deixa mais organizado, já que dá a sensação que os posts estão separados. Nunca o vi em lugar nenhum (sem alguém já tiver visto, por favor me avise), e chamo de efeito carimbo ou efeito sombra.
Olhe a imagem abaixo e veja como é esse efeito afinal:

Clique na imagem para ampliar

Gostou? Quer colocar no seu blog? Então, vamos lá!

ATENÇÃO: Salve um backup do seu template sempre que for alterar algo!

ESCOLHENDO A IMAGEM
Para usar esse efeito eu recomendo que você use uma imagem de uma cor só, sem muitos detalhes. È claro que você pode usar a imagem de sua prefêrencia, mas tome muito cuidado e pense muito bem antes, pois imagens coloridas e detalhadas podem acabar poluindo demais seu template.

Eu usei a seguinte imagem:

OBS: Perceba que a figura é preta, mas o fundo dela é branco, para que ela se confunda com o fundo dos posts que também é branco. Lembre-se disso quando for criar ou arrumar sua imagem: coloque o fundo da imagem mesma cor que escolher para o post.

Escolhida a imagem, upe-a em um servidor de sua preferência (Ex. Photobucket), guarde o link e vamos para a parte do código!

1º Passo - Colocar um fundo na área total de postagem

Vamos colocar a cor da área total de postagem (main-wrapper), o trecho para alterar isso é o seguinte:

#main-wrapper {
border: 1px solid $bordercolor;
background: #000000;
width: 540px;
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 você pode ver na imagem o main-wrapper está em preto (background) e tem uma borda branca de 1px. Você pode alterar isso como preferir, mas eu recomendo que deixe a cor do main-wrapper da mesma cor da sua imagem, para criar um efeito vazado.

2º Passo - Definir uma cor para a postagem e adiconar a imagem de carimbo.

A postagem apenas se trata desse trecho:

.post {
margin: 20px 0 5px;
padding: 0 5px 10px 10px;
background: #ffffff url(A URL DA SUA IMAGEM AQUI) no-repeat bottom right;
}

Em azul é onde você define a cor, e na frente no lugar indicado em vermelho você põe o link da sua imagem. O que está em cinza é onde definimos onde a imagem ficará: não quero que ela se repita (no-repeat) quero que fique embaixo (bottom) e a direita (right), se você quiser que a sua imagem fique em outro lugar é só alterar essas definições.

Em verde está margin, que é a distância entre o post e a borda da área de postagem, você pode alterar esses valores como preferir, diminuindo ou aumentando a distância.

Em laranja está padding, que é a distância entre a borda (invisivel) do post e o conteúdo. Aumente e diminua como preferir também.

NOTA: Lembre-se que a ordem dos números de margin/ padding é horária: 10px (topo) 10px (direita) 10px(abaixo) 10px(esquerda).

E é isso!
Nada complicado, viram? Agora é só usar sua criatividade e modificar a gosto! Aproveitem e dúvidas, já sabem, só falar!

Data do seu post personalizada

2008-05-08T13:48:00.003-03:00

A dica que eu vou dar hoje para vocês eu gosto muito! E até hoje não sei porque não coloquei aqui no CriaRecria!
Ela vem do blog Templates para Você da Áurea, que é cheio de templates lindos e ótimas dicas, vale a pena conferir!.
Vocês já devem ter visto por aí data de posts que ao invés de só números, tinham imagens, algumas como se fossem uma folha de calendário. Pois é essa dica que eu vou passar para vocês hoje! Confiram!

Data do post em forma de folha de calendário
(Esse link ensina o código)

Personalizando a data do seu post
(Esse link explica como colocar as imagens!)

Duas colunas, duas Formatações

2008-05-05T13:53:00.000-03:00

Seu blog tem duas colunas e você quer deixar cada uma com uma "cara" diferente, mas não sabe como?
Seus problemas "se acabaram-se"... rs
Esse post vai te mostrar como fazer isso e olha que não tem nada de muito complicado, gente!!

ATENÇÃO

1. Esse tutorial está sendo feito com base no Template Mínima e, segue a idéia de que você já tenha duas colunas (além da dos posts) no seu blog. Talvez o seu blog não esteja com essas definições, se for o caso, entre e contato e veremos o que dá para fazer, ok?
2. Usei as definições dadas pela Ariane nesse tutorial dela para adicionar colunas.
3. SEMPRE SALVE UMA CÓPIA DE SEGURANÇA DO SEU MODELO ANTES DE MODIFICÁ-LO!

Vamos lá!

1º Passo - Criar uma nova 'class'

Iremos criar uma nova 'class' que será atribuída para a segunda coluna, para começar só colaremos as informações da primeira coluna, ok?

Não expanda o modelo de widgets!

Procure por esse trecho do seu blog (lembre-se que esse trecho é genérico, no seu blog pode ter algumas diferenças):

Copie o que está em negrito e cole embaixo dele mesmo, ficará assim:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

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

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

.main .Blog {
border-bottom-width: 0;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

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

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

.main .Blog {
border-bottom-width: 0;
}

Perceba o trecho em azul do segundo SIDEBAR CONTENT, ele contem MAIN, é preciso deletá-los para que não haja duas informações sobre o mesmo trecho. Delete apenas o que está em azul, se no seu blog não está assim, siga as alterações como base e muito cuidado.

Até agora o segundo SIDEBAR é apenas uma cópia do primeiro, é preciso renomeá-lo para criar a nova 'class', eu usarei NEWSIDEBAR. Todo lugar que tiver SIDEBAR (apenas do trecho colado, gente) coloque NEWSIDEBAR. Ficará assim:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

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

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

.main .Blog {
border-bottom-width: 0;
}

/* NewSidebar Content
----------------------------------------------- */
.newsidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

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

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

Pronto, já temos uma nova 'class'. Salve o modelo.

2º Passo - Atribuir a 'nova class' para a segunda coluna

Não expanda o modelos widgets!

Procure por esse trecho:

<div id='newsidebar-wrapper'>

<b:section class='sidebar' id='newsidebar' preferred='yes'/>

</div>

Esse é o trecho da segunda coluna, no seu template a id (o que está em azul) pode estar diferente. Perceba o que está em negrito, é esse o nome da 'class' a qual pertence a coluna, mude-o para o nome da 'class' que criamos! Eu coloquei 'newsidebar' e é isso que colocarei lá:
Ficará assim:

<div id='newsidebar-wrapper'>

<b:section class='newsidebar' id='newsidebar' preferred='yes'/>

</div>

Visualize seu blog e veja se está tudo certo.
Lembre-se que ainda nada foi modificado na segunda class, logo as duas colunas continuam idênticas. Se não houver nenhum problema, salve o modelo e agora é de personalizar. Se você não sabe como fazer, use esse post!

DICA
Suas colunas estão tortas e deformando o template? Use esse tutorial (também da Ariane) e alinhe-as!

Coluna (Sidebar-Wrapper )

2008-04-30T13:08:00.004-03:00

Já faz algum tempo que não posto nada da saga Códigos Básicos, vou ressuscitar essa categoria falando sobre a SIDEBAR (ou coluna).

Sempre lembrando que uso o Template Mínima do blog como base!

Como o MAIN (ou área de postagem) o SIDEBAR também tem dois trechos que se tratam dele:

1º Trecho - Área total da Sidebar/Coluna

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

Ele se trata da área da coluna como um todo,como mostrado na imagem abaixo:

Clique na imagem para ampliar

Não vou postar novamente como funciona para modificar esse trecho já que é da mesma forma desse post sobre MAIN-WRAPPER.

2º Trecho - Desmembrando a Sidebar

O trecho abaixo está colorido conforme a cor que tem na imagem abaixo dele, observe o trecho e a imagem.

/* Sidebar Content
----------------------------------------------- */

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

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

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

Clique na imagem para ampliar

Obs: Em rosa está SIDEBAR-WRAPPER

ATENÇÃO
Se você quer alterar o título da coluna, já existe um post apenas sobre ele aqui.

Agora vamos explicar melhor cada trecho!

.SIDEBAR (Vermelho com borda preta) - Interior da Coluna

Na imagem você pode observar que esse trecho se trata da área "interior", digamos assim, da coluna. Porém só é assim se nesse trecho (.sidebar) houver margem (margin) ou na área total (sidebar-wrapper) tiver padding. Na imagem o sidebar-wrapper está com 10px de padding de todos os lados.
Se não houver essa distância entre o interior da coluna e a área total, os dois trechos (.sidebar e sidebar wrapper) vão se tratar do mesmo trecho.

DICA - Crie uma moldura para sua coluna

.SIDEBAR UL (verde) - Área das listas

São todas as listas de links, de arquivo etc.

.SIDEBAR LI (amarelo) - Itens das listas

UL é a lista inteira, já LI é cada item da lista.

.SIDEBAR .WIDGET (cinza) - Área de Widgets

É a área de cada elemento (widget) da coluna. Na imagem abaixo é possível visualizar melhor:

Clique na imagem para ampliar

Esse é um trecho muito interessante, pois permite que você separe os elementos de sua coluna, dando a impressão de que são individuais.

ATENÇÃO
Perceba que nesse trecho há também o .MAIN .WIDGET, que se trata do widget do post, e tudo que você alterar na coluna vai também ser feito na postagem. É possível separar os elementos para isso, veja esse post.

MAIN-BLOG - esse trecho se trata da área de postagem, procure informações nesse post!

Moldura para a coluna

2008-04-30T12:30:00.001-03:00

Para conseguir esse efeito da imagem é muito simples!

Você pode adicionar um fundo (background) em SIDEBAR-WRAPPER e colocar outro em .SIDEBAR.
Onde fica isso?

1º Trecho (em verde na imagem) - A imagem de fundo (a borda) -

#sidebar-wrapper {
background: ADICIONE AQUI A IMAGEM OU A COR;
width: 220px;
float: $endSide;
padding: 10px 10px 10px 10px; - trecho opcional, será explicado melhor abaixo.
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 */
}

2º Trecho (em branco na imagem)

.sidebar {
background: ADICIONE AQUI A IMAGEM OU A COR;
color: $sidebartextcolor;
line-height: 1.5em;
margin: 10px 10px 10px 10px; - trecho opcional, será explicado melhor abaixo.
}

ATENÇÃO:

1. Você deve ter percebido os trechos opcionais que estão nos códigos acima, é necessário que ao menos um deles esteja no lugar indicado ou não tera um espaço entre um elemento e outro resultando na borda. O valor pode ser alterado dependendo da borda que você quiser!

2. Perceba que na imagem não há margem nenhuma entre o texto e a coluna branca, para solucionar isso adicione padding ao segundo trecho!

DICA: Emoldure também seus posts com essa dica da Ariane.

Para mais informações sobre a SIDEBAR (ou coluna) veja esse post!

Separar main e sidebar (widgets)

2008-04-30T12:00:00.000-03:00

Alguns modelos de templates (como o Minima) trazem o código de widgets do post (main) e da coluna (sidebar) juntos, como no exemplo abaixo:

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

Quando o trecho está assim, se você muda algo no widget da coluna a mesma modificação ocorre nas postagens, como nem sempre queremos que isso ocorra explicarei nesse post como separar os dois códigos para que você possa alterar cada um individualmente.

Copie o trecho do seu blog que se refere à essa mesma área acima e cole-a logo abaixo, ficando assim (só que com as definições do seu blog, é óbvio):

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

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

Agora delete o que está em negrito nos dois trechos e pronto! Você já pode alterar cada elemento individualmente!
Só para exemplificar seu código deve ficar assim:

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

DICA: Tenha mais informações sobre a área de postagem e sobre a coluna nos links abaixo:

Main-Wrapper - Área total de postagem
Main-Wrapper - Desmembrando
Sidebar-Wrapper

Renomear um marcador

2008-04-28T13:05:00.004-03:00

Ontem vi uma dúvida no Orkut que me deixou curiosa, é possível renomear um marcador?
Claro que fui fuçar no Blogger e descobri que não, não é. Então como renomear, de uma forma simples, mesmo que vários marcadores?
Nessa mesma comunidade, a Ariane deu a resposta: substitua o marcador! Como fazer isso? É o que explicarei nesse post!

Vamos lá!

Entre em Postagens (a imagem mostra onde fica ) do seu blog, você verá uma lista com todas as suas postagens e a esquerda terá a lista com os marcadores, como na imagem abaixo:

Img 1 - Clique na imagem para ampliar

Clique no marcador que quer renomear nesse menu a esquerda.

Agora clique em selecionar todos (olhe a img 1).

ATENÇÃO: Se o rótulo que você quer substituir tem muitas postagens e elas se dividem em mais de uma página você tem duas opções:

1. Alterar postagens por página e fazer com que todas apareçam de uma só vez. Essa opção está no canto superior direito como POSTAGENS POR PÁGINA!

2. Fazer o processo página por página.

Agora vá em Ações de Marcador e clique em Novo Marcador, como na imagem abaixo. É essencial que você primeiro adicione a nova etiqueta e depois retire a velha.

Img 2 - Clique na imagem para ampliar

Está quase pronto, você já adicionou o novo marcador, o passo agora é retirar o antigo.
Se os posts não estiverem mais selecionado, selecione todos e vá novamente em Ações de Marcador dessa vez procure por Remover Rótulo e depois clique em qual quer tirar, como na imagem a seguir:

Img 3 - Clique na imagem para ampliar

Aparecerá a mensagem indicando que não há mais nenhum post com aquele marcador, e ele desaparecerá da lista lateral. Bem simples, não é?

Dúvidas, já sabem! Só perguntar!

CONVITE: A comunidade do Yakult que citei é do Templates para Novo Blogger da Ariane, quem quiser participar fique a vontade!! Ai vai o link http://www.orkut.com/Community.aspx?cmm=41402988.

Até a próxima!

Selos e Memes

2008-04-17T18:27:00.007-03:00

Atualizando memes e selos! Vou começar pelos selos, vamos lá!

Esse eu recebi do Microship.

E esses do Estúrdio Blog's New:

[EDIT] Em tempo, adicionando um selo que recebi do Via Paralela:

[/EDIT]

Não vou repassa-los pois acabaria ficando repetitivo! Mas todos os que recomendo ai no canto direito os merecem e são muito bons, sim senhora!

MEME

Recebi o seguinte meme do Microship:

1 - Por que resolveu criar o blogue?
Depois de tanto falar que gostava mais de fazer templates do que de postar tive a "genial idéia" (ou conclusão óbvia) de criar um blog disponibilizando templates! rs...Só que faltava algo para complementar, e foi assim que decidi colocar também dicas e tutoriais.

2 - O que te dá mais prazer em blogar?
A elaboração do post, do layout, ou seja, todo processo de blogar, e claro, o feedback é o que faz tudo valer a pena. Até mesmo o negativo, porque acredito que se alguém se deu ao trabalho de fazer uma crítica, é que algo de bom deve ter.

3 - Indique um blogue bom e um que você não gosta e porque.
Indico todos os recomendados ali do lado, não...se estão ali é por que valem a pena. Por que eu indicaria um blog que não gosto?

4 - Qual tipo de música, e quais suas bandas favoritas?
Rock e MPB, basicamente, mas ultimamente tenho ouvido de tudo um pouco.

5 - Qual o assunto que você mais gosta de postar?
Não tenho assunto preferido, não. Gosto de escrever sobre quase tudo.

6 - Seaquinevasseceusavaesqui?
Seaquinevasseeuficariamuitofelizadorofrioeusavaesquisim!

7 - Você é: casado, solteiro, separado, enrolado, desquitado, chutado, viúvo ou outros?
Namorando entra em outros? Sou praticamente casada!

8 - Por que você deu este nome ao seu blogue?
Depois de um tempão tentando escolher um nome, queria algo que tivesse a ver com criação, ficou esse!

9 - Qual foi o ultimo blogue que você visitou?
Microship, onde peguei o meme...rs

10 - Porque resolveu participar deste meme?
Porque o André me convidou!

E eu vou convidar todos aqueles que quiserem participar desse meme e nos contar um pouquinho mais quem são! Se alguém quiser deixe nos comentários e eu linko aqui.

Posts Relacionados

2008-04-14T13:30:00.000-03:00

Posts relacionados é uma lista automática que adiciona os posts parecidos com o aberto no rodapé.

Ficou confuso com a explicação? Clique no título desse post e veja a lista abaixo de Leia Também!

Esse recurso é muito útil, pois deixa outros posts que podem interessar ao leitor visíveis! Quer por esse recurso em seu blog? A Nospheratt do Blosque.com (recomendadissímo) explicou muito bem a importância desse hack e como fazer em dois posts, sendo o primeiro como fazer e o segundo como personalizar, e ai vão os link, aproveitem:

Widget de posts relacionados

Customizando a lista de posts

De volta a ativa!

2008-04-14T13:07:00.005-03:00

Depois de duas semanas afundada entre provas e trabalhos estou de volta a ativa! Desculpem as dúvidas que não consegui responder e os posts que deixei de fazer, vou tirar o atrazo e para minha próxima fase de provas da faculdade vou estar mais preparada, deixando uns posts já prontos, ok?

Vocês vão perceber algumas mudanças por aqui, nada de muito dramático, e quem quiser dar sua opinião sobre as mudanças ou sobre o que acha que deveria mudar, sintam-se a vontade!

Campanha - O que você quer saber?

A campanha/promoção proposta no post passado já está ativa! Quem quiser já pode me enviar as dúvidas!
Para entender melhor do que se trata leia no post anterior!

O que você quer saber?

2008-03-31T15:13:00.004-03:00

Depois de um tempo sem postar (época de prova é fogo! Pior que ainda não acabou) eu voltei com uma idéia de "promoção" para trazer dicas e tutorias que realmente interessam a quem lê o CriaRecria. Batizei de "O que você quer saber?", nada original, mas tudo bem...rs
A idéia é a seguinte, você, leitor manda pelo formulário de contato suas principais dúvidas, aquilo que você sempre quis saber.Uma dúvida por semana será escolhida e a o blog da pessoa que a fez ficará por essa semana em destaque aqui no CriaRecria.
Sim, é isso mesmo! O que você quer saber é respondido e de quebra você ganha um destaque por aqui!
Como o intuito principal da promoção é ajudar aos leitores, quero saber o que vocês acham! Então deixem suas opiniões nos comentários para decidirmos se a campanha sai ou não sai!

Barra de rolagem na área de postagem

2008-03-15T13:00:00.000-03:00

Hoje vou ensinar mais um 'truque' bem simples e diferente, que se usado com um layout pensado, pode deixar seu blog bem bonito.
Esse truque é a barra de rolagem na área postagem, que fica interessante se seu blog tiver 'altura' fixa.

Vamos lá:

ATENÇÃO: Sempre que for alterar algo em seu blog não se esqueça de salvar uma cópia de segurança!

Não precisa expandir modelos widgets!

O primeiro passo é encontrar esse trecho do seu código:

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

Agora adicionaremos uma altura (height) para esse trecho, eu colocarei 400px, mas você pode o tamanho que quiser (claro, né!). O trecho ficará assim:

#main-wrapper {
height: 400px;
width: 525px;
float:$startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for longnon-text content breaking IE sidebar float */
}

É hora de colocar a barra de rolagem! Perceba que a propriedade que define isso já está nesse trecho, se trata de OVERFLOW. Você só precisará trocar HIDDEN por AUTO.

Se quiser pode apagar o texto entre /* e/* , só tome cuidado para não apagar mais que isso!

O trecho deverá ficar assim:

main-wrapper {
height: 400px;
width: 525px;
float: $startSide;
margin: 30px 0 0 4px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: auto;
}

Visualize seu blog e pronto! Você já tera uma barra de rolagem no seu blog!

Se quiser personalizar sua barra veja essa dica, mas só funciona no Internet Explorer!

Barra de rolagem colorida

2008-03-15T10:33:00.006-03:00

Você já viu barra de rolagem colorida em algum site?
Se você não usa o Internet Explorer com certeza sua resposta foi não. Isso porque o único navegador que aceita essa característica é o IE, então, pense muito bem antes de colocar isso em seu blog: compensa ter um efeito que só quem usa um navegador vai ver?
Se você acha que sim, vamos lá:

Você vai ter que usar um site externo, tem muitos geradores para esse efeito, mas eu indico o By Marina.
Não tem como por o link direto do utilitário, por isso vou dar as coordenada:

Entre no site e vá em Utilitários depois Barra de Rolagem. Abrirá um gerador, no próprio site você encontrará uma tabela de cores e um modelo indicando de que parte se trata cada propriedade.

[EDIT - 15/05] Gente, o By Marina foi atualizado e não encontrei mais o gerador, enão usem esse aqui Gerador de Barra de Rolagem Colorido [EDIT]

Escolha as cores, coloque-as nos lugares indicados, então gere o código, não o copie ainda! Preste atenção em uma coisa antes.

O código gerado estará assim (com as cores que você escolheu, é óbvio!):

<STYLE type="text/css">

</STYLE>

Se você colar esse código direto no seu blog terá problemas, porque o Blogger já tem um BODY e já tem código CSS.
Então copie apenas o que está entre { } e cole na tag Body que já existe no seu blog!
O trecho para ser colado deverá ficar assim:

scrollbar-face-color: a;
scrollbar-highlight-color: a;
scrollbar-3dlight-color: a;
scrollbar-darkshadow-color: a;
scrollbar-shadow-color: a;
scrollbar-arrow-color:a;
scrollbar-track-color: a;

Bem simples, não é?

Blog Solidário - Selo

2008-03-15T08:37:00.001-03:00

A Áurea do Templates para Você presenteou o CriaRecria com um selo lindo, de blog solidário! E esse post será para agradecê-la e repassar o blog!

Então, muito obrigada Áurea é uma honra receber um 'mimo' de você, que admiro tanto!

Repassando para 3 blogs:

1. Blog Memories da Claudya
2. Blosque da Nospheratt
3. Dicas Blogger da Juliana Sardinha

Aos blogueiros que repassei o selo, quero deixar claro que é apenas uma 'singela homenagem', pois considero esses blogs solidários - no sentido de ajudar outro blogueiros, e os recomendo. E sendo apenas uma homenagem não é obrigação de ninguém repassá-lo, nem ficarei chateada se não o fizerem!

É isso! Obrigada a Áurea mais uma vez!!

Excluir 'Cabeçalho de Página'

2008-03-08T11:17:00.009-03:00

Já vi várias pessoas 'apanhando' para conseguir tirar o título e a descrição do blog (Cabeçalho de Página) e substituir por uma imagem. Eu mesma já apanhei muitooo com isso, pois queria por a imagem direto no html e não pelo 'Elementos da Página'.
Por isso hoje vou explicar como excluir esse elemento.
Vamos lá!

ATENÇÃO: Não esqueça de salvar uma cópia de segurança do seu blog sempre que for alterar algo!!

SEM expandir o Modelo de Widgets procure por:

<div id='header-wrapper'>

Você encontrará um trecho igual ou parecido:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título do Seu blog' type='Header'/>

Essas são as definições para a área Header, ou seja, o cabeçalho do seu blog onde fica seu título.

O segundo trecho em negrito é o que mais nos interessa, é onde definimos se podemos ou não excluir o título. Locked indica se o Header está 'trancado' para alterações, ou não. Está true (verdadeiro), então ele está trancado. Para 'destrancá-lo'substitua TRUE por FALSE e pronto! É só!

Vá até Elementos de Página, vá em Editar no cabeçalho, se você tiver feito tudo certo aparecerá Remover Elemento de Página. Remova e pronto, você já não tem mais o título em header do seu blog, já pode por uma imagem direto no html!
Simples, não?

O primeiro trecho'negritado' também é interessante, pois se você quiser re-adicionar o Cabeçalho vai precisar fazer o que vou explicar agora.
Esse trecho se trata de "Show Add Element", que é o que define se aparece ou não o 'adicionar elemento'. Nesse trecho está NO, logo não aparecerá, se você quiser que apareça substitua NO por YES. Então, quando quiser adicionar algo em Header é só adicionar elemento, como se fosse a Coluna ou o Rodapé(footer) do blog .

É isso, gente! Bem simples, não é?

[Edit] Acho que estou ficando louca, ou sofrendo de alguma doença neurológica (exagerada?!). Eu tinha colocado no post sobre o Cabeçalho que onde estava True devia ser posto No, mas não é isso não, o certo é substituir por FALSE. Me desculpem (mais uma vez...), corrigido![/Edit]

Desculpas e Selos

2008-03-08T11:15:00.002-03:00

Andei bem sumida por aqui, não é?
Desculpem, mas é que entre escrever um post só para marcar presença e esperar mais um pouco para escrever algo melhorzinho (porque esse não ficou lá grande coisa, mas tudo bem) , preferi a segunda opção!
Essa semana andei muito ocupada com a criação do meu Portfólio, que ainda não está 100%, mas está quase lá e quem quiser conferir fique a vontade!
Por isso esse sumiço, mas semana que vem volto com dicas e mais da 'saga' Códigos Básicos, ok?

Agora vamos para outro assunto, durante esse meu sumiço recebi uma coisa que me deixou muito, muito feliz mesmo!!! Um selo, sim! O primeiro selo do CriaRecria!
E não recebi de ninguém menos que do Microship, a quem recomendo mais uma vez.

Repasso o selo para:

Templates Novo Blogger
Blog Memories

E por enquanto é só gente, mais uma vez obrigada ao Microship!

Até a próxima, que dessa vez não demorará tanto!

[Edit] Tinha esquecido de por o selo, e a Ariane 'puxou minha orelha'. Problema resolvido, ai está o selo! [/Edit]

Elementos básicos das postagens

2008-02-29T15:19:00.002-03:00

Passeando por blogs encontrei um post muito legal, que explica os elementos básicos das postagens (em Layout / Elementos de Página) e acho que complementa os meus últimos post sobre a Área de Postagem, então vou deixar o link aqui para vocês. Não deixem de conferir o blog Microship.

Elementos básicos das postagens

Main Wrapper - Desmembrando

2008-02-25T16:08:00.002-03:00

Hoje vou continuar o post anterior sobre a área de postagem.
Você já sabe como modificar a área total, não é? Agora vai aprender a modificar elemento por elemento (data, título etc).
Só que como já tem um post (Variáveis CSS) explicando os elementos, vou só dizer a que cada trecho se refere e dar umas dicas de modificação, ok? Assim fica um post limpo e menos extenso.
Vamos lá!

Esse trecho é o que iremos conhecer hoje:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
background: black;
}

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

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-$startSide:.6em;
}

.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}

.post blockquote p {
margin:.75em 0;
}

Percebeu que cada pedaço está com uma cor? Isso é para ajudar você a visualizar o que é o que, observe bem e agora vamos ver melhor cada pedaço.

Clique na imagem para ampliar

DATA
Vamos começar pela data que é o primeiro trecho:

h2.date-header {
margin:1.5em 0 .5em;
}

Lembre-se que esse é o trecho original do Mínima do Blogger. Você pode adicionar qualquer um dos elementos indicados nesse post.

DICA:

Alinhando a data: Você pode usar text-align, e deixar a data a direita, esquerda ou central.

Para saber como fazer isso, e procure pelo elemento que quer adicionar.

POST

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

Aqui é toda a área do post exceto a data, na imagem outras cores estão sobre ela, mas se você não definir outra cores ficará apenas a que por ai, como na imagem abaixo:

Clique na imagem para ampliar

DICA

Espaçamento entre as linhas: Um recurso bem simples, mas que faz muita diferença na hora de se ler um post é o line-height. É esse 'propriedade' que define o espaço entre as linhas, você pode por com porcentagem (Ex. line-height: 120%), com px ou em. Experimente mudar os números, você vai ver como é útil.

TÍTULO DO POST, TÍTULO COM LINK

Agora veremos o título do post, perceba que aqui não se trata simplesmente do título, mas também dele como link ativo, visitado e hover (com o mouse em cima).

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Em vermelho temos o título normal, sem links nada.

Em azul temos o título com link ativo.

Em verde o link já visitado.

Em laranja com o mouse em cima.

Perceba que como link ativo e o visitado estão juntos, então toda modificação que fizer em um, automaticamente será feita no outro.

LINK DOS COMENTÁRIOS

.comment-link {
margin-$startSide:.6em;
}

Esse são os links do comentário e de Links para esta postagem no rodapé do post.

IMAGENS DO POST

.post img {
padding:4px;
border:1px solid $bordercolor;
}

Você já percebeu como as imagens postadas costumam aparecer com uma borda, como se fosse uma moldura? Esse trecho é que define isso.
Padding é o espaço entre a borda e a imagem.

DICA

Criando molduras: Se você adicionar um fundo (background) e modificar a borda pode conseguir efeitos bem interessantes, como esse:

Clique na imagem para ampliar

Para conseguir esse efeito modifiquei o código assim:

.post img {
background: #000000;
padding:4px;
border:2px dashed #ffffff;
}

Mesmo se você modificar apenas esses 3 elementos, você já consegue efeitos muito interessantes. É só ser criativo, aproveite!

PARÁGRAFO DO POST

O parágrafo no código html é representado por <p></p>, e para modificá-lo no css o trecho é esse:

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

DICA

Adicionando recuo de texto: Nesse trecho é interessante adicionar um recuo, como quando escrevemos a mão e deixamos aquele espaço a cada parágrafo, sabe?
Se você colocar um recuo em seus post vai perceber que eles ficam mais limpos. Para isso use a propriedade text-indent com medidas comuns (px, cm, em etc). Observe a imagem:

Para dar esse efeito usei o text-indent com 30px:

.post p {
margin:0 0 .75em;
line-height:1.6em;
text-indent: 30px;
}

ATENÇÃO: Lembre-se que esse efeito só acontecerá nos trechos do blog que estiverem entre <p></p>.

PARÁGRAFO, BLOCKQUOTE

.post blockquote {
margin:1em 20px;

}
.post blockquote p {
margin:.75em 0;

}

Esse trecho já tem um post próprio. Clique para ver.

RODAPÉ

Essa parte eu acho interessante, pois quando modificado dá um efeito bem legal, como você pode observar abaixo:

Clique na imagem para ampliar

Esse pedaço trata-se desse trecho:

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

Dicas: Para dar esse efeito de 'moldura' coloque a borda com a cor do fundo do post, e não do rodapé.
Se a sua área de postagem é branca, e seu rodapé cinza, coloque a borda da cor branca, assim:

Para conseguir esse trecho fiz assim:

.post-footer {
background: gray;
border: 2px dashed white;
padding: 10px;
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

É isso gente, a área de postagem foi desmembrada e você já sabe do que se trata cada trecho, agora é só usar a criativadade e deixar seu blog ainda mais personalizado.
Lembrando que o post de Variáveis CSS mostra o que pode ser modificado!

Até a próxima e dúvidas, já sabem, comentários.

[EDIT]

DICA: Crie molduras para seus posts! Confira como nesse link!

[/EDIT]

Main Wrapper - Área de Postagem

2008-02-18T13:25:00.004-03:00

Hoje vou mostrar como personalizar a área de postagem, esse vai ser mais um post da 'saga' Códigos Básicos. Lembrando que eu uso o Template Mínima do Blogger como base (aquele primeiro dos modelos disponibilizados!). Vamos lá!

Basicamente são dois trechos que se tratam desse elemento o primeiro é a área total de post e outro os elementos de dentro do post (título, data), para esse post não ficar muito extenso dividirei em dois posts. Esse será sobre a área total de post (MAIN-WRAPPER):

#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 */
}

Nesse trecho é possível basicamente:

Alterar o tamanho da coluna de post - para fazer isso é só mudar o número na parte destacada em vermelho.
Atenção: Cuidado na hora de fazer isso, lembre-se do total do seu template (outer-wrapper) e das margens para não deixar seu template desalinhado e todo torto!

Colocar um background (fundo) - isso é bem simples também, adicione 'background' a esse trecho como mostrado abaixo:

Cor:
background: #000000;

Imagem:
background: url (IMAGEM) repeat;

Ficará assim:

#main-wrapper {
background: #000000;
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 */
}

ATENÇÃO: Para mais informações sobre como alterar o background clique aqui e procure por background no post!

Adicionar borda - Isso também é simples, é só adicionar a seguinte opção no trecho:

border: 1px solid #000000;

Ficará assim:

#main-wrapper {
background: #000000;
border: 1px solid #000000;
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 */
}

Para saber como modificar as opções de borda clique aqui.

Mudar o posicionamento das postagens - isso já é um pouco mais complicado, e vai depender muito do seu template.
O posicionamento é definido pelo FLOAT. No Mínima, as postagens estão a esquerda da coluna, ou seja, ÁREA DE POSTAGEM - COLUNA por isso está float: $startSide;.

Como no Mínima:
Se no seu está assim também e você quer que seja COLUNA - ÁREA DE POSTAGEM, mude o $startSide para $endSide.
Só que será necessário mudar também a coluna (sidebar), provalvemente estará assim:

#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 */
}

Mude o $endSide para $startSide, visualize, e veja como ficou!

Diferente do Mínima (Left, Right):
Se o seu template não está $endSide - $startSide, mas sim Left (direita) - Right (esquerda), como abaixo:

#main-wrapper {
width: 410px;
float: left;
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: right;
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 Right e Left como preferir. E pronto o posicionamento fica como você preferir!

Adicionar/ Alterar margin - talvez a área de postagem precise de margens, ou seja, ficar mais longe de determinado elemento ou mais perto. Lembre-se que margem é a relação entre um elemento e outro (coluna e área de postagem, por ex.).
Adicione o trecho abaixo em main-wrapper, caso já haja esse trecho você apenas modifica os valores:

margin: 0px 0px 0px 0px;

Modifique 0 (zero) para o número que você quiser, sempre visualizando antes de salvar, para ver o resultado!
Lembrando que na linguagem do código o sentido é horário, ou seja, o primeiro é topo, segundo direita, terceira abaixo e, quarto esquerda!
É provável que para alinhar as postagem você precise também alterar a margem da coluna, faça isso da mesma forma que modificou a área de postagem.

Adicionar/ Alterar padding - padding é a distância das bordas da área de postagem para seus elementos internos. Para alterar é o mesmo esquema da margem.

Padding: 0px 0px 0px 0px;

Por esse post é isso, esses são basicamente os elementos que podemos mudar na área total de postagem, no próximo post explicarei como alterar os elementos internos!
Dúvidas, já sabem, só falar!

Até a próxima!

Variable Definitions ($bgcolor)

2008-02-08T22:50:00.000-02:00

Você já deve ter percebido no começo do código um trecho intitulado de Variable Definitions, e em alguns lugares do blog ao invés de cor (#FFFFFF;) algo como $bordercolor, $linkcolor. Mas o que é isso? Como se define a cor assim?
Sabe aquelas opções em Modelo\Fontes e Cores? Você pode definir essas variáveis lá ou diretamente no código, uma coisa legal também é que tem como criar nossas próprias variáveis e é bem simples.

Hoje vou ensinar a modificar as Variable Definitions direto no html e também a criar a nossa própria.

Vamos lá!

MODIFICANDO VARIABLE DEFINITIONS

<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#FFFFFF">
<Variable name="textcolor" description="Text Color"type="color" default="#B52" value="#3F0B52">
<Variable name="linkcolor" description="Link Color"type="color" default="#1BF" value="#B391BF">

Aqui temos um trecho com três tags de variáveis, em negrito apenas uma tag.

Em vermelho temos o nome da variável, que é como ela deverá ser colocada quando usarmos ela. No caso devemos colocar $bgcolor.

ATENÇÃO: Não se esqueça de colocar o $ antes do nome, ou não funcionará!

Em azul temos a descrição da variável, serve para que saibamos do que se trata, e é o que estiver escrito aí que aparecerá lá na janela de Fontes e Cores.

Em verde temos o tipo de variável, essas três se tratam de cores, mas podia sem de fontes também.

Em cinza temos o valor da cor reduzido, observando códigos percebi que era os últimos três dígitos do valor, não sei bem para que serve. Mesmo quando o default está diferente do value a cor fica normal, mas sempre que mudar a cor direto no código mude também o default por garantia.

Em roxo temos a cor, é ai que você deve mexer na hora de trocar a cor no html, é só por os dígitos da cor escolhida e pronto!
Todos os lugares que estiverem com a variável ficaram com as cores que você escolheu.

CRIANDO VARIABLE DEFINITIONS

Criar uma variável é bem simples, é só copiar o trecho abaixo, substituir como quiser e colar antes da primeira linha, como mostrado:

/* Variable definitions
====================
<Variable name="NOME" description="DESCRIÇÃO" type="color" default="#XXX"value="#XXXXXX">
<Variable name="bgcolor" description="Page Background
Color"type="color" default="#fff" value="#FFFFFF">

Em negrito o que você deve copiar, o que está em cinza é para você saber onde. Como substituir você já sabe, né? Um exemplo:

<Variable name="linecolor" description="Linhas" type="color" default="#599" value="#6F0599">

Eu criei essa variável para todas as linhas do meu blog, sempre que quero pôr uma linha faço assim:

border-bottom: 1px solid $linecolor;

Está em borda porque é como eu uso, poderia estar em background, font-color e tudo que se refere a cor!
Então quando eu quero trocar a cor, ou eu mudo direto no código, ou vou em Fontes e Cores, que é bem mais prático e pronto!

É isso! Simples, né?

BODY

2008-02-08T13:57:00.000-02:00

Já sabemos quais são os elementos básicos do Blogger, vamos analisar agora cada um deles isoladamente. Esse será o bem o comecinho do código apartir do body, lembrando que eu uso o Template Minima do Blogger, em outros templates talvez a disposição deja outra!
Vamos lá!

body {
background: #FFFFFF;
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;
}

BODY, como vimos no post passado, é o 'corpo do blog', recomendo que você só altere nele a cor do texto e o fundo.
A cor do texto pode ser modificada diretamente no html, ou no painel de definições do Blogger, se quiser modificar no html substitua $textcolor pela cor desejada (Ex: #000000;).
No fundo é possível colocar uma cor ou uma imagem, para por uma imagem é simples:

background: url(END_DA_IMAGEM);

ATENÇÃO: Mais informações sobre as possibilidades de alteração do background clique AQUI.

A:LINK são os links do seu blog, a cor da fonte funciona da mesma forma que do body. Você pode adicionar elementos como text-transform: uppercase; o que fará que todas as letras dos links fiquem automaticamente maísculas. Para mais informações sobre "text-decoration" e "text-transform", clique AQUI:

A:VISITED se refere aos links que já foram visitados, as modificações são as mesmas do link normal (a:link).

A:HOVER é como o link ficará quando o mouse passar por cima, esse está com underline. As modificações são iguais as de cima.

Link para o Dicionário

2008-02-07T22:48:00.000-02:00

A Janaina do Somente Eu Mesma, linkou de um jeito bem lindinho os Elementos Básicos do Blogger que eu postei, eu coloco aqui para vocês verem e quem quiser linkar também! E também para agradece-lá! Segue o link!

<a href="http://criarecria.blogspot.com/2008/01/elementos-do-blogger.html"
target="_blank">

<img src="http://i250.photobucket.com/albums/gg244/janainarovari/referendo-sobre-venda-de-armas02.jpg"
border="0" alt="Dicionário de Templates" width="142" height="154"></a>

Novo template sem perder widgets

2008-02-07T19:23:00.000-02:00

Faz tempo que tá todo mundo procurando um jeito mais prático de salvar nossas widgets na hora de trocar o template, não é?
Foi a Claudya que saiu na frente e nos mostra em seu blog um jeito bem mais fácil de fazer isso! Quer saber como, então clique no link abaixo:

Mude seu template no novo Blogger, sem perder suas widgets

Observatório:Divulgando Anônimos

2008-01-31T16:40:00.000-02:00

Se você tem um blog novo, ou nem tanto, deve estar sempre procurando formas de divulga-lo. Não é?

Então não pode deixar de visitar o Observatório, a mais nova forma de divulgar seu blog.

Essa é uma iniciativa muito legal da Ariane e funciona da seguinte forma:

Você envia o link de um post seu - ou indica algum que tenha gostado pela net - pelo seguinte formulário, coloca um resumo (uma frase) que represente o post que você está enviando e pronto!

Seu post (ou indicação) será avaliado e se for escolhido ficará por 24 horas na página principal e arquivada. Os links que forem mais clicados na semana terão destaque na coluna!

Atente para dois pontos:

1. É um POST, gente! Nada de querer mandar o blog inteiro! rs. A Ariane já frisou e eu repito aqui: que é só um post.

2. Os posts com assunto de interesse geral e de blogs que linkem o Observatório tem prioridade. Então corra linkar o site e mande o seu post! Não fique fora dessa!

PS: Tô feliz, um post do Sangue, Rosas e Vinho Tinto (Meu blog) tá lá!

Variáveis CSS

2008-01-28T16:38:00.000-02:00

Quando vamos mexer no template de um blog logo nos deparamos com um monte de variáveis que nem sempre sabemos do que se trata, esse post vai tentar desvendar a maioria delas. Colocarei aqui as que eu conheço, que fui as poucos descobrindo o que era (às vezes com a ajuda de sites e blogs, outra na raça mesmo), se alguém perceber que coloquei algo errado ou quiser adicionar alguma, é só dizer que eu arrumo e claro, dou os devidos créditos.

[EDIT] Depois que eu terminei, fui procurar algumas variáveis que eu não conhecia (como a do text-transform que eu só conhecia a UPPERCASE), e encontrei o Maujor, que já faz um tempo que até recomendo aqui e me ajuda bastante, mas ainda não tinha visto a página de Propriedade do texto deles. Dêem uma passada lá e confiram! Propriedade CSS text

Se eu tivesse encontrado antes teria apenas linkado as propriedades de texto, mas como já fiz vou manter o link e o meu trabalho lá embaixo.[/EDIT]

Chega de enrolação, vamos lá!

background: aqui é o fundo do 'objeto', elemento. Você pode por uma cor, ou uma imagem.

Exemplo:

Com cor:
background: #000000;

Com imagem:
background: url(http://url-da-imagem/) X;

X pode ser substituído por:
repeat - se você quiser que a imagem se repita
no-repeat - se você não quer que a imagem se repita
top - topo
bottom - abaixo
right - direita
left - esquerda

É possível também fazer combinações assim:

background: url(http://url-da-imagem/) no-repeat top left;

Outra possibilidade é combinar cor com imagem, então, onde não tiver a imagem aparecerá a cor escolhida:

background: #000000 url(http://url-da-imagem/) no-repeat bottom left;

border: Borda

Exemplo:

border: 1px solid #000000;

Em azul: a espessura da borda, troque o '1' pelo número desejado.
Em vermelho: o tipo da borda (solid, dashed e dotted).
Em verde: a cor.

Você pode por borda só em determinado lugar:

Veja as possibilidades:

border-bottom; 1px solid #000000;

border-right;1px solid #000000;

border-top;1px solid #000000;

border-left;1px solid #000000;

Veja os estilos de borda possíveis no Blogger:

border:1px solid #000000

border:1px dashed #000000

border:1px dotted #000000

margin: distância entre um elemento e outro (coluna a outra, por ex.)

Ex:
margin: 10px 10px 10px 10px;

padding: distância entre o contéudo e as bordas Entenda melhor a diferença entre padding e margin

Ex:
padding: 10px 10px 10px 10px;

widht: largura

Ex:
widht: 500px;

height: altura

Ex:
height: 500px;

float:flutuação (right ou left)

Ex:
float: right;

color: cor do texto

Ex:
color: #000000;

font: tipo da fonte

Ex:
font: $bodyfont;

text-align: alinhamento do texto (left, right, center, justify>

Ex:
text-align: left;

text-decoration: decoração do texto

Ex:
text-decoration: underline;

text-transform: tranforma o texto não importando como você escreva, pode deixar por exemplo todas maíscula.

Ex:
text-transform: uppercase;

letter-spacing: espaço entre as letras.

Ex:
letter-spacing: 1px;

line-height: altura da linha. (não é tamanho da fonte!)

Ex:
line-height: 1px;

font-size: tamanho da fonte

Ex:
font-size: 20px;

ATENÇÃO

PRIMEIRO: Os valores como da margin que vem 4 valores seguidos (1px 1px 1px 1px;) tem sentido horário, sendo o primeiro o topo, ou seja:

margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda);

SEGUNDO:Você perceberá que todas as medidas estão em PIXELS (PX), porém existem outros tipos de medidas, que explicarei em outro post, ok?

Por enquanto é isso.
Demorei mais do que o esperado para postar pois foi trabalhoso achar uma formatação que me sastifizesse, não sei bem se essa o fez, mas acho que ficou razoável.
Dúvidas, sugestões e críticas (inclusive de formatação, por favor), por favor, comentem!

Até a próxima!

Elementos do Blogger

2008-01-28T16:18:00.000-02:00

Continuando a 'saga', hoje será sobre os elementos básicos do Blogger .

Clique na imagem para amplia-la

Body: esse é o corpo do blog. Aqui você muda o fundo, coloca uma imagem, por exemplo.
Header: cabeçalho, onde costuma ficar o título do blog. O topo do blog.
Outer-wrapper: a área total da postagem e das colunas.
Main-wrapper: coluna de posts.
Sidebar-wrapper: coluna. Nova coluna costuma ser newsidebar.
Footer: Rodapé do blog.

O Outer-wrapper nem sempre aparece, esse elemento pode se confundir com o background, se você deixá-lo sem cor ou borda como nesse site.

Body e Outer-wrapper te confundiu? Então olhe a imagem abaixo para entender melhor!

Clique na imagem para amplia-la!

Esse post, como vocês viram, foi bem simples! Só para situar mesmo! No próximo explico melhor os "subelementos", ou seja, os elementos dentro de cada um dos vistos hoje!

Até lá!

Margin X Padding

2008-01-23T16:06:00.001-02:00

Hoje a Ariane explicou uma diferença que até parece simples (depois que se entende), mas que deixa muita gente de cabelo em pé - inclusive a mim, e como prometi no post anterior vou postar umas definições básicas dos códigos. Infelizmente não hoje, por que estou em outra cidade(postando de pc alheio rs), mas até eu voltar e ter um tempo para fazer um post decente não deixem de entender a diferença de margin e padding.

Diferença entre margin e padding

Conheça o código

2008-01-19T19:20:00.000-02:00

A gente que bloga e adora mexer no template, querendo ou não, precisa ter um mínimo de conhecimento de HTML/ CSS e dos códigos do Blogger, saber pelo menos do que se trata o básico.
Vou começar a postar uma "saga" de dicas desse tipo, vou colocar sobre o marcador de Códigos Básicos, ok? Hoje falaremos um pouco sobre tags.

TAGS

Tag é etiqueta em inglês, é ela que informa ao navegador como deve ser exibido seu blog.
Ela tem o seguinte forma < > quando aberta e para ser fechada .

Algumas tags:

<p> parágrafo
<h1> <h2> <h3> títulos (quanto maior o número menor a fonte do título)
<b> ou <strong> negrito*
<i> ou <em> itálico*
<strike> ~~tachado~~
<u> sublinhado
<br> quebra de linha (sem fechamento)
&nbsp espaço em branco
<ul>...</ul> <ol>...</ol> é a tag que indica listas
<a>...</a> link
<span>...</span> para estilizar texto

* Essas tags tem duas opções, mas a mais usada é a segunda, pois os leitores de texto para deficientes reconhecem a strong e em.

Bom essas são as tags que eu conheço, mas vou adicionando mais assim que souber, quem quiser contribuir eu agradeço também! Lembrem-se que eu não sou expert em códigos, então se virem algum erro, fiquem a vontade de me corrigir!

Esse é começo da saga, vou postando devagar.

Até mais, gente!

Modificar título da sidebar

2008-01-19T18:55:00.000-02:00

Uma modificação que, se bem usada, deixa o blog bem bonito é a do o título da sidebar (coluna), que é o que vou ensinar como hoje. Vamos lá:

1º Passo

A primeira parte é procurar por esse trecho do seu código (não precisa expandir o modelo de widget) e colar o que está indicado em vermelho:

/* Sidebar Content
-----------------------------------------------
*/
.sidebar {
color: $sidebartextcolor;
line-height: 1.8em;
margin:
5px 0 10px 0;
}
.sidebar h2 {
color: #FFFFFF;
background: #000000 ;
margin: 30px 0 10px 0;
border: 1px solid $bordercolor;
line-height: 1.5em;
padding: 10px 0 10px 0;
text-align: center;
}

.sidebar ul {
list-style:none;
margin:10px 0 10px 0;
padding:0 0 0;
}
.sidebar li {
margin: 5px 5px 5px 10px;
padding:10px 5px 5px
10px;
text-indent:-15px;
line-height:3px;
}
.sidebar
.widget,{
padding:0 0 1.5em;
}

ATENÇÃO: Não se esqueça que é para colar apenas o que está em vermelho, o resto é apenas para você se situar.

Agora para modificar:

.sidebar h2{
color: COR DA FONTE
background: COR DO FUNDO, SE PREFERIR PODE POR UMA IMAGEM
margin: MUDE OS VALORES PARA SE ENCAIXAR NO SEU LAYOUT
border: BORDA, MODIFIQUE COMO PREFERIR
line-height: DEFINE A ALTURA DA LINHA (não é o tamanho da fonte)
padding: A DISTÂNCIA ENTRE O TEXTO E AS BORDAS (mesmo que invisiveis)text-align: ALINHE O TEXTO COMO PREFERIR (CENTER, LEFT-esquerda OU RIGHT - direita)
}

Deu para entender o que é "padding", "text-align" e "margin? Ficou meio confuso, né? Vou criar um post e tentar familiarizar mais os elementos do Código CSS, vou tentar fazer um bem simples.

No mais, acho que dá para se modificar direitinho o título da sua coluna, né? Qualquer dúvida já sabem, só dizer!

Até a próxima!

Recomendo

2008-01-18T21:08:00.003-02:00

Pradonizando Blockquote

2008-01-18T08:26:00.000-02:00

Já imaginou se fosse possível destacar sempre de um mesmo jeito trechos do seu blog? Que sempre que você quisesse chamar a atenção para determinada coisa ela aparecesse em todos os posts da mesma forma?
Seu blog ficaria com um padrão o que o deixaria bem mais bonito, não seria aquela bagunça de "destaques".
Isso é possível e é bem simples, gente! Através do blockquote, que eu uso muito por aqui. Não sei se tem um tempo certo para ele, mas é a aspas que aparece na barra de ferramentas do editor de postagens do Blogger. Ou seja, isso:

Prazer, eu sou um blockquote!

Mexendo no html do código, como eu vou ensinar agora, vamos lá!

1º Passo

Vá até o Editor de Html do seu blog - não precisa expandir modelos widgets , e encontre esse trecho do blog:

/* Posts
-----------------------------------------------
*/
h2.date-header {
text-align: left;
margin: 10px 0 0 10px;
}
.post {
margin: 10px 10px 60px 20px;
padding-bottom:3.0em;
background: url(http://i257.photobucket.com/albums/hh226/criarecria/marcam1.jpg) no-repeat top left;
}
.post h3 {
background: url(http://i257.photobucket.com/albums/hh226/criarecria/marcam1.jpg) no-repeat top right;
margin: 5px 0 10px 10px;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:2.0em;
text-align: center;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post p {
margin:0 0 .75em 5px;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
background: url(http://i257.photobucket.com/albums/hh226/criarecria/divam1.jpg) no-repeat center bottom;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px dotted $bgcolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

2º Passo

Substitua o que está em negrito pelo trecho abaixo:

.post blockquote {
background: #FFFFFF;
padding:0 5px 10px 10px;
margin:10px 5px 10px 10px;
font-size: 90%;
border: 1px dotted #000000;
}

3º Passo
Agora é hora de personalizar o seu blockquote.

Background: Aqui é o fundo do seu blockquote, você pode por uma cor, ou uma imagem. Se preferir pode também por uma cor e uma imagem. Para saber como você pode modificá-lo clique aqui.
Padding: distância entre os conteúdo do blockquote e as bordas.
Margin: distância entre o blockquote e as bordas da coluna de post.
Font-size: tamanho da fonte dentro do blockquote. (90% é o que está aqui)
Border: borda do blockquote. Para saber como você pode modificá-lo clique aqui.

ATENÇÃO: Lembre-se que para vizualizar antes de salvar é necessário que na página inicial do seu blog tenha um blockquote.

4º Passo

Quando estiver do jeito que você queira é só salvar, e prontinho!
Sempre que quiser que tenha esse destaque, selecione o trecho e clique na aspas do editor, ou use as tags

e para fechar

.

É isso, gente! Deu para entender, qualquer coisa já sabem, só perguntar!

Contato

2008-01-18T04:18:00.001-02:00

Quer criticar, reclamar, elogiar, 'sugestionar', use o formulário abaixo e boca no trombone!
Ou quem saber que um layout personalizado, só para você, com a sua cara!?
Então coloque no campo de mensagem seu msn, e como quer o layout.
Retornarei o mais rápido que puder!
Obrigada!

Menu CSS - Imagem (III)

2008-01-18T02:35:00.001-02:00

Conseguiu colocar o menu no seu blog? Personalizou os links? Deu tudo certo até agora, mas você quer mudar a cor do menu?
Esse é um passo um pouco mais trabalhoso, mas relaxe que não tem nada de muito complicado, não! Vamos lá!

Se ainda não fez o download de imagem, é hora de fazer! AQUI!

Perceba que a imagem é tem duas, uma em cima e outra embaixo, sendo que a primeira se trata do menu normal e a debaixo do menu selecionado. Preste atenção nisso na hora de mudar de cor, ok?

ATENÇÃO: Para visualizar as imagens de exemplo clique nelas!

1º Passo

Abra com o Photoshop a imagem do seu menu (a imagem maior, tabrightF.gif). Ela estará em .gif, o que nos impede de mexer com ela. Então, é preciso que você a selecione e copie para um arquivo novo.
Para selecioná-la aperte M no teclado e clique com o botão direito em cima da imagem, coloque em Selecionar Todas (a primeira opção). Aperte Ctrl + C.
Abra uma nova imagem e aperte Ctrl + V.

2º Passo

Agora vamos criar uma nova camada de ajuste. Então, embaixo da janela de camadas procure pela 4ª opção (um círculo preto e branco), nela procure por “Cor Seletiva” (2º opção da 3º parte) como mostra a imagem. E vá mexendo nas opções até encontrar a cor que você quer.

3º Passo

Para chegar a cor da imagem eu mexi em NEUTRO (0; 0; +100; +49), como mostra a imagem.

Atenção: Não esqueça de marcar o campo Visualizar ali do lado direito da janela, ou você não verá o que está fazendo! :)

4º Passo

Conseguiu chegar a cor que queria? Então você precisa salvar essa nova camada de ajuste para carregá-la na outra imagem. Se fechou a janela de cor seletiva, clique duas vezes no círculo preto e branco ao lado da camada de ajuste.
Não achou o botão salvar, olhe na imagem:

Atenção para onde está salvando o arquivo, daqui a pouco usaremos ele!

5º Passo

Até aqui tudo bem? Vamos alterar a outra imagem (tableftF.gif), a fininha. Lembre-se que ela está em .gif, logo teremos que refazer o primeiro passo.
Já está com imagem pronta, então repita o 2º passo (criar uma nova camada de ajuste de cor seletiva) só que agora, ao invés de você mexer nos botões vai apenas carregar as definições que salvou. Uma imagem para ajudar:

6º Passo

Pronto, é isso! Agora salve a imagem, de preferência como .gif, porque preservará a transparência e você pode por o menu em qualquer fundo.
Depois é só upar a imagem e substituir nos links do menu. No outro tópico já coloquei isso, mas vou por de novo para ficar mais fácil, ok?

COLOCANDO AS IMAGENS NO MENU

Procure esse trecho do código e coloque a url no lugar indicado.

#menu a {
float:left;
background:url(COLOQUE AQUI O
MENU FINO) no-repeat left top;
margin:0;
padding:0 0 0
4px;
text-decoration:none;
}
#menu a span
{
float:left;
display:block;
background:url(COLOQUE
AQUI O MENU MAIOR) no-repeat right top;
padding:5px 15px 4px
6px;
color:#FFFFFF;
}

E é isso, tomara que você tenha conseguido! Até a próxima!

LINKS E FUNÇÕES MENU (II)

2008-01-10T14:47:00.000-02:00

Já sabe como colocar o menu no blog? Então é hora de aprender a personalizá-lo. Vamos primeiro com os links, ok? É bem simples. Vamos lá!

Encontre esse trecho no blog:

<div id='menu'>
<ul><li><a href='ENDEREÇO DO SEU BLOG AQUI'><span>’HOME’</span></a></li>
<li><a href='AQUI COLOQUE A URL'><span>’O QUE VAI APARECER’</span></a></li>
</ul>
</div>

Essa parte em negrito é cada um dos itens, sempre que quiser adicionar um é só copiar essa arte e colar antes de </ul>. A ordem que aparecerá no seu blog é a que estiver nesse código, então se quiser que fica entre um e outro é só colar lá. Ex: Se eu quero por um link entre a Home o negrito eu tenho que colar entre um e outro, mas cuidado quando forem fazer isso, gente!

ATENÇÃO: Não tire os apóstrofos (‘) e cuidado com as tags (<li> <a> etc), se alguma sair do lugar, ou for apagada o código não funcionará!

Acho que ficou confuso, qualquer dúvida só dizer! E sobre links é isso, vamos para as funções do menu agora, ok?

-------------------------------------------------

/* Menu
-----------------------------------------------
*/
#menu {
float:left;
width:100%;
background:$bgcolor;
font-size:93%;
line-height:normal;
border-bottom:1px solid $bgcolor;
margin: 0 0 0 0;
}
#menu ul {
margin:0;
padding:10px 10px 0
50px;
list-style:none;
}
#menu li
{
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menufino-1.jpg) no-repeat left top;
margin:0;
padding:0 0 0
4px;
text-decoration:none;
}
#menu a span
{
float:left;
display:block;
background:url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menu-1.jpg) no-repeat right top;
padding:5px 15px 4px
6px;
color:#FFFFFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac
\*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {color:#000000;}
#menu a:hover {background-position:0% -42px;}
#menu
a:hover span {background-position:100% -42px;}

O que está em cinza é melhor não mexer, ok?

O que está em vermelho é modificável:

background:$bgcolor; esse é o fundo do menu, atrás das imagens. Ai está com o fundo da sua página (background color), mas você pode por preto (#000000), ou uma cor a sua escolha. Pode ainda simplesmente tirar esse código, assim não terá fundo, será transparente.

border-bottom:1px solid #FFFFFF; essa é a borda do menu. Está só embaixo e preto, você pode por borda inteira (border), mudar a largura da borda, e a cor. Pode também deixar sem borda, colocando zero na largura, ou deletando essa linha.

float:left; essa é a "flutuação" do menu. Se você por 'right' ele ficará direita para esquerda. Não recomendo que ponha center, mas pode por para ver o que acontece!
background: url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menufino-1.jpg) no-repeat left top; aqui é onde você deve por a imagem. No primeiro desse, ponha a imagem mais fina, no segundo a imagem maior. Você pode tirar a imagem se preferir, e deixar apenas uma é só substituir por "#número da cor escolhida" o que está em vermelho.

color:#FFFFFF; aqui é a cor da fonte do seu menu quando não está selecionado. Ponha a de sua preferência.

#menu a:hover span {color:#000000;} aqui é a cor da fonte com o mouse em cima do menu, ponha a cor de sua escolha.

O que está em azul não tem no código, mas você pode adicionar se quiser ajustar melhor o menu: jogar um pouco para direita, aumentar o espaço para baixo ou para cima, e coisas assim. Para modificar adicione o código no lugar indicado e vá modificando, lembrando que os números estão no sentido horário, ou seja:

margin: 1px (topo) 1px (direita) 1px (abaixo) 1px (esquerda);

Você pode colocar qualquer número ou ainda -1px. Entenderam?

Agora acho que é isso, mais uma vez não sei se me fiz me entender. Sintam-se a vontade para perguntar! (Ou reclamar, sei lá...rs)

INSTALANDO TEMPLATES

2008-01-04T14:52:00.000-02:00

Entre em MODELO na sua conta do Blogger, procure pela opção EDITAR HTML, vai encontrar acima da caixa de texto lá uma opção para expandir modelos de widget, selecione-a.

Feito isso faça upload do template* direto do seu computador.

ATENÇÃO: LEMBRE-SE QUE ISSO FARÁ COM QUE TODAS AS SUAS WIDGETS SEJAM PERDIDAS! (OS POST NÃO SE PERDEM)

PARA NÃO PERDÊ-LAS VISITE!

Por isso faça backup do seu template atual antes de trocar. Ainda não há uma maneira simples de fazer isso, você precisará abrir elemento por elemento e copiar o conteúdo para algum lugar (Bloco de Notas é o melhor para isso, por ser leve!).

*O arquivo .xml!

2008-01-01T15:28:00.000-02:00

Obrigada por entrar em contato!
Retornarei o mais breve possível, enquanto isso sinta-se a vontade para continuar passeando pelo site!

LOCALIZANDO NO HTML

2007-12-30T20:21:00.000-02:00

É bem complicado procurar determinada parte do html, ainda mais quando não somos muitos íntimos da seqüencia, então para não precisar olhar o template inteiro faça o seguinte.

Abra o Bloco de Notas, que é bem levinho e muito útil, copie seu código e cole lá. Aperte CTRL + F e uma janelinha irá se abrir, escreva um pedaço do que está procurando e pronto. Só não escreve muitas coisas, por exemplo, se está procurando por:

.sidebar h2{
color: #FFFFFF;
margin: -5px;
line-height: 1.5em;
padding: 10px 0 10px 0;
text-align: center;}

Coloque apenas sidebar h2, ou apenas sidebar. Preste atenção se está para procurar acima ou abaixo, ok?
Depois copie e cole o código do Bloco de Notas para o Editor do Blogger e pronto.

Se você não quiser abrir o Bloco de Notas você pode fazer isso direto no navegador, no IE e o Mozilla também é CTRL+F, mas aqui (uso o IE) tem hora que dá tilt e não encontra, dai tenho que usar o Bloco de Notas mesmo!

MENU HORIZONTAL (I)

2007-12-30T20:06:00.001-02:00

Você quer colocar um menu horizontal no seu blog? Mas acha que é muito complicado, então se acalme que não tem nada de difícil!
Se você quiser um menu sem imagem, ou com uma imagem contínua (diferente do meu que são como abas) eu recomendo o site da Ariane (my teacher). Aqui eu vou explicar como fazer um tipo esse meu! É bem simples, vamos lá!

Esse menu é feito a partir de um site (http://www.cssmenumaker.com/), lá você encontrará vários tipos de menus, só que agora o site é pago (quando eu fiz não era), então vou ensinar tudo por aqui mesmo!

1º Passo

Baixe as imagens e as hospede no site de sua preferência.

Download!

OBS: Se você quiser mudar as cores da sua imagem ou algo assim, não hospede as imagens! Vá para a PARTE III! Os códigos do menu estarão com as cores que uso aqui, só para testar, ok?

2º Passo

Entre no editor de html do seu blog e procure por essa parte do código. (Não sabe como procurar um código, clique AQUI!)

Copie o código em vermelho, cole depois de HEADER e antes de OUTER, como indicado :

* Header
-----------------------------------------------
*/

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
width:900px;
height:140px;
border: 0px
dashed $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

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

#header img {
margin-$startSide:
auto;
margin-$endSide: auto;
}

/* Menu
-----------------------------------------------
*/
#menu {
float:left;
width:100%;
background:$bgcolor;
font-size:93%;
line-height:normal;
border-bottom:1px solid #000000;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menufino-1.jpg) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background:url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menu-1.jpg) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFFFFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {color:#000000;}
#menu a:hover {background-position:0% -42px;}
#menu a:hover span {background-position:100% -42px;}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;

3º Passo

Copie o código vermelho antes de content-wrapper (se você quiser ele depois de header, como está o meu), como indicado:

<div id='menu'>
<ul>
<li><a href='SEU BLOG AQUI'><span>Home</span></a></li>
<li><a href='http://criarecria.blogspot.com/'><span>Recomendo</span></a></li>
<li><a href='SEU LINK AQUI'><span>LINK</span></a></li>
<li><a href='SEU LINK AQUI'><span>LINK</span></a></li>
</ul>
</div>
<div id="'content-wrapper'">

Atenção: Se quiser por o código antes de HEADER, cole o que está em vermelho log acima de

<div id='header-wrapper'>

4º Passo

Visualize. Deu certo?
Se sim é hora de começar a mexer no código para personalizar.

Como esse post já está para lá de extenso vou separá-lo em 3 partes! Sendo essa a primeira, a SEGUNDA a personalização do link e os detalhes do menu, e a TERCEIRA a imagem do menu!
Escolha o que quer fazer agora e vamos continuar!

Não deu certo!? Limpe as edições e tente de novo, se continuar não conseguindo, me avise que eu tento te ajudar, ok?

Pincel Novo c/ PS Aberto

2007-12-30T18:44:00.000-02:00

Se você acabou de instalar um brushe, está com o Photoshop aberto e quer usar o novo brushe sem ter que reiniciar o programa faça o seguinte:

1º Clique na ferramenta Pincel, como mostra a imagem acima!

2º Abra o seletor de pincéis.

3º Aperte a seta indicada na imagem.

4º Depois em Substituir Pincéis (Não sei como está em Inglês, mas perceba que é o a 4ª opção na 5º separação)

Atenção: Isso fará com que os pincéis novos substituam os que estavam antes, caso tenha pincéis não salvos lá, salve os antes.

DICA: Se você não quer substituir os pincéis, mas sim que os novos abram junto com os que já estão aberto coloque em Carregar ao invés de Substituir (2ª opção na 5ª Separação)

INSTALANDO BRUSHES

2007-12-30T18:21:00.000-02:00

Os brushes costumam vir no arquivo original, ou seja, .ABR.
Dos que já baixei poucos vieram compactados (zipados) e menos ainda vieram como imagem (.jpg, .bmp etc).
Para instalar esse tipo de arquivo é muito simples, mesmo assim vou explicar bem detalhado, ok? Vamos lá!

1º Passo
Abra a pasta onde você baixou o arquivo, deixe-a aberta.

2º Passo
Abra a pasta onde está instalado seu Photoshop, provavelmente estará em:

C:\Arquivos de programas\Adobe\Photoshop (* Versão do seu PS)

Você não sabe onde está instalado?
Não achou no local acima? Então, faça o seguinte, vá até onde está o ícone do
seu PS (pode ser na Área de Trabalho ou no Menu Iniciar), clique com o botão
direito nele, depois em Propriedades e depois Localizar Destino, assim a pasta
dele abrirá automaticamente.

3º Passo

Encontrada e aberta a pasta do PS procure pela pasta Predefinições (Presets) e dentro dela vá a Pincéis (Brushes), deixe a aberta.

4º Passo
Volte a pasta onde você baixou os Brushes (que você deve ter deixado aberta), copie-os e cole na pasta de Pincéis do PS.

DICAS:

1ª Eu sempre deixo uma cópia dos brushes na pasta que eu baixo, para depois gravá-los em cd e não perdê-los. Mas se você preferir pode apagar e deixar apenas os que já estão no PS.

2ª Se você não se importa em manter uma cópia dos brushes em outro local, você pode baixar o arquivo direto na pasta do Photoshop e poupar tempo. Só confirme se o arquivo já está em ABR., e não zipado!

É isso, meu primeiro tutorial, acho que acabou ficando explicadinho demais espero não ter confundido ninguém.

OBS: Você já está com o PS aberto? Não precisa fechar e abrir de novo para que os pincéis apareçam, não! CLIQUE AQUI E APRENDA COMO!

INSTALANDO FONTES

2007-12-30T18:02:00.000-02:00

1º Passo

As fontes costumam vir compactadas logo a primeira coisa a fazer é descompactá-las. Aperte com o botão direito sobre ela e procure por Extrair, isso varia de computador para computador, então, você vai ter que descobrir como é no seu. Eu uso o Winzip, e com ele é assim: Botão direito e Winzip, depois “Extract to here”.

2º Passo

Copie os arquivos com a extensão .ttf para a pasta:

C:\WINDOWS\Fonts

E pronto!

Brushe - All Star

2007-12-30T15:14:00.002-02:00

Finalmente fiz meu primeiro brushe!! Eeeee!! Não ficou muito bom, é verdade...mas é o primeiro gente!
Os Brushes eu decidi por como posts mesmo, acredito que não serão muitos mesmo. rs
Vamos deixar de delongas e mostrar para vocês o tal brushe!

TEMA: All Star - 9 pincéis - Download (99kb)

TEMPLATES

2007-12-30T14:26:00.003-02:00

Para visualizar os templates você tem três opções:
abrir todos;
por categoria;
abrir apenas um;

Qualquer uma delas abrirá em uma página externa.
Acredito que assim facilita a vida de todos, pois não deixa o blog muito pesado e abrirá mais rápido para você. Talvez se você tiver banda larga isso não faça diferença, mas para quem usa discada faz.

Para saber como instalá-los clique aqui!

Se já sabe como instalá-los, mas não como o fazê-lo sem perder as widgets visite.

TEMPLATES (TODOS)

Místico
Fada Azul - (ver em uso) - (Download)
Fada Azul/Verde - (ver em uso) - (Download)
Andarilho - (ver em uso) - (Download)

Diversos
Pergaminho I - (ver em uso) - (Download)
Flor Laranja - (ver em uso) - (Download)

Marcas / Famosos
All Star - (ver em uso) - (Download)

Nome:
E-mail:
Seu site:
Mensagem: