http://weheartit.com/entry/29565973/via/Erica_Judd |
Eu já tentei levar um blog de tutoriais pra frente, só que desistir no começo do caminho. Fazendo este novo layout para o meu blog eu descobrir muitas coisas interessante de HTML que eu posso postar aqui. Não vai ser tão frequentes, mas espero ajudar todos vocês ♥
Começando com como personalizar titulo dos gadgets. Não sei se todos conhecem, mas para os que não sabem, vai ser uma boa ajuda!
Personalizar titulo dos gadgets
Vá em "Modelo", clique em "Editar HTML", e aperte ctrl + f e escreva /* Headings
Você vai encontrar algo parecido com isto:
/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
Você deve colocar o código para modificar entre as partes que esta em roxo.
Mas como eu modifico Erica?
Se você não sabe muito como modificar eu vou te dar uma base e explicar.
h2 {
font: $(widget.title.font); /* Fonte deve ser modificada pelo designer do modelo\*
text-align: center; /* onde o texto vai ficar alinhado\*
color: #FF1493; /*cor da fonte\*
text-shadow: 0px 0px 3px #6a6a6a; *\Sombrado titulo/*
background-image: url (url_da_imagem_de_fundo); *\ se quiser colocar fundo\*
border: 1px solid #ff6699; /*Modifique a cor, tamanho e estilo da borda\*
margin: 1px;
padding: 2px; */ tamanho do fundo/*
}
Explicação:
Agora você pode mudar como quiser e conseguir vários efeitos diferentes.
font: Aconselho deixar assim para mudar no "Designer do modelo", assim a fonte é padrão e não corre o risco dela não aparecer.
text-align: Aqui você muda a posição da fonte. Lembrando que right é direita, left é esqueda e center é centralizado.
color: Cor da fonte em HTML. Código aqui.
text-shadow: É a sombra da fonte, você pode mudar onde esta em "0" e conseguir varias sombras diferentes.
background-image: Se você quiser um fundo é só colocar o url da imagem ali. Mas se quiser uma cor troque por " background: #FF1493; "
border: É a borda que vai ficar em volta do titulo. Ela pode ser solid que é a borda solida, dotted que é pontilhada e dashed que é tracejada. Você também pode escolher onde a borda vai ficar:
border-top é em cima
border-bottom é em baixo.
border-left é do lado esquerdo.
border-right é do lado direito.
Se você quiser a borda a cima é só trocar "border" por "border-top", por exemplo.
Pra mudar quando passa o mouse é só acrescentar em baixo, este código:
h2:hover {Ficando assim:
color: #FF69B4; /*cor da fonte\*
background: #0000;
}
h2 {
font: $(widget.title.font); /* Fonte deve ser modificada pelo designer do modelo\*
text-align: center; /* onde o texto vai ficar alinhado\*
color: #FF1493; /*cor da fonte\*
text-shadow: 0px 0px 3px #6a6a6a; *\Sombrado titulo/*
background-image: url (url_da_imagem_de_fundo); *\ se quiser colocar fundo\*
border: 1px solid #ff6699; /*Modifique a cor, tamanho e estilo da borda\*
margin: 1px;
padding: 2px; */ tamanho do fundo/*
}
h2:hover {
color: #FF69B4; /*cor da fonte\*
background: #0000;
}
Lembrando que você pode acrescentar varias outras coisas no efeito hover.
Falta pouco para mil seguidores. Muito obrigada ♥
Falta pouco para mil seguidores. Muito obrigada ♥
Uma musiquinha meio antiga para vocês
Bezos, Erica Lima ;*
Ótimo tutorial flor <3 quero ver mais ein ?
ResponderExcluirBeijinhos,
Lia ¨
www.limaoealecrim.blogspot.com
Ótimo tutorial flor <3 quero ver mais ein ?
ResponderExcluirBeijinhos,
Lia ¨
www.limaoealecrim.blogspot.com
Muito bom o tutorial, ajudou muito. Muito bem explicadinho!!
ResponderExcluirdai eu vi que meu blog ta ali no VALE A VISITA ! e quais murri, sua linda :'))))))) a falta de tempo num me deixa dedicar tanto ao blog, mas saiba que amo aqui e estou sempre passando pra dar um oi :3
ResponderExcluire, obg flor <3
beeijos e fique com Deus :*
http://phora-do-ar.blogspot.com.br/
awn adorei o tutorial hshas realmente o teu layout ta lindo com esse azul divoooo, flor eu gostaria que voce ensinasse passo a passo se puder claro, como voce fez esse seu like box do facebook assim,. tipo essa capinha e colocou cor nele eu pesquiso e tal so que os tutorias sao muito complexos e é tipo so pra quem sabe webdesigner profissional e eu nao sei :( ensina plis :D
ResponderExcluirinocentementeingenua.blogspot.com
... continuando ahshas... voce aceita afiliaçao com o meu blog? ou tem alguma regra de tantos seguidores flor?
ResponderExcluirFica bem legal, acho que vou fazer no meu próximo lay. Se não for encomodar, poderia ensinar a colocar esse gadget de frase do dia? Obrigada!
ResponderExcluiresse tuto é super útil. Deixa o blog mais bonito
ResponderExcluirMenina perdida - perfil
gosto muito quando explicam os detalhes do código o tutorial, fica bem melhor e meio que ensina as pessoas a mexer, elas acabam pegando o jeito depois :D acho que você deveria reabrir esse blog (pIREI no seu layout), mesmo postando raramente.
ResponderExcluirhttp://risosshi.blogspot.com.br/
Eu gostei do tutorial, que ÓTIMO que você abriu uma sessão para tutoriais! Ui, novo layout rs, adorei! http://blog13thstreet.blogspot.com :)
ResponderExcluirVocê podia colocar uma imagem de como fica ^^
ResponderExcluirAtt, Line
putmerd.blogspot.com
Uiaa.. Otimoo o tutorial. Amei.. Minha amiga tava precisando,vo mandar pra ela ...
ResponderExcluirBjss
www.dicasluh.blogspot.com
Já vou até deixar nos favoritos e usar no próximo layout! Título dos gadgets é sempre um tortura para ser achado um tutorial bom e amei esse! Bjs
ResponderExcluirJéssica
backlash7.blogspot.com
Adorei o tutorial, é muito útil! E fica lindo! Amei <3
ResponderExcluirBeijos,
depoisdeveneza.blogspot.com.br
Tava procurando esse tutorial hoje mesmo! kkkk
ResponderExcluirQue coincidência ein. Parace bem simples, vou fazer e ver se fica melhor do que o que está agora no meu blog ^^
Att, Line
putmerd.blogspot.com
Amei o tutorial *-*
ResponderExcluirwww.smallog.blogspot.com
Não cosigo :(
ResponderExcluirQuando pesquiso aquilo do: * Headings não encontro nada...
não acho esse trecho q vc falou pra procurar! :( pq será?
ResponderExcluirÓtimo tutorial, Erica! Aproveitanto que tô aqui... Quero fazer um pedido ^.^. Vc pode fazer um cabeçalho no estilo do seu, pra mim? Por favor, vou creditar. Se sim, mande o url da imagem nos comentários para que eu possa ver, ok? Tchau :)
ResponderExcluirhttp://missstudent.blogspot.com
valeu, podem visitar http://www.cantinhodenoticias.blogspot.com/
ResponderExcluir