Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

28 setembro 2007

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.

Artigos Relacionados

22 comentários:

regina claudia brandão disse...

tá ... rsrs ... depois vou estudar isso. por enquanto, hj, agora, vou tentar baixar um templates de 3 colunas e não se fala mais nisso ...
adorei seu blog. beijo.

Paulo Sidney disse...

rss...isso ainda não é pra mim...vou amadurecer a idéia de botar bordas arredondadas...

Bj
Paulo Sidney

Nash disse...

Bem, gostaria primeiro de parabenizar este blog MARAVILHOSO. Não tenho nem 9 dias de blog (meu primeiro) e estes tutoriais foram um excelente norte para mim. Sobre esta dica, eu consegui fazê-la perfeitamente, na verdade além das sidebar's, arredondei as bordas da coluna dos posts também, modificando um pouco ps passos acima.
Excelente trabalho, meus parabens.

Bia disse...

Oi, Ariane, tudo bom?

Em primeiro lugar, gostaria de parabenizar e agradecer, pois estou cosntruindo meu primeiro blog, e muitas das dicas que encontrei aqui foram super úteis!

Queria dividir com você uma dica: para fazer boxes com cantos arredondados, eu utilizo o gerador do site http://www.spiffycorners.com/. Depois dê uma olhadinha, o resultado é realmente muito bom, e não usa imagem nenhuma, apenas CSS!

:o***

Daniel Negrisoli Batista disse...

Valeu...! mto obrigado

Marcio Ferreira disse...

Primeiro de tudo parabenizar pelo blog! encontrei esse blog com muitas dicas hoje estou com meu blog e quero acrementar novas idéias e lendo estes posts de grande ajuda.

Tenho uma dúvida sobre esta dica em que parte do codigo do meu template eu encontro isso ]]>: espero respostas pretendo arendondar as bordas das colunas no meu blog agradeço desde já!

Rafael R.P disse...

Oiii alguem pode me ajudar fiz um blog a 4 dias e tenho algumas duvidas rafaelmost@hotmail.com urgente por favor BRIGADU!!

Guizaum disse...

Olá....

o meu layout nao tem cor no fundo do sidebar nem no post...
nao consigo achar essa opçao no meu layout pra deixar o sidebar branco

Fernando Ribeiro disse...

Ariane preciso mesmo da sua ajuda, eu to a personalizar o template do www.4rodas1volante.com e testei o template no mobile-turbo.com, pois bem quando passei o template para o 4rodas1volante as bordas deixaram de estar redondas e nem com este tutorial vou lá! Você pode-me ajudar é que já dei tanta volta nisso. Meu mail é fernando_a_ribeiro@hotmail.com

Fernando Ribeiro disse...

Oi Ariane, eu precisava da sua ajuda, eu testei um template num blog de testes e este tinha as bordas arredondadas mas quando passei para o meu blog o mesmo código, também do blogger, os cantos deixaram de ser arredondados, gostava que me pudesse ajudar, se precisar do meu contacto e de ver o site diga. beijos

Unknown disse...

olá, adorei a dica mas queria te avisar que o código está trocado, onde devia estar botom está top e vice-versa ( no #sidebartop e bottom).

Administrador disse...

Otimo..to colocando agora no Meu Blog de Filmes xD

beijos

Anônimo disse...

Boa dica! Vou estudar também.

Anônimo disse...

Boa noite,gostaria de saber se funciona no IE7,ja fiz e refiz e sempre da erro,ja vi tambem que os codigos estão trocados,como no comentario a cima,se puder me ajudar eu agradeço,só preciso saber como arredondar o botton do side bar.

Vidanopc disse...

O meu blog usa o template Simple Blue, e ao tentar adicionar esta dica, as bordas nao apareceram, gostaria de saber se é comun acontecer isto ?

pro.gamming disse...

nao acredito eu fui tentar fazer isso e ocorreu um erro na minha barra lateral e agora nao consigo mais remover de jeito nenhum pois o blogger diz que há um erro na tag DIV

Fabiano disse...

Oi,gostei muito do seu blog ,assim como vc tenho pesquisado muito na internet e tenho pesquisado nesse blog e é de grande importância
para mim.
Tem 2 programas q eu uso e são de grande ajuda um é o w.bloggar,para o pessoal q ñ tem muita experiência em html,ele é de graça,vc tem a opção de postar em html ou ñ diretamente no seu blog.
E tbm tem o blog creator onde se faz templates ,tbm é de graça!

Anna disse...

Oi Ariane!

Sempre visito o seu site e adoro as dicas que encontro por aqui, vc é sensacional, porém, estou com alguns problemas para construir um template para minha loja virtual e gostaria, se possível que me ajudasse nessa. Se puder, responda no meu email, gostaria de trocar maiores informações com você! O email é o donannabolsaseacessorios@gmail.com
Fico no aguardo!

Unknown disse...

Olá gostei muito do seu tutorial, parabêns viu!!!

BeatHunter disse...

Obrigado!
Super fácil, mto útil = D

Mateus Rodrigues disse...

ficou simplesmente perfeito Ariane! Obrigada, até que enfim encontrei o lugar certo!! Em outros tutôs que tem por aí, o código só funcionava no mozilla, mas esse até no Chrome! Obrigada mesmo!

Andressa Chung disse...

Olá, gosto muito do seu blog e me ajuda muito também. Mas, estou com uma dúvida.. Onde você colocou "Agora encontre este trecho do código..", eu realmente não tô sabendo de qual 'trecho' se trata e se no meu html não há "< div id='sidebar-wrapper' >", eu vou colocar a parte em vermelho, ONDE?? Desculpa qualquer coisa, e obrigada de verdade!

Postar um comentário

Os comentários são moderados.