19 de jul. de 2012

Tutorial: Separando e arredondando os gadgets


Oii meus amores e minhas amoras, tudo bem? Quanto tempo né?!Eu queria agradecer todos os comentários do último tutorial, e queria dar um pequeno upload: o nome da flor de lis que pediu o tuto é Andreza; Hoje eu estava sem mentira nenhuma com inspiração 0% , mas daí eu lembrei de um tutorial super útil, fácil, fofo, que deixa o blog um pouco mais organizado e é atualmente usado aqui, no Pincelando. É de separar e arredondar os gadgets, vamos ver?



Então bebê, faz o seguinte, vai em Editar HTML ~> Dá um Ctrl+F ou F3 e procure pelo seguinte código:

/* Widgets


Você irá achar assim:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}

Antes da última chave, adicione:

 background: #ffffff;

Substitua a parte em itálico, pela cor que você quiser, tem uma tabela super indicada, bem aqui.

Bem, você acabou de separar tudo. Agora, se você quiser deixar quadrado pare por aqui, se não, continue o tutorial.Ainda antes de fechar a chave, adicione o seguinte código:

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


Se você quiser igual ao Pincelando, nem tão redondo nem tão quadrado, é só você manter em 10px;
Porém se você quiser arredondar mais ou menos ainda, é só você trocar os três "10px". 
Quanto menor, menos arredondado. Quanto maior número, mais arredondado.

Créditos:


Beleza pessoal? Vocês gostaram?! Caso alguma dúvida podem me avisar ok?

Por hoje é só, espero que tenham gostado. Beijo para vocês:3

9 comentários:

  1. Ah fica super bonitinho o resultado :)
    Mas ainda prefiro ela não separada ^-^
    http://plushrepublic.blogspot.com.br/

    ResponderExcluir
  2. Oii flor!! Acabeii de conhecer seu blog,e eu simplesmente A-D-O-R-E-I!! Me encatei com seu cantinhoo ♥ Seus posts,seu Design,tudo! Já vireii uma fã,e inclusive seguidora! Gostaria muito que visitasse meu bloguito,e se caso gostar,pode seguir?:
    http://inacreditavelmenteeu.blogspot.com.br
    Eu amariiia ter afiliação com você,aceita? Muito obrigada pela atenção: é, e sempre será, um prazer passar por aqui! Beijoss ♥ E muito sucesso a você e seu blog!

    ResponderExcluir
  3. aii q perfeito '-' desse tutorial de separar, esse foi o mais explicado que encontrei ^^
    www.fashionemcores.com

    ResponderExcluir
  4. Adorei o tuto ♥ e adorei aqui também, sempre venho visitar ^.^
    a e voe aceita afiliação com meu blog?
    bjinhos
    Conversando com a lua

    ResponderExcluir
  5. Muito o bom o seu blog viu parabéns...
    http://bercarionatural.blogspot.com

    ResponderExcluir
  6. Muito bacana o tutorial! Vou usar no meu próximo lay com certeza! *-*

    ResponderExcluir
  7. Obrigado! Eu já estou usando , beijoos!
    meu-mundinho-perfeito.blogspot.com.br

    ResponderExcluir
  8. Nossa , amei , logo mais estarei usando

    ResponderExcluir
  9. muito bom
    http://meus18anos2.blogspot.com

    ResponderExcluir

Olá, aqui temos uma Mini F.a.q pra te auxiliar:

-Não aceitamos Tags e Selinhos
-Precisa de uma Postagem? Pode comentar :)
-Afiliação? Somente na página sobre como se afiliar. Pedidos nos comentários serão desconsiderados
-Por favor, sem xingamentos para o bem de todos
-Nunca deixe a URL do seu blog no final do comentário, o blogger considera isso SPAN e exclui seu blog :(
-Por favor não plageie.
Mais alguma pergunta? Comente aqui ou Leia nossa F.a.q completa

Obrigada