Backgrounds para Blogger

Salvando imagens no Photo Filtre

2009-08-28T16:53:00.000-07:00

No post anterior ficou faltando falar de como salvar a imagem no Photo Filtre. Então, aí vai: ao editar a imagem no programa, trabalhando com mais de uma camada, você deverá unir essas camadas em uma só imagem antes de salvá-la. Para tanto, vá na barra de ferramentas, escolha a opção Camada/Juntar todas as camadas. Desse modo, as camadas sobrepostas se transformam em uma só imagem, pronta para ser salva no formato JPG, PNG ou GIF.
Arquivo/Salvar Como. Escolher o nome e a extensão da imagem e dar ok. Se aparecer uma janelinha do programa perguntando sobre Tipo de Filtro, assinalar Nenhum como resposta.
Para fazer o download do PhotoFiltre, veja as opções e alguns tutoriais no site http://www.photofiltrestudio.com.br/
Na aba Download você encontra a última versão completa do programa, bem como as instruções para sua instalação e a versão em Português.

Uma dica sobre o PhotoFiltre

2009-08-26T16:52:00.000-07:00

O nosso Blog dá dicas sobre Backgrounds e Templates, certo? Mas tem muita gente perguntando sobre como criar/editar imagens até virar um Background. Sinceramente, o único editor de imagens que conheço um pouquinho é o Paint Shop Pro que tem muitos sites com tutoriais pela Internet, é só digitar no Google e vai aparecer muita coisa legal.
Tem um outro programa, o PhotoFiltre Studio X, que a galera anda usando para fazer esses Backgrounds. Hoje dei uma olhada no programa, acho que entendi algumas de suas noções básicas, e fiz uma espécie de tutorial ensinando algumas dessas funções que talvez possam ajudar aqueles que nunca abriram um programa editor de imagens.
Está em slides e para ver, clique neste link

Cores e o modo de encontrá-las e harmonizá-las

2009-08-24T16:29:00.000-07:00

Todos aqueles que utilizam programas editores de imagens do tipo Paint Shop Pro, Photo Shop, PhotoFiltre e outros, sabem que a escolha das cores na hora de criar ou editar uma imagem é fundamental para um bom resultado, mas não é tarefa das mais fáceis. Embora cada um de nós tenhamos nossos recursos para encontrar sempre a melhor combinação de tons, sempre é bom acrescentar mais uma dica. Refiro-me a um site da Adobe que é mão na roda mesmo na questão do dilema " com-que-cor??"
O site: http://kuler.adobe.com/
Como o site possui várias maneiras de obter cores e nuances, vale a pena assistir o vídeo que ensina como explorar seus recursos, veja:

Não se esqueça de registrar-se para armazenar suas cores lá no site, ok?

Sidebar/Menu com imagens

2009-08-21T21:06:00.000-07:00

Algumas dicas para colocar imagens no menu lateral do blog, assim como vemos ao lado com as imagens de Tutoriais e Favoritos. Cliquem no endereço abaixo para as instruções. Espero que gostem e que tenha ficado mais simples nessa forma de apresentação. Escrevam e me digam se gostaram :)
Customizando a sidebar/menu com imagens.

Sem comunicação, sem atualização.... :(

2009-08-15T12:20:00.000-07:00

Pessoal, por problemas no meu Speedy, encontro-me isolada do mundo virtual, impossiblitada de atualizar meus blogs. Acredito que tudo deverá se normalizar em 48 horas, segundo as últimas previsões da Telefônica.
Agradeço a compreensão e tenho certeza de que semana que vem poderei estar atualizando normalmente meus blogs.
Apenas gostaria de aproveitar o espaço para dar uma dica a quem for morador do Estado de São Paulo, em cidades cuja única opção de conexão Banda Larga seja a Telefônica: antes de mudar-se de endereço, informe-se muito bem junto à Telefônica sobre a instalação do Speedy em sua nova residência, pois a coisa é meio complicada, mesmo em se tratando da reinstalação de seu número antigo + serviço Speedy....Ninguém merece....
Sônia Regina

Inserindo Gifs animadas no seu blog

2009-07-21T09:22:00.001-07:00

Quando inserir gifs em seu blog, faça-o através da hospedagem da imagem em um hospedeiro de imagens. Inserindo-as pelo Blogger não irão se mexer, pois são armazenadas automaticamente em álbuns do Picasa e no Picasa as gifs não funcionam. Portanto, depois de hospedar sua gif no Photobucket ou ImageShack, por exemplo, é só copiar o link da imagem diretamente no HTML do post ou nos elementos de páginas. O código contendo o endereço da imagem a ser inserida é o seguinte:
<a href="endereço do seu site" target="_blank"><img src="endereço da imagem"></a> target=”_blank” é para que a página seja aberta em uma nova janela ou aba.

Templates Formatados: Denin e Scribe com Joaninhas e Bebês

2009-07-18T12:19:00.001-07:00

Demo Download	Demo Download
Demo Download	Demo Download

As miniaturas acima são dos templates do Blogger, Scribe e Denin, formatados com as imagens de joaninhas e de bebês. No template Denin a widget Footer foi removida. No scribe o footer.continua.
Para fazer a instalação de qualquer um desses templates é seguir os mesmos passos de sempre:
1 - Se você já possui um blog, salvá-lo como medida de precaução, indo na aba Layout/Editar HTML e clicando na opção Baixar Modelo Completo:
2 – Depois de salvo o seu blog, instalar o novo template, indo na opção abaixo, na mesma página, clicando no botão Procurar para encontrar o arquivo do novo template salvo no seu computador. Clicar em Fazer Upload e Salvar Modelo.

3 – Os elementos de página do modelo anterior serão excluídos e o Blog avisará dessa exclusão, mas você poderá seguir com a instalação na opção Salvar Modelo e recuperar esses elementos que foram salvos anteriormente. Veja no passo abaixo como salvar esses elementos de página (widgets)

4 – Os elementos de página (widgets) como Marcadores e Seguidores do Blog não são excluídos na mudança de templates, na reinstalação desses elementos seu conteúdo aparecerá de novo, mas aqueles que possuem textos escritos, Java/Html, contadores, imagens, etc, podem ser salvos facilmente: é só copiar os códigos desses widgets em blocos de notas, salvá-los em suas pastas e na instalação do novo template é só adicionar novamente os elementos e copiar em cada um o que foi salvo nos blocos de notas. Se forem muitos elementos, você até pode fazer um screenshot da tela para registrar a sequência em que se encontravam antes.

5 - Para os que instalam o template pela primeira vez é seguir o passo 2.

Código de instalação do Background no Template

2009-07-13T09:01:00.000-07:00

Pessoal, a questão do código de instalação do template está sendo meio complicada para alguns que me escrevem. Vou colocar abaixo o código tal como deve ser colado no Gadget (Elementos de Página) HTML/JAVASCRIPT:

Formatando o Template Scribe: Final - Formatando as imagens do meio e do final do template.

2009-05-29T12:25:00.000-07:00

Neste Post, vamos terminar a nossa formatação, colocando as duas imagens restantes: a do meio e a do final do template.
Quem quiser aproveitar as imagens para exercício, é só salvar abaixo, clicando em cada uma delas para salvá-las em seu tamanho original, ok:
Esta é a imagem do meio: belosolhos2. Tem 820 px de largura e 96 px de altura:

Esta é a imagem do final do template: belosolhos3. Tem 820 px de largura e 148 px de altura:

E esta é a imagem inteira, antes de ser cortada:

E agora vamos às explicações de como fazer. Olhe o screen abaixo e clique sobre ele para aumentar e ver melhor os detalhes:

Acredito que o screenshot acima fala por si: na verdade, os três pedaços da imagem possuem seus endereços colocados próximos uns dos outros e de forma bem simples. Observe a imagem e faça igual. Em #main-bot está contida a imagem do final, a imagem 3, com as medidas de largura e altura. Em #wrap2 você coloca a imagem do meio e a medida da largura apenas. Observe que o primeiro endereço é o do topo, que já foi colocado no começo do tutorial e que está contido em #main-top. Portanto, ele não segue a ordem de imagem 1, imagem 2, imagem 3. Pelo que você aprendeu, deverá colocar desse modo: imagem 1, imagem 3, imagem 2.
É muita explicação, mas é fácil também. O primeiro template parece difícil, mas depois fica mais simples e legal de fazer.
Espero que tenha sido útil para vocês, que encontrem nessas informações mais um caminho de aprendizagem, de estímulo para outros assuntos, que as meninas e os meninos possam criar suas próprias formatações, personalizando seus temas, cores, imagens, etc....

Ficaria muito feliz se mandassem os endereços de seus blogs com sua formatação.

Formatando o Template Scribe: 3 - Formatando o background intermediário.

2009-05-29T11:39:00.001-07:00

Antes de prosseguir para a imagem do meio, quero explicar mais um detalhe de background que estava no screenshot anterior. Preste atenção nessa imagem abaixo:

Este é um pedacinho do Template Scribe do Blogger, sem alterações nas imagens. Observe que o background, que já aprendemos a modificar, é uma imagem marrom estampada no mesmo tom. Acima dela, para onde a seta aponta, existe um segundo background,de cor sólida marrom escuro, como se fosse uma folha intermediária entre o background e a frente, em tom de papel envelhecido. Pois bem, é bem este back intermediário que vamos aprender a formatar, antes de prosseguir . Para tanto, observe o screen abaixo. É simples:

Observe que essa parte do código já é conhecida de vocês, afinal foi um pouco mais abaixo que formatamos o cabeçalho, a primeira parte da imagem, lembram-se? É só olhar no post anterior...
As alterações que vamos fazer estão contidas em #outer-wrapper, ainda dentro de Layout (acompanhem pelo screenshot). Daí que podemos manter a cor sólida, como está no original, alterando apenas o código da cor.
No original está assim: background-color:#473624 Se quiser modificar o tom para vermelho, por exemplo, é só fazer a alteração dos números, ficando assim:
background-color:#c00000. Mas caso queira incrementar, utilizando imagem, então a mudança requer o endereço da imagem utilizada e a informação repeat para que a imagem cubra a superfície inteira sem emendas, exatamente como foi feito na primeira etapa, quando aplicávamos o background no template. Agora, o mais importante, a meu ver, é que a medida de largura (seta menor) precisa ser modificada, mesmo que você não altere a cor ou coloque imagem nesse background. E por que? Se você está formatando o template com uma imagem de 820 pixels de largura, inclusive já informou isso quando colocou a imagem do topo, é importante informar essa medida em todas as demais imagens que acompanham a largura do template. Assim, observe, o template original informa uma largura de 700 pixels, logo, é necessário que se modifique essa informação, atualizando-a para o tamanho da imagem que foi colocada no topo do template, no caso 820 px, pois estamos usando como exemplo este que eu fiz para demonstração: http://comtemplatest.blogspot.com/

Formatando o Template Scribe: 2 - Formatando a imagem do topo, cabeçalho ou header.

2009-05-29T09:14:00.000-07:00

A imagem que faz o template é, na verdade, cortada em 3 pedaços para depois ser aplicada nos lugares certos no código. Então, deveremos ter o pedaço correspondente ao cabeçalho ou top, ao meio e ao final do tenplate. Esses 3 pedaços devem receber nomes distintos e, assim como as demais imagens, precisam também ser hopedadas para que usemos seus endereços no código.Já colocamos o fundo ou background, visto no post anterior. Ah, antes que me esqueça: antes de salvar o modelo, você pode usar o botão VISUALIZAR para ver se ficou tudo certinho. Em caso positivo, salve o modelo e continue. E nunca se apavore, pois seu blog é apenas para estudos, por enquanto, logo irá aprender direitinho, dominar as informações e terá mais segurança para fazer. Por mais que existam explicações, cabe a cada um a tarefa de explorar e aprender mais e mais,sem medo. Esta parte, aliás, é o melhor de qualquer aprendizagem na vida ;)
Então, deixando a filosofia de lado, vamos lá: para não confundir muito quem ainda está começando, vamos primeiro explorar o top ou cabeçalho, a primeira parte da imagem que foi cortada em três. Para tanto, vamos ao código html, procedendo do mesmo modo explicado no post anterior (sempre olhe os posts anteriores). Olhe o screen do código e clique sobre a imagem para ampliá-la e ver melhor os detalhes:

