• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

A propriedade “Border-radius” nos permite criar bordas arredondadas nos elementos do Blogger.
O uso do CSS3, incorpora novas propriedades, e com ele podemos controlar e definir o arredondamento das esquinas dos elementos, definindo o tamanho do raio da curva, sem a necessidade de utilizarmos imagens.
É este efeito que uso aqui no meu blog, e para aqueles que utilizam os navegadores que dão suporte a CSS3, conseguem visualizar o efeito.
O único problema é que esta propriedade não está disponível em todos os navegadores.
Funciona perfeitamente no Firefox, Flock, Safari, Chrome e Opera.

Veja os Browsers que suportam esta propriedade:
? Firefox 3.0 ou superior
? Flock 2.5 ou superior
? Chrome
? Opera
?Safari

Não funcionam nos Browsers:
? Internet Explorer
? Opera versão inferior a 10.

É claro que o Internet Explorer ( maldito IEca) não dá suporte a CSS3, (este navegador é o terror dos desenvolvedores web) portanto quem utiliza este navegador, nunca consegue visualizar os efeitos mais diferentes e interessantes possíveis, como bordas arredondadas, sombras nos textos, entre outros.
Por este motivo que digo e repito: “larguem o IE, pelo amor de Deus”. Já até publiquei uma campanha existente na web que explica melhor sobre esse assunto.

Mas, voltando ás bordas arredondadas,para utilizá-la em seu blog, basta inserir a chamada para a propriedade, no CSS do seu template.

Como esta propriedade, ainda não está totalmente implementada, para alguns navegadores é necessário a aplicação de atributos especias para que cada navegador reconheça a propriedade:

border-radius (padrão)
-moz-border-radius (navegadores Flock e Firefox)
-webkit-border-radius (navegadores Chrome e Safari)

Desta forma, devemos aplicar os atributos a cada elemento que você pretende incluir bordas arredondadas, como por exemplo, colunas do blogger.

[alerta]ATENÇÃO:Você só irá conseguir entender este tutorial se já tiver conhecimento sobre bordas. O pré requisito é que você saiba usar bordas no seu template, se ainda não sabe, sugiro que leia este post: Aprendendo sobre bordas no template.[/alerta]

1) Aplicar o efeito redondo diretamente no post do blogger:

Segue alguns exemplos para aplicação de bordas arredondadas em textos e abaixo de cada exemplo o código referente.

1. Bordas arredondadas iguais em todas as esquinas:

<div style="background:#6959CD;color:#fff;
border: #000 5px solid;padding: 10px;border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

border-radius:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

2. Bordas arredondadas apenas em alguns lados:

2.1. topo direito e rodapé esquerdo:

<div style="background:#9B30FF; color:#fff; border: #68228B 10px solid; padding: 10px; -moz-border-radius:0 20px;-webkit-border-radius:0 20px;border-radius:0 20px;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

-moz-border-radius:0 20px;
-webkit-border-radius:0 20px;
border-radius:0 20px;

2.2. topo esquerdo e rodapé direito:

<div style="background:#9B30FF; color:#fff; border: #68228B 10px solid; padding: 10px; -moz-border-radius:20px 0;-webkit-border-radius:20px 0;border-radius:20px 0;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;

3. Bordas arredondadas somente nas esquinas do topo:

<div style="background:#6959CD;color:#fff;
border: #000 1px solid;padding: 10px;border-radius:10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;

4. Bordas arredondadas somente no rodapé:

<div style="background:#6959CD;color:#fff;border: #000 1px solid;padding: 10px;border-radius:0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

border-radius:0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;

Para aplicar o efeito redondo nas bordas em textos no post basta colar o código referente à propriedade, no corpo da postagem, através da aba “editar html”.
Veja um exemplo para você entender melhor o código:

<div style="background:#xxx  -->(cor de fundo);
color:#xxx  -->(cor do texto);
border: #xxx(cor da borda) Xpx(espessura da borda) solid(tipo de borda);
padding: 10px;
border-radius:10px;  -->(tamanho do raio da curva de cada borda)
-moz-border-radius: 10px;
-webkit-border-radius: 10px;">
SEU TEXTO
</div>

