Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

3.5.10

image

Veja esse aplicativo criado por  Jacob Cyrus Bijani ( Direto de criação doTumblr’s ) . Com o BORDER RADIUS não tem mistério. A única coisa que você precisa fazer é determinar o numero em px para cada canto e o aplicativo oferece o código correspondente para ser inserido no bloco que queira exibir arredondado, por exemplo as áreas de postagens do Blogger, Header, ou sidebar. É ótimo pra gente compreender esse truque em CSS.

Veja no exemplo abaixo, coloquei 10px para cada canto.

image

Neste outro exemplo, coloquei 50px para o topo a esquerda e 50px para o bottom a direita:

image

Veja um exemplo para deixar sua área de postagem separada por blocos e com formato de cantos arredondado. Faça o seguinte:

OBS: Exemplo criado em modelo “Mínima” do Blogger

Faça login no Blogger e no painel clique na opção ►Layout

Depois clique em ►Editar HTML

Procure pelo trecho .post{

Troque todo o trecho entre colchetes, pelo código abaixo destacado em vermelho.

.post {



margin:10px;
border:1px solid #cccccc;
padding:10px;
background: #E9EAEE;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;


}





Veja no blog de testes DEMO



 



Beijo da Mama ♥

11 comentários

uhugalera

Hi, Mamma...

Muito legal e prático! Pena que nem todo navegador reconheça/leia este recurso...

[]'s @inaciorolim

MamaNunes

<Inacio
Bem lembrado! Eu quase sempre esqueço que o IEca não sabe ler CSS3 kkkkk

beijo

Pena Digital

Mama, apliquei (substituí) o código mas não mudou nada na postagem. Visualizei com o firefox.

Max Martins

Oi, Mama!

Talvez você não lembre, mas tinha solicitado por e-mail a fórmula mágica pra separar as postagens resumidas na primeira página. Bem, descobri como se faz mas agora ficou bem melhor com as bordas arredondadas.
Excelente dica!

Um forte abraço!!!

Matheus P

Excelente dica! Me foi muito útil. Quem quiser ver o resultado é só dar uma bizoiada na minha sidebar aqui: http://umblogsoda.blogspot.com/

Vitor Viana

Parabens muito bom. www.vitordesigner.com.br

FREE STEP

ha.ha! nem acho esse trecho no EDITA HTML..

Felipe Correia

:-) Massa Valeuu!

Gustavo Silva

Como fazer isso na sidebar (ou seja, aplicando o efeito à todos os elementos que compõem a sidebar)?

Obrigado desde já!

Andson

valeu muito obrigado espero que posa ajudar vcs tamber visite meu blog andsondownload.blogspot.

Guilherme Nery

Sensacional !

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.