Perguntas e Respostas

Muitas perguntas que me chegam não são publicadas no blog, ou por que se repetem, ou por que se torna mais fácil responder diretamente à quem perguntou, por e-mail. No entanto, como recebo muitas perguntas repetidas, decidí criar este tópico para facilitar.

1- Como inserir imagens no blog (gifs, gifs animadas, etc)?
Tanto para as colunas laterais quanto para o post é possível usar a hospedagem do próprio blogger, clicando em Modelo->Adicionar Elemento de Página->Imagem. Carregue a imagem do seu computador ou coloque a url da imagem hospedada em outro local. Você pode preferir hospedar a imagem externamente, no ImageShack, por exemplo. Para tnto, copie o link direto oferecido e insira neste código:

<img src="endereço da imagem">

Para redimensionar a imagem, coloque:

<img src="endereço da imagem" width="200"> (200 é = a 200px e está aqui somente como exemplo)

Para fazer de uma imagem um link, coloque:

<a href="endereço do site" target="_blank"><img src="endereço da imagem" width="200"></a>

target="_blank" fará a página se abrir em uma nova janela. Se não deseja isto, exclua esta parte do código.

2- Como inserir uma nova coluna no template?
Dê uma olhada AQUI.

3- Que programa usar para fazer templates para o Blogger?
Não tenho à mínima idéia...não tenho por costume passar a impressão de que sei mais do que sei, falando do que desconheço, por isso, estou sendo bem honesta. Não sei. Eu edito meus templates no Blogger mesmo, tenho um blog só para isso e vou mexendo nos códigos até ficar como quero, depois baixo no meu PC, hospedo e distribuo. Só Isso.


4- Como colocar vídeo no post?

Se for um vídeo do Youtube, por exemplo, copie o código fornecido e cole no seu post. No modo html vai aparecer o código e no modo escrever, vai ficar tudo em branco. Quando publicar o post, o vídeo aparecerá.

Leia Mais

Retirar a navbar do blogger

Para retirar a navbar do blogger (muita gente não gosta, inclusive eu...), procure no código do seu template este trecho ]]></b:skin> e acrescente imediatamente antes, a parte em vermelho:
#navbar-iframe { height: 0px; visibility: hidden; display: none; }

ficando assim:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }
]]></b:skin>

Para voltar a exibir a Navbar, faça o processo inverso: procure pelo código acima (em vermelho) e apague-o totalmente.

Leia Mais

Adicionar uma coluna no template

Usando um template Mínima do Blogger como base para este tutorial, entenda que a estrutura das colunas se apresenta desta forma, no CSS:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

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

Onde Outer-Wrapper é a maior DIV do template e contém todas as outras (header, main, sidebar, footer) Main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (perfil).

Para adicionar uma nova coluna oposta a sidebar, é necessário primeiro criar espaço para ela dentro de Outer-wrapper. No template Mínima a largura de Outer-Wrapper (a largura de uma coluna está em width) é de 660px e a soma da largura de main-wrapper (410px) e sidebar-wrapper(220px) dá um total de 630px Veja a imagem abaixo:

Então, para acrescentar uma nova coluna é preciso aumentar o espaço, a largura de Outer-Wrapper.

Para acrescentar uma nova sidebar, copie o código abaixo e acrescente logo após os códigos para sidebar-wrapper:

#newsidebar-wrapper {
margin-left: 0px;
width: 220px;
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 */
}

Note que sidebar-wrapper tem float:right (flutua à direita) e newsidebar-wrapper tem que ter float:left (flutuação à esquerda).

Lembre-se: a soma da largura do post mais as duas colunas laterais tem que ser menor do que o valor width de Outer-Wrapper. Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.

Agora desça a página até encontrar esta parte do código (HTML):

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>

e cole imediatamente ANTES este:

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

Importante: No HTML os elementos (DIVs) precisam ser dispostos na ordem estabelecida no CSS. Ou seja, se Newsidebar tem float: left; (flutuação à esquerda) deve ser colocado no HTML antes da DIV Main-Wrapper, ficando assim:

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


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

Leia também: Como alinhar as colunas e textos do blog

Leia Mais

Como instalar os templates

Importante!

Não faça nenhuma modificação no seu template sem antes salvar uma cópia do mesmo. Vá em Editar HTML e clique em Baixar Modelo Completo. Antes de trocar de template, salve todas as suas widgets (Elementos de Página) no bloco de notas, para recolocar no template já modificado.

Após ter salvo suas widgets no bloco de notas, retire todas elas do seu blog. Deixe as colunas vazias, para que não apareça nenhuma mensagem de erro.
Faça o download do novo template que deseja instalar. Vá em Editar HTML e clique em Arquivo. Procure o código (XML) do novo template na pasta em que foi guardado no seu computador e clique em Upload. Se alguma widget tiver restado na página, uma mensagem surgirá avisando que ela será eliminada com a troca de template. Clique em Salvar Modelo.

Leia Mais

Colocando gifs, imagens, banners no blog

