DIY :: Como Personalizar os Gadgets do Blog
Primeiro vá em MODELO > HTML , em seu teclado
coloque Ctrl + F , vai aparecer uma caixinha , dentro dela
você vai colocar isto e clicar Enter :
h2 {
Se você nunca personalizou esta parte estará assim:
h2 {
font: $(widget.title.font);
color:
$(widget.title.text.color);
}
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.
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 , ok ? haha
Aqui alguns Modelos
que vocês podem pegar o url !
22 comentários
Ótimo tutorial, vai ajudar muita gente!
ResponderExcluirhttp://www.bilhetedagarrafa.com.br
Espero que sim ^^
ExcluirAdorei o post flor....muito útil Amei beijinhos :*
ResponderExcluirhttp://www.vamospapear.com/
Que bom que gostou ! Espero ter ajudado ^^
ExcluirAmore,tu faz parceria de divulgação ?
ResponderExcluirTa rolando campanha de criação de looks carnaval na ALLANI!
PopDay -
@thaisrr
Beijos!
www.allani.com.br
ALLANI - Rede social de moda
Sim ^^ é só entrar em contato !
ExcluirOlá Natali *-*
ResponderExcluirAdorei a sua explicação, isso vai ajudar muitas pessoas. Está de parabéns *-*
Muito obrigada pela sua visita em meu blog e obrigada pelo carinho *-*
Um super beijo e sucesso sempre
BLOG: http://gabiivinholi.blogspot.com.br/
Obrigada *-* e imagina , prazer foi meu de ver seu blog , adoro ver o blog das leitoras !
ExcluirLegal o método, não sei se o modelo fica parecido com o meu!
ResponderExcluirhttp://heytutty.blogspot.com.br
Vou ver seu blog ^^
ExcluirAdorei o seu tutorial lá no meu blog também tem tutoriais sobre blogs venha ver http://crochebycroche.blogspot.com.br/2015/02/serie-como-colocar-menu-acimado.html
ResponderExcluirObrigada ^^
ExcluirSou apaixonada por imagem no titulo do gadget... conheci seu blog atravez do link que voce deixou em outro blog e vim cinhecer...
ResponderExcluirGostaria de te convidar para conhecer meu cantinho, la tambem disponibilizo varios tutoriais, packs em png para blog, layouts free exclusivos personalizados por mim mesma...
Sera um imenso prazer te receber por la --> www.renatamassa.com
Bjus linda, sucesso!!!
awn Obrigada visito sim ♥
ExcluirNão consigo fazer essas configurações já tentei varias vezes.
ResponderExcluirEssa configuração dá certo com qualquer layout?
não , não pode estar muito modificado , porque ai vai ser bem mais dificil achar os nomes corretos .
ExcluirFlor, quando digito a tag h2 { eu não consigo achar.... Só consigo acha o h2, só que em baixo nao tem nada escrito color;text etc... Me ajuda please ?
ResponderExcluirmesmo que não apareça assim , pode colar o código depois vizualiza pra veer se deu certo , mas faça um backup do blog antes !
ExcluirOi Natali, estes códigos ainda funcionam? Nao consegui encontrar nada no HTML
ResponderExcluirOI NATALI, VIM LHE PARABENIZAR POR ESTA POSTAGEM. EU ESTAVA MESMO QUERENDO PERSONALIZAR O TITULO DOS GADGETS DO MEU BLOG, MAS GRAÇAS A SUA POSTAGEM, CONSEGUI E AMEI O RESULTADO. ESTOU COMEÇANDO O MEU BLOG AGORA E ESTÁ AINDA EM PROCESSO DE PERSONALIZAÇÃO, OBRIGADA POR COMPARTILHAR SEUS CONHECIMENTOS. CASO QUEIRA VER COMO FICOU O MEU BLOG, ME FAÇA UMA VISITINHA. www.andreiapaula.com.br
ResponderExcluirOie Adorei o post mais o meu n esta dando certo
ResponderExcluirObrigada me ajudu mt <3
ResponderExcluir