Arredondar as bordas do seu template Blogger

Se você está modificando o seu template ou quer que as bordas dele, ao invéz de ficar quadradas ou com pontas fiquem arredondadas, vou lhe mostrar o código e vou mostrar também os locais onde você pode modificar, como por exemplo: o header (cabeçalho), os marcadores e outros. A seguir mostrarei duas imagens de um template com bordas quadradas e outro com bordas arredondadas respectivamente:

ANTES DO CÓDIGO (Clique na imagem para ampliar)











DEPOIS DO CÓDIGO












O código que você deverá utilizar é o:

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

Para colocar para funcionar esse código você deverá ir em >> Layout >> Editar HTML>> e na caixa onde têm vários códigos, utilizando o "Ctrl + F" e procurando os seguintes nomes:

1- Para arredondar a borda do template ache o termo "#blog-wrapper" e coloque o código ao final dos termos a seguir um exemplo de como deve ficar:

#blog-wrapper {
margin: 0 auto; /* to make the template lay in the screen center */
padding: 6px 8px 6px 6px;
margin-top: 15px;
margin-bottom: 10px;
text-align: center;
position: relative;
width: 970px;
background: #e6e6e6;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

OBS: este número que aqui é 8 pode variar dependendo do seu gosto quanto maior o número mais arredondado fica. Serve para todos os lugares.

2- Para arredondar a borda dos marcadores ponha o código na parte de baixo do termo :

- #sidebar1 h2
- #sidebar2 h2
- #sidebar3 h2

Por exemplo:

#sidebar1 h2 {
margin: 0px -4px 10px -4px;
padding: 3px 15px 3px 15px;
text-align: left;
color: #fff;
font: $sidebarHeaderFont;
background: #191919;
border: 2px solid #fff;
text-align: left;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

3- Também insira na parte de baixo do termo:

- #linkbar {

exemplo:

#linkbar {
margin: 6px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: $linkbarbgColor;
border: 1px solid $contentBorderColor;
border-bottom: 0;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

4- Coloque o código na parte de baixo dos termos baseado nos exemplos:

- #lower-wrapper {

- #footer-wrapper {

Que são as partes de baixo do blog.

OBS: Esses termos podem variar de templates para templates.

Qualquer dúvida deixe seu comentário. Até a próxima.