Tem muita gente que ainda não sabe colocar Elementos de Página no blog (lê-se links, gifs, banners e afins...). Para colocar qualquer coisa com código no seu template, vá em Modelo, clique em Adicionar Elemento de Página e escolha a opção HTML/JAVASCRIPT e coloque lá o seu código. Para colocar só os links de outros sites, por exemplo, é só escolher a opção Lista de Links. Dê o nome que quiser à lista e você pode publicá-la em ordem alfabética ou não. É muito simples. Depois de salvar, arraste o quadradinho onde estará o código para a posição em que deseja que apareça no seu template.

Edit: Tenho recebido vários e-mails de pessoas que se queixam de que seus gifs animados perdem os movimentos ao serem publicados no blog. Primeiro, deve-se entender que as imagens hospedadas no Blogger vão para uma pasta automaticamente criada para você, no Picasa e no Picasa não funcionam os gifs animados! O jeito é colocar o gif copiando o link da imagem (o link oferecido em uma hospedagem, como o ImageShack) diretamente no post ou na coluna lateral, sem hospedar a imagem no blogger. Para tanto, deve-se usar o seguinte código:

<img src="endereço da imagem">

Para transformar uma imagem em link, use este código:

<a href="endereço do site" target="_blank"><img src="endereço da imagem"></a>

target="_blank " garantirá que a página seja aberta em uma nova janela/aba.

Leia Mais

Aumentar largura das colunas

Para aumentar a largura das colunas do template:

Procure no código:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}

#main-wrapper {
margin-left: 5px;
width: 550px;
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 {
margin-right: 0px;
width: 250px;
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 */
}


Tudo o que está contido em #main-wrapper se refere à coluna do post. Assim, para aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.

Tudo o que está contido em #sidebar-wrapper se refere a coluna do perfil. Aqui também os valores de WIDTH devem ser alterados. Cuidado para não desconfigurar completamente o template: obedeça a largura que está estipulada em #outer-wrapper , sem ultrapassá-la, pois todos os elementos da página estão contidos em Outer-wrapper.

Atenção!

Muitas vezes, o que vemos em um navegador não é o mesmo que vemos em outro. Às vezes um template parece perfeito no Firefox e está horrivelmente desproporcional no Internet Explore e vice-versa. Toda vez que fizer qualquer alteração em seu template, tente visualizá-lo em mais de um navegador, para ter certeza de que você não é o único a achar o template lindo....

Leia Mais

Alterar a aparência das colunas

Para fazer alterações de bordas e plano de fundo nas colunas do template, procure no código do mesmo:

#main-wrapper {
background-color:;
border: ;
margin-left: 0px;
width: 400px;
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 {
background-color:;
border: ;
margin-right: 0px;
width: 165px;
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 */
}

Acrescente as linhas em negrito, se já não existirem no seu código

Onde #main-wrapper é a coluna de postagem e #sidebar-wrapper a do perfil.
Se você deseja colocar uma cor como plano de fundo da coluna use background-color: e o código da cor. Se deseja uma imagem, coloque background: url(endereço da imagem) repeat;

Em border você estabelecerá, como vimos anteriormente a largura, cor e textura da borda. Aqui valem os mesmos procedimentos. Se você deseja colocar borda somente no topo e em uma das laterais, é só colocar:

border-top: 1px solid #00000; (largura e cor somente como exemplos)
border-left: 1px solid #000000;

Assim a coluna terá borda somente no topo e na lateral esquerda. Se deseja borda em toda volta da coluna é só colocar:

border: 1px solid #000000; (sem precisar estabelecer onde a borda deve aparecer.)


Width estabelece a largura da coluna.

Leia Mais

Mudar plano de fundo - background

Para mudar o plano de fundo do template, procure por Body no código CSS e alterar o que está em Background:

body {
background-color: $bgcolor;}

