Bordas arredondadas nas colunas

Clique em Editar HTML. Cole no seu template, antes de ]]>:


#sidebarbottom {
background:url("link da imagem do topo da coluna") no-repeat left top;
margin:0 0 px;
padding: 0 0 0px;

}

#sidebartop{
background:url("link da imagem da base da coluna") no-repeat left bottom;
margin:0 0 px;
padding:0 0 0px;
}


Salve o template. Se você visualizar, não verá nenhuma mudança (não insira ainda nenhum link de imagem onde está indicado, por enquanto). Agora encontre este trecho do código (não é necessário clicar em Expandir Modelo de Widget) e insira o que está em vermelho:

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

Salve o template. Agora é com a parte de edição de imagem. Abra seu editor de imagem e crie uma imagem com a largura da sidebar e altura 100px. Preencha com a cor que será a cor do background da PÁGINA (e não da coluna, ok?).

Depois de preencher com a cor de fundo da página do seu blog, escolha a seleção com bordas arredondadas do seu editor de imagem.

Veja a imagem (clique nela para expandir):

Agora selecione o quadrado como na próxima imagem e preencha a seleção com a cor que usará no fundo da SIDEBAR:

Ficou aquela pontinhas alí com a cor do fundo da página, ok? Agora corte a imagem próximo ao final desta curva da borda (mas não vá cortar demais, heim?)
Salve esta imagem como top.jpg:

Agora inverta a imagem Verticalmente e salve como bottom.jpg:

Hospede as imagens e insira lá no primeiro código que eu passei, dentro das marcações correspondentes para topo e bottom. Visualize. Pode ser que uma das imagens (ou, com muito azar, ambas) esteja desalinhada e seja preciso fazer alterações no valor de padding. Vá alterando valores (5px, 10px) e visualizando, até se alinharem. Lembre-se de que a visualização no Firefox não é a mesma do Internet Explore, por isso teste pelo menos nestes dois principais navegadores.

Leia Mais

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