Sandro


 
InícioInício  FAQFAQ  BuscarBuscar  MembrosMembros  GruposGrupos  Registrar-seRegistrar-se  LoginLogin  

Compartilhe | 
 

 Adicionar borda arredondadas nas colunas no blogger

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
sanrikares
Admin


Mensagens: 105
Data de inscrição: 24/06/2008
Idade: 23

MensagemAssunto: Adicionar borda arredondadas nas colunas no blogger   Sab Jul 12, 2008 12:30 pm

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.
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://sanrikares.forumeiros.com
 

Adicionar borda arredondadas nas colunas no blogger

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1

 Tópicos similares

-
» ADICIONAR AMIGOS NO PERFIL
» Tratamentos preventivos.
» CC 2030
» Bonelli no Montejunto??
» Páginas pessoais, blogs e galerias virtuais

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
Sandro :: Tutoriais-