Lembre-se, este são apenas alguns exemplos, para você conseguir entender o código, pois você deverá editar cores, bordas e definir o tamanho do raio da curva de cada borda.

2) Aplicando este efeito diretamente na folha de estilos do Blogger:

Podemos também acrescentar o efeito à folha de estilo no template, para que seja aplicada a determinados elementos.

Vá no menu “modelo >> Editar HTML”, marque “Expandir modelos de widgets”.
Copie o código abaixo e cole-o ACIMA de ]]></b:skin>

#borda-arredondada{
-moz-border-radius: 10px;  /*-- para Firefox e Flock --*/
-webkit-border-radius: 10px;  /* para Chrome e Safari --*/
border-radius: 10px;
border: 1px solid #000000; /*--- Edite cor e espessura da borda ---*/
}

Sempre que quiser aplicar o efeito redondo em bordas em algum texto no post, no modo “Editar HTML” da postagem, acrescente a seguinte linha:

<div id='borda-arredondada'>
SEU TEXTO
</div>

3) Podemos também, aplicar este efeito em uma coluna no blog, por exemplo, na coluna total da área de postagens (#main-wrapper ou .main-outer – dependendo do modelo do seu template).
Vá no menu “modelo >> Editar HTML” Não precisa clicar em “Expandir modelos de widgets” e procure pelo trecho correspondente ao código referente a coluna central de postagens no seu template. Dependendo do modelo, pode ser #main-wrapper ou .main-outer
e cole abaixo dela o seguinte código:

-moz-border-radius: 10px;  /* para Firefox e Flock*/
-webkit-border-radius: 10px;  /* para Chrome ou Safari */
border-radius: 10px;

Para cada elemento que queira aplicar bordas arredondadas, basta incluir estes atributos (logo abaixo do nome do elemento), da seguinte forma:

Nome do Elemento {/*Pode ser #outer-wrapper, .content-outer, #main-wrapper,.main-outer, .sidebar,#sidebar-wrapper, .footer, #header,etc*/
-moz-border-radius: 10px;  /* para Firefox e Flock*/
-webkit-border-radius: 10px;  /* para Chrome e Safari */
border-radius: 10px;
}

4) Aplicar o efeito nos Títulos dos Posts:

Procure no corpo do HTML do seu blog, o código de comando do Título do Post, que geralmente é .post h3 ou .post-title, dependendo do modelo do seu template.
E acrescente logo abaixo as seguintes linhas:

-moz-border-radius: 10px;  /* para Firefox e Flock*/
-webkit-border-radius: 10px;  /* para Chrome e Safari */
border-radius: 10px;
border:1px solid #000   /*--- Edite  ---*/

Leia outros artigos que tratam sobre personalização do título dos posts, talvez você se interesse em conhecer outras maneiras de personalizá-los, podendo, inclusive, inclui-los a este efeito publicado neste tutorial:

Personalizar os Titulos dos Posts

Efeito Sombra.

 

5) Aplicar o efeito na área de Posts:

Procure no corpo do HTML do seu blog, o código de comando da área de Post, que geralmente é .post ou .post-outer , dependendo do modelo do seu template.
E acrescente logo abaixo as seguintes linhas:

-moz-border-radius: 10px;  /* para Firefox e Flock*/
-webkit-border-radius: 10px;  /* para Chrome e Safari */
border-radius: 10px;
border:1px solid #000   /*--- Edite  ---*/

Basicamente é isso!
Você pode aplicar este efeito em vários elementos no seu template, como por exemplo:
para diferenciar partes de textos em suas postagens destacados pela função Blockquote, ou em partes na Área de comentários, ou até mesmo na sidebar.
Você também pode incluir um efeito sombreado na borda arredondada.
Use a imaginação e aplique este efeito redondo nas bordas onde você preferir.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn