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>