Este pedaço do código traz Layout em seu título e vamos explorar o que se encontra contido em #main-top, conforme você enxerga nos grifos e nas setas do screen. A parte anterior a esta será tema de outro post, assim fica mais fácil para os que estão começando...
Observe que a primeira medida tomada foi modificar no código o tamanho da imagem que vou utilizar. Desse modo, se a imagem, ou seja, se o primeiro pedaço dessa imagem mede 820 pixels de largura e 302 pixels de altura, informo esses dados no código, no exato lugar assinalado pela setinha vermelha, meio curvada. Depois de dizer o tamanho da figura, vou dizer onde ela se encontra hospedada, fornecendo o endereço, conforme está no screenshot, assinalado pela última seta, observando que agora a imagem é estática, não se repete na tela, portanto aviso ao código, utilizando a expressão no-repeat (grifado em vermelho). Aliás, no código original já está escrito, portanto nem precisará mexer. Quer tentar fazer o seu? Quer aproveitar uma imagem que fiz para o seu exercício? Se quiser, salve-a abaixo, clicando sobre ela para salvar no tamanho original, ok? E qual é o tamanho dela? Afinal preciso informar isso ao código, certo? Para que não tenham trabalho, aí vão as medidas: 820 px de largura(width) e 276px. de altura (height). Está simples, não está? Clique sobre a imagem abaixo e salve-a no tamanho original, pois este é apenas um modo de visualização. Sim, este é o primeiro pedaço, ficará no topo ou cabeçalho do template e chama-se belos olhos por razões que verão com seus belos olhos....:)