Se você deseja alterar somente a cor, faça como no exemplo: background-color e coloque o código da cor (hexadecimal, como: #ffffff), ficando assim:
body{
background-color: #ffffff;

Se deseja colocar uma imagem:

background: url(url da imagem) repeat;

Dica: para que o navegador Intenet Explore consiga interpretar o código, dê um espaço maior entre o endereço da imagem e repeat, caso contrário não aparecerá no navegador, apesar de aparecer normalmente no Firefox e no Ópera.

A imagem escolhida para o fundo do template não precisa necessariamente se repetir indefinidamente. Você pode querer, por exemplo, que esta imagem seja fixa no topo do template. Veja as maneiras como você pode estipular o comportamento da imagem do background (isto vale para a definição de background de qualquer elemento da página, seja body, main, sidebar, etc)

repeat; repete por todo o elemento
repeat-y; repete na vertical
repeat-x; repete na horizontal
no-repeat; não repete

quando for estipulado que a imagem não deve se repetir é necessário informar em que posição ela deverá aparecer:

background: url(url da imagem) no-repeat top left; -> não repete e se apresenta no topo à esquerda.

Para que a imagem fique fixa na tela:
background-attachment: fixed;

Para que a imagem role com a tela:
background-attachment: scroll;


Texto alterado em set/2008

Leia Mais

Personalizar cabeçalho (Header)

Obs: Todos os tutoriais apresentados foram baseados no template Mínima, do Blogger.

Modificar a imagem do topo novo blogger

Existem duas maneiras de modificar a imagem do topo (cabeçalho) do template no novo blogger. A primeira é através do painel do Blogger:

1- Vá em Layout e clique em Editar no espaço que corresponde ao cabeçalho:

2- Na janela que se abre, clique em Arquivo para buscar uma imagem no seu computador e depois escolha se deseja que a imagem apareça por trás do título ou descrição ou se a imagem deve substituir o título.

Note que para que a imagem fique centralizada, ela deve obedecer o espaço destinado ao cabeçalho. No template Mínima, sem modificações, este´espaço é de 660px de largura. Se você usa um template modificado, certifique-se da largura e altura de #header-wrapper, para dimensionar sua imagem.

Outra maneira de modificar é direto no código do template. Para isso, vá em Modelo->Editar HTML-> e procure #header-wrapper:

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

Você pode alterar a  largura (660px) para mais ou para menos e estipular uma altura para o cabeçalho, acrescentando height, desta maneira:

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

Hospede sua imagem que deseja colocar no cabeçalho em algum site (ImageShack, Photobucket, TinyPic,etc) e copie o link da imagem.  O link deve ser colocado em background, como abaixo:

#header-wrapper {
  width:660px;
  height: 120px;
  background: url(link da imagem)  no-repeat top center.

  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }


O trecho em verde determina se a imagem se repetirá ou não. O comportamento da imagem pode ser:

no-repeat - a imagem não se repete
repeat - a imagem se repete tanto na horizontal quanto na vertical.
repeat-x - a imagem se repete horizontalmente
repeat-y - a imagem se repete na vertical

O trecho em vermelho determina a posição da imagem no cabeçalho, que pode ser:

top left - a imagem aparece no topo à esquerda
top center - a imagem aparece no topo ao centro
top right - a imagem aparece no topo à direita

bottom left - a imagem aparece na base, à esquerda
bottom center - a imagem aparece na base ao centro
bottom right - a imagem aparece na base à direita.


Se você deseja colocar borda em sua imagem, faça assim:
Borda em toda a imagem:
border: 1 px solid #000000;

Onde  1px é a largura da borda (coloque o valor que quiser), solid é o tipo da borda (no caso, lisa), e #000000 é a cor da borda, no caso preta.

Se deseja borda somente no topo da imagem:
border-top: 1px solid #000000;

Bordar na lateral esquerda da imagem:
border-left: 1px solid #000000;

Borda à direita da imagem:
border-right: 1px solid #000000;

Borda na base da imagem:
border-bottom:1px solid #000000;

Lembrando que, para colocar borda nos quatro cantos da imagem, basta colocar:
border:1 px solid #000000;

Tipos de borda:

dotted-> pontilhada
dashed-> tracejada
solid-> linha
double-> linha dupla
ridge-> cume
inset ->inserido
outset-> outset
none->nenhuma

Supondo que você deseja colocar uma imagem pequena no topo, sobre um fundo de outra cor, coloque
background: #FFFFFF url(link da imagem) no-repeat top left;

onde #FFFFFF é a cor do fundo, e top left é o posicionamento da imagem (à esquerda, no topo).

• Para que o navegador Internet Explore interprete corretamente o código, é preciso sempre dar um bom espaço entre o endereço da imagem e o comando que vem depois:

Background: url(endereço da imagem) __ no-repeat;

O traço representa apenas o espaço necessário entre a url e no-repeat.

Colocar outro elemento no topo da página

Para dividir o cabeçalho com outro elemento (Feed, Banner, etc) é necessário notar a largura total de #Header-Wrapper e a soma dos elementos contidos nele não podem ultrapassar este valor.

Ex:
#header-wrapper{
width: 800px;}

#header{
width: 350px;
float: left; } (flutua à esquerda dentro de Header-Wrapper)

#NovaDiv{
width: 450px;
float: right;} (flutua à direita dentro de Header-Wrapper)

Não se esqueça de acrescentar no HTML a nova DIV, antes do fechamento de header-wrapper, assim:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Cabeçalho)' type='Header'/>
</b:section>

<div id='NovaDiv'><b:section class='novadiv' id='novaid' maxwidgets='1' showaddelement='yes'></div>
</div>

Como retirar o cabeçalho

Procure por:
<b:widget id='Header1' locked='true' title='Novo Templates (Cabeçalho)' type='Header'/>
</b:section>
</div>

Troque true por false e será possível retirar o cabeçalho da página no painel de controle.

Para inserir Elementos de Página no cabeçalho

Procure por
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Onde está 1, troque pelo números de widgets que deseja inserir no cabeçalho e onde está no, substitua por yes.



Este post foi alterado em julho/2008
Este post foi alterado em set/2008

Leia Mais