Oi pessoal, bom estou trazendo aqui para você outro tutorial maravilhoso. Que tal personalizar os gadgets?.Esse tutorial é super fácil vamos lá!.
Primeiramente acesse o a aba Modelo do seu blog, e em seguida Editar HTML. Dentro da caixa do do código tecle Ctrl+F ou F3 e na barra de pesquisa que abrir procure por:
h2 {
Se você nunca personalizou esta parte estará assim:
h2 { font: $(widget.title.font); color: $(widget.title.text.color); }
Agora vamos personalizar:
Centralizando o título :
Antes de fechar a } insira este código:
text-align: center;
Colocar uma cor de fundo:
Antes de fechar a } insira este código:
background: #000; /*color de fundo*/
Onde está de rosa modifique o código pela cor que deseja. Tabela de cores Aqui.
Arredondando as bordas do fundo:
Antes de fechar } insira este código:
background: #000; -moz-border-radius: 3px; -webkit-border-radius:3px; -goog-ms-border-radius: 3px; border-radius:3px;
O 3px é o angulo de arredondamento. Quanto maior fica mais arredondado fica. Se for deixar mais redondo terá que modificar os quatro 3px, para dar certo.
Colocando imagem ao invés de cor:
Antes de fechar } insira este código:
background: transparent url(ENDEREÇO DE SUA IMAGEM) center no-repeat height: 50px; /*altura da imagem*/ width: 200px; /*largura da imagem*/
Você pode colocar faixas, basta saber o tamanho dela e hospeda-la para obter o url da imagem.
Faixas:
Espero que tenham gostado qualquer dúvida deixe nos comentários. Beijinho até a próxima.
Adorei o post, florzinha! =)
ResponderExcluirBeijos,
Rafaela Barbosa BLOG
Fico feliz que gostou! beijos
Excluirgostei da dica
ResponderExcluirobg: vc foi indicada pra resp a tag no meu blog
http://caprixoteen.blogspot.com/
não consegui achar o codigo
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirÓtima ajuda...muito obrigada mesmo, todos os tutoriais estão ótimos e me ajudaram a criar o meu
ResponderExcluirJá to até seguindo
Meu blog é esse: www.eletriclifee.blogspot.com
N consegui fazer.
ResponderExcluir