E observe também que o nome da imagem, belosolhos1, tem a ver com a posição da imagem no template, ok? Mas se quiserem mudar, não deixem de colocar um identificador do tipo: topo/meio/fim ou qualquer outro que identifique a posição desses pedaços no template. Parece uma explicação meio óbvia, mas...... rererererer...........
Então, podem treinar à vontade: coloque os endereços e medidas no código e utilize a opção VISUALIZAÇÃO para ver se ficou certinho. Não, não se preocupe com o restante que está estranho, desalinhado, meio que tudo fora do lugar...Calminha que faltam mais pedaços...Vamos por partes, afinal a imagem foi partida em 3 e estamos apenas na primeira, certo?

Formatando o Template Scribe: 1 - Formatando o background ou o fundo do trabalho.

2009-05-28T21:18:00.000-07:00

Depois de instalado o Scribe, vá no painel de configuração de seus blogs e na aba layout, encontre a opção EDITAR HTML. Role cuidadosamente a tela no quadro do código até encontrar o seguinte:

O sublinhado em lilás forte significa o endereço da imagem de fundo do blog, o background floral que eu coloquei no template, em azul escuro. Este seria, então, o plano de fundo do trabalho, que também poderia receber uma cor sólida, se quisesse. Para quem não possui imagens para testar, vou colocar aqui algumas para essa finalidade, ok? Então, se quiser treinar, primeiro hospede essa imagem como todas as demais que irá empregar nesse exercício, pois o que escrevemos no código são os endereços dessas imagens. Hospedo as minhas no Photobucket, observe, portanto, que o endereço marcado acima é de lá. Por que repeat está grifado em vermelho? É importante que se diga ao código que a pequena imagem que uso de fundo deve se repetir para cobrir, indefinidamente, a superfície. Abaixo, a imagem para ser utilizada nessa primeira etapa do exercício.

Formatando o Template Scribe

2009-05-28T20:50:00.001-07:00

No post anterior eu dizia sobre formatar um template do Blogger. Disse que faríamos isso com o Mínima, mas por que não tentar um outro também oficial do Blogger? Então, vamos começar olhando o que eu acabei de fazer para servir de modelo e tutorial para este tópico: http://comtemplatest.blogspot.com/ Este é o template Scribe que está junto com os demais oferecidos pelo Blogger quando se cria um blog em sua plataforma.
Para começar, crie um blog de testes e instale o template Scribe que se encontra na mesma lista onde está o Mínima. Depois disso, comece a trabalhar a imagem que pretende instalar aqui. No caso da página que estou usando como exemplo para vocês, eu fiz uma imagem de 820 pixels de largura X 430 pixels de altura. O desenho das bonequinhas aplicadas em matelassê foi feito seguindo um tutorial da querida Leda Lopes da PSPAMIGOS e quem quiser fazer um desses é só olhar aqui. É necessário ter o Paint Shop Pro instalado e ser usuário avançado do programa.
No próximo, começamos com o HTML propriamente dito.

Começando a formatar um template com a ajuda do Paint ShopPro ou similar

2009-05-03T17:31:00.000-07:00

Aqui voltamos à questão Paint Shop Pro e ao pessoal da PSPAMIGOS que motivou esse blog. Não me lembro muito bem se todos aprenderam a fazer uma imagem e cortá-la em três para depois emendarem-na com um antigo script para utilização no Outlook Express e em páginas Web...Nossa, isso faz tempo, caramba....
Então, para quem deseja relembrar a saga (porque era triste acertar aquela coisa, afff) das imagens cortadas em três, aí vai o link de um tutorial que sobrou a respeito: http://www.pspamigos.com.br/tutospsp/slicer/slicer.htmInfelizmente, por uma dessas razões que nem sei quais, pra falar bem a verdade, perdeu-se o tutorial que escrevi sobre a imagem feita antes de ser cortada. Mas o que desejo aqui? Dizer que você pode ir lá no Paint Shop Pro, criar uma imagem que gostaria de ver estampar seu template, exatamente como o explicado no tutorial perdido (afinal, faz apenas 5 anos, hein???...rerererer), depois cortá-la em três e colocá-la no Template Mínima, transformando-o em um trabalho seu. Lá no Comtemplates eu postei um que servirá para vocês entenderem o que estou dizendo aqui: http://comtemplates.blogspot.com/2009/04/minima-floral.html
A imagem do template foi feita no Paint Shop Pro com medida de 900X1100. Mas também poderia ter sido com altura menor, uns 600 pixels, pois a imagem irá esticar, extamente como se fazia há 5 anos com o script ... :)
Depois de concluída, deverá ser cortada em três pedaços e armazenada em um site próprio para imagens, como é o caso do Photobucket já falado aqui. O endereço dessas imagens é colocado no código do template, em lugares certos para assim nascer uma primeira formatação criada por vocês. Certamente esse assunto será tratado com tutorial, aos poucos, mas para a turma que está acompanhando e que gosta de mexer no Paint Shop Pro ou em outro programa similar, pode começar a por a mão na massa e....criar....

Modelo Clássico do Blogger. O que é isso?

2009-05-03T17:09:00.000-07:00

Um comentário que desejava fazer e ia me esquecendo, mas considero bem importante para quem instala templates no Blogger. Seguinte: se prestarem bem atenção, quando acessam a aba Layout/Editar HTML, no final da página, à esquerda existe a opção de "voltar ao modelo clássico". O que significa isso? Quer dizer que você pode utilizar o modelo antigo, que utiliza a linguagem HTML na página do template, eliminando os Elementos de Página que são a inovação desse Novo Blogger, ao utilizar XHTML, uma linguagem um tanto diferente do HTML, daí que os templates que instalamos normalmente são feitos para esta inovação do Blogger.
Muitas vezes olhamos um blog que tem uma cara diferente, um modelo mais semelhante a websites propriamente ditos, nada se parecendo com esses templates mais modernos com os quais já nos habituamos. Pois é isso: o modelo clássico permite a instalação de templates escritos em html e o modelo atual não permite. Existem mil macetes interessantes que podemos aprender e utilizar nesses templates em html. Você pode até configurar seu blog para receber apenas o template em html e um outro apenas para postar, fazendo com que este último funcione como uma frame do primeiro. Vixe, é confuso para quem não entende, POR ENQUANTO, do assunto, mas vai ficar fácil, podem crer. Mais explicações nas próximas, ok?

Colocando uma imagem no Header através do código html do template

2009-04-16T12:33:00.000-07:00

#header-wrapper {
width:660px;
height:260;
margin:0 auto 10px;
border:1px none $bordercolor;}

Para inserir imagens no Header (cabeçalho) do template através do HTML é necessário hospedar a imagem que deseja empregar em algum servidor que hospeda imagens, tipo Photobucket ImageShark, etc...
Depois de resolvida essa etapa, ir até o painel de configuração de seu blog, selecione a aba Layout/Editar HTML
Na página HTML, encontre Header #header-wrapper, conforme imagem acima: você deverá acrescentar as informações de medidas da sua imagem, colocando os valores width (largura) e height (altura). Poderá colocar uns 10 pixels a mais na medida da altura para melhor posicionamento da imagem. Deverá ficar como o demonstado acima. Na opção border, se quiser poderá fazer modificações, veja nosso outro tutorial a respeito. Depois dessas alterações, localize no código a opção #header e veja como proceder, seguindo a figura abaixo. Clique sobre ela para aumentar:

#header {
margin: 0px;
width:680
height:250
background url ('http://1470.photobucket.com/albums/rr65/srmpp/topmain2.jpg') no-repeat center;
text-align: left;
color:$pagetitlecolor;
border: 1px none $bordercolor;}

Na sentença background: url('url da imagem') no-repeat center;
url da imagem é o endereço onde ela está hospedada e center é a posição central da imagem. Se quiser à esquerda, use left. À direita, use right. Não se esqueça que o endereço deverá vir entre '....'

Personalizando as bordas/linhas que emolduram a imagem ou título do Header

2009-04-16T07:45:00.000-07:00

Modificando o lado da linha/borda do Header do Template Mínima

Já vimos que podemos remover as linhas/bordas que emolduram o título do blog no template Minima, que é o foco de todas as nossas formatações, por enquanto. Mas ao invés de remover essas bordas/linhas, podemos também modificá-las em seu tamanho, cor, posição ou tipo (tracejado, pontilhado, dupla, etc...). Na imagem acima, border significa bordas nos quatro lados da imagem ou do título. Se quiser que a borda apareça em um lado apenas, é só acrescentar left para esquerda, right para direita, top para a a borda superior e bottom para a borda inferior

Esta imagem, portanto, demostra que a borda só vai aparecer do lado esquerdo, e desse modo deverá ser quando quisermos especificar um lado para a linha/borda: é apenas acrescentar o hífen e a palavra que indica o lado que se quer a borda.

Modificando a largura da linha/borda do Header do Template Minima

Se quisermos alterar a largura dessa borda, vamos modificar o valor em px. Na primeira imagem, você viu 0px o que significa largura zero, ou seja, sem borda. :)
Na imagem seguinte, temos que a borda estará à esquerda (border-left) com 1 pixel de largura (1px). Uma borda fininha, portanto. Para modificar a largura dessa borda, é só alterar o número (1px, 2px,3px,4px e assim vai....)

Modificando o tipo de linha/borda do Header do Template Minima

Em solid, a linha se configura como uma linha comum, simples. mas poderíamos querer que fosse pontilhada, dupla, etc...Para alterar essa configuração no código é só trocar a palvra solid pela correspondente ao tipo desejado. Desse modo temos: solid para linha comum, dotted para pontilhado, dashed para tracejada, double para linha dupla. E ainda as opções ridge, inset e outset. Também podemos escrever none para dizer o que dissemos ao colocar 0px, ou seja, nenhuma linha. ;)

Se olharem lá no Comtemplates verão que o Header do meu blog possui uma imagem emoldurada com uma linha pontilhada. Ali está configurado o tamanho da linha em 5px e dotted em lugar de solid. Mudei a largura e o tipo da linha, além da cor. No caso da cor é simples também: apenas o código #ffffff , se for branco, em lugar da palavra bordercolor. Ao navegar no meu blog, olhem em Exibir/Código Fonte, opções no navegador, e vejam as alterações feitas no código. É o que está explicado neste post.

Espero que tenham gostado!

Para mudar Fontes e Cores

2009-04-15T17:40:00.000-07:00

Para modificar Fontes e Cores de seu template é simples e bem legal, o editor do Blogger permite a você a visualização das mudanças, e tudo é feito on line, na hora! Nada de fazer aquele famoso html no editor web, no micro, para depois enviar via FTP, etc e tals...:)
Então, mãos à obra! Sempre usem um template de testes para errarem e acertarem à vontade, já que vamos ter muita coisa coisa por aqui para testar, ok? E a melhor visualização é o seu próprio blog.
Então, vamos lá:
1 - Depois de entrar na sua conta no Blogger e no painel de configuração do seu blog, acesse a aba Layout e em seguida Fontes e Cores, como abaixo mostra o screenshot:

2 - Clicou em Fontes e Cores, aparece o editor e a visualização (Preview) logo abaixo. Dizem que uma imagem vale mais do que mil palavras, né? Então, o screenshot abaixo vai explicar esse item para vocês, apenas cliquem sobre a imagem para aumentá-la.

Depois é Salvar alterações e Visualizar Blog para ver se agradou. Caso contrário, seta voltar do navegador. E não se preocupem aqueles que não souberem lidar direito com os posts, como são feitos, os links, etc...Todos os dias teremos uma nova postagem com alguma explicação. Por mais básica que seja, encontrará aqueles que ainda querem aprender...

Espero ter ajudado. Qualquer dúvida, é só deixar um Comentário aqui e eu respondo.

Backgrounds para o Minima de três colunas

2009-04-11T13:01:00.000-07:00

Para quem instala o Minima três colunas pode utilizar o background nas mesmas medidas de largura e altura: 1450 px X 1100 px. A mudança ocorre na imagem central que agora possui 1100 de largura, quando nos backgrounds iniciais para o Minima de duas colunas, usávamos a medida de 750 pixels de largura para a imagem. Olhem o post que ensina a fazer o Background e vai ficar mais fácil para entender: Criando um Background para o Blog

Template Mínima com três colunas

2009-04-10T20:13:00.000-07:00

Para quem quiser o Template Mínima com três colunas, é só pegar o código na caixa abaixo, colar em um bloco de notas, salvar o arquivo txt em seu computador e utilizar, procedendo da seguinte maneira:1 - Salvar o conteúdo do Blog por questão de segurança, selecionando a aba Layout/Editar HTML. Clicar no link Baixar Modelo Completo e salvar o documento que será gerado. 2 - Em seguida, encontrar o arquivo em txt que você salvou em seu computador, fazer o upload, clicar em Salvar Modelo e visualizar o blog para ver como ficou.3 - Você também poderá selecionar todo o texto na caixa do HTML do Blog e colar sobre ele o novo código do Minima de três colunas. Os gadegts e outras inclusões do blog anterior irão desaparecer com a instalação do novo template, daí é só recolocar. O ideal é tentar no Blog de testes para aprender direitinho. 4 - Depois de salvar o novo modelo, vá em Layout e verifique que o novo template terá duas colunas laterais ( uma à direita e outra à esquerda) para os gadgets e uma central para a postagem. 5 -Os backgrounds que temos feito aqui não podem
ser utilizados no Minima três colunas, pois é necessário modificar algumas
medidas, coisa pouca, que deixo para o próximo post.Para ver como fica o novo template: http://testesexclusivos.blogspot.com/Para fazer o download do código do Mínima três colunas, clique aqui

Removendo as linhas do cabeçalho do template Minima

2009-04-10T18:22:00.000-07:00

O que fazer com aquelas duas linhas que circundam a área do cabeçalho, onde eu quero que apareça apenas a imagem que eu criei e publiquei?

Bem, hora de começar a mexer um pouquiiiinho no código do template. Vamos lá?

Ir em Layout/Editar HTML.

Vamos encontrar o local certinho para a mudança:

Vá rolando cuidadosamente o código até encontrar a palavra Header que é onde estão todas as configurações do Header (Cabeçalho). Observe o screen abaixo e proceda exatamente como o explicado: é só apagar o número 1 e digitar o número 0 (zero) em seu lugar. Desse modo, as linhas do template serão eliminadas. Observe que são duas linhas, logo a alteração deverá ser feita em dois lugares, todos dentro da tag Header.

Depois de feitas as mudanças, Salvar Modelo e Visualizar Blog para ver como ficou.
Crie um blog de testes, instale o Minima e faça a modificação explicada. Mantenha esse blog de testes para empregar outras alterações que iremos explicar aqui.

Olhe o screen que explica onde deverão ocorrer as alterações:

Headers, Tops, Cabeçalhos

2009-04-10T17:31:00.000-07:00

Vamos para os Tops ou Headers que enfeitam o cabeçalho. Para criar essa imagem, o ideal é usar a medida de 660 X 250; este que emprego aqui no blog tem 680 x 250, ou seja, passou um pouco da medida padrão de largura, ficou desalinhado e me obrigou a redimensionar a medida para 660 de largura, portanto é necessário que a largura da imagem seja a mesma da largura do Header do Template Mínima que é de 660 pixels, e que é também o Template que empregamos aqui.

Depois de criar o top, salve em seu computador e aplique no background da seguinte maneira:

1- Na página de configuração do seu Blog, vá na aba Layout/Elementos de Página.

2 - Na área do Cabeçalho, clique em editar:

3 - Na janela que vai abrir, escolha a imagem que pretende colocar e que salvou em seu computador, ou se estiver armazenada em algum site, digite o endereço http na opção seguinte, "Da Web". Em posicionamento, escolha a segunda opção, conforme mostrado no screen abaixo:

4 - Clique em Salvar e a imagem vai estar na página, bonitinha :)

Instalando o Background em seu Blog

2009-03-13T19:13:00.000-07:00

Depois de feita a imagem que vai utilizar como Background do seu Blog, hospede-a em um site de armazenamento de imagens ou mesmo em algum servidor onde tenha páginas hospedadas, observando nesse caso que o número de acesso em seu blog poderá aumentar o tráfego no servidor, o que vai acarretar despesas, conforme o seu plano de hospedagem.

Para que seu Blog possa receber um background como este que estou usando, é preciso que seja instalado o template do Blogger, o Mínima, disponível nas opções de Templates do Blogger. Ao acessar sua conta no Blogger.com, localize seu Blog no Painel e clique na opção Layout, em seguida selecione a aba Elementos de Página.

Em Elementos de Página, selecione a opção "Adicione um Gadget", à direita

Ao clicar nesta opção, haverá diversos elementos que podem ser adicionados ao Blog e para o nosso caso, escolheremos HTML/JAVASCRIPT. Clique sobre ele e abrirá uma janela que deverá ser preenchida com o seguinte código:
Colocado o código, clique em Salvar. O Blog salvará seu comando e na opção Visualizar Blog você poderá ver como ficou seu trabalho.
A posição do Gadget (background) nos elementos da página não tem lugar certo, poderá ficar no começo, no meio ou no final da relação onde você o configurou. Aliás, esses gadgets podem ser arrastados com o mouse a fim de posicioná-los na sequência desejada, quando se arranja o menu, os arquivos e outros elementos. Só mesmo o Background pode ficar em qualquer posicionamento.
Copie o código de instalação abaixo:

Agora, tentem instalar seu Background e me mandem o link para eu ver como ficou :)

Criando um Background para o Blog

2009-03-13T15:45:00.000-07:00

Em primeiro lugar, separamos as figuras de acordo com um tema escolhindo. É muito comum o emprego de kits gratuitos para a composição de scrapbookings digitais, desde que apenas para uso pessoal e citada a fonte. Com certeza a melhor maneira de fazer um trabalho super especial é criar suas próprias figuras. No caso deste background eu usei um kit muito fofo, My Garden, do site de Yvette and Missy: http://misfitsscrapz.blogspot.com/
O programa utilizado, como sempre, Paint Shop Pro X

Os passos dados:

1 - Abrir uma imagem de fundo transparente com 1450 pixels de largura por 1100 pixels de altura.
2 - Cobrir essa imagem com o fundo desejado. Observem que neste trabalho usei um dos papéis floridos do kit My Garden da Yvette.
3 - Abrir outra imagem com fundo transparente nas dimensões de 750 pixels de largura por 1100 pixels de altura. Cobri-la com figura ou a cor desejada, não se esquecendo que esta é a área onde serão escritos os textos. Logo, o ideal é não carregar com imagens fortes.
4 - Colar essa imagem de 750 pixels de largura sobre a de 1450 pixels. Até então você tem a imagem básica que servirá de background. Poderá nesses passos, acrescentar alguma borda na imagem menor e sobrepô-la à maior com o uso de Drop Shadow para um efeito mais bonito. Como disse, a criação é por sua conta ;)
5 - Depois de acrescentados os elementos e os adornos pretendidos, salvar a imagem em JPG no seu computador e carregá-la para um site de hospedagens de imagens. Eu uso o http://www.photobucket.com/ mas em contas gratuitas é sempre bom lembrar que o tamanho máximo de armazenamento permitido é de imagens com 1024 de largura o que também vai funcionar para quem está aprendendo e deseja, por enquanto, saber como funciona a coisa.

Nos screenshots abaixo, alguns comentários inseridos que achei importantes:

Este é o background básico que pode ser instalado no Blog

Nesse screen, observo que coloquei mais uma layer intermediária sobre a qual usei um fundo de bolinhas, mas sem criar uma borda muito larga, pois temos um template básico instalado, o Mínima, e as medidas do background que criamos devem ajustar-se ao que foi instalado para que a visualização corra bem para todos os tipos de configuração de monitor.

Este é o trabalho final, em tamanho pequeno, claro, mas com uma observação a ser feita: as imagens laterais, do pintinho, da cerca e do lacinho, devem ser posicionadas um pouquinho mais para baixo do que vocês enxergam no screenshot acima. Ou seja, precisei mover as figuras mais para baixo e olhando na régua lateral, foram posicionadas a partir da marca de 600 pixels de cima para baixo, quase mesmo no meio, já que a altura do trabalho final é de 1100 pixels. De todo modo, é importante posicionar as figuras e testar no blog para visualizar e ver se ficou legal.

Espero que seja simples e legal de fazer. Criem vários, pesquisem os temas que podem explorar e voltem para ler o próximo post onde seguem instruções de instalação do background. Até já :)