Como dividir a sidebar em blocos quadrados ou redondos

20 de dez de 2012



1) Vá em design do modelo no seu blogger > avançado > cor de fundo da barra lateral > ajuste em transparente ( caso você deixe alguma cor nesse passo, abaixo da cor dos blocos ficará a cor que você escolheu aqui)





2) Vá em editar html no seu blog, dê ctrl + F e pesquise pela tag:  /* Widgets 
Você irá encontrar um código parecido com esse:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 1px  dashed $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0; }
3) Antes de fechar a chave em vermelho cole o seguinte código: background-color:#fff2cc;

4) Troque o código em amarelo por uma cor em HTML usando essa tabela de cores

Deixando os blocos redondos

Para deixar os blocos da sidebar redondos depois do background-color: #fff2ccVocê deve colocar o seguinte código:


-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
}
 Resultado final:


/* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 1px  dashed $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
background-color: #fff2cc;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
Espero que tenham gostado do tutorial,Um beijinhu doce para cata um de vocês !!
                                       

0 comentários :

Postar um comentário

Seu Comentários é sempre bem vindo!
Comente,opine,se expresse! Este espaço é seu!
Comentar faz parte,então por favor deixem comentários

-Todos os comentários são moderados e só ficarão disponíveis ao serem aprovados
-A área de comentários não é casa da mãe Joana,então tenha respeito.Não use palavrões,nem insultos,ofensas,agressões e baixarias;
-Não serão aceitos comentários Anônimos,comentários repetidos,e que tenham qualquer material publicitários ou de merchandising pessoal ou de benefício de terceiros
-Contatos pessoais devem ser feitos na pagina de contato.
-Não deixe links desnecessários os comentários

AVISOS:

--Blog não é Chat,respeitadas as regras ,é livre o debate dos assuntos aqui postados,Que o espaço de comentários não sirva para bate papo sobre assuntos de caráter pessoal ou estranhos ao blog
--A tentativa de clonar nomes e apelidos de outros usuários para emitir opiniões em nome de terceiros configura crime de falsidade ideológica.

Espero que tenham gostado do blog e que volte sempre!