11 maio 2016
PERSONALIZE OS TÍTULO DOS GADGETS (5 MODELOS)
Mais um post da nossa série LAYOUT DOS SONHOS onde estou disponibilizando 21 tutoriais, para que sozinha, você possa criar seu próprio layout. Hoje você vai aprender a personalizar os títulos dos gadgets. Pra quem não sabe, gadgets são os itens que ficam na lateral do blog, geralmente do lado direito, também conhecida com sidebar.
Além do tutorial, eu preparei 5 modelos para você escolher. Veja qual se encacha melhor com o design do seu blog. Esse tutorial se aplica somente para a plataforma blogger.
Você está acompanhado nossas aulas? Para que não fique perdida e consiga acompanhar a série, vou te mostrar as aulas anteriores:
- Baixe o layout base
- Background personalizado
- Cabeçalho com largura total
- Categorias em imagem
- Centralizando o título do post
- Personalizando o rodapé do post
- Postagens Relacionadas em miniatura
- Baixe o layout base
- Background personalizado
- Cabeçalho com largura total
- Categorias em imagem
- Centralizando o título do post
- Personalizando o rodapé do post
- Postagens Relacionadas em miniatura
Agora você já pode acompanhar a série! Então chega de conversa, e vamos logo para o tutorial.
1° Acesse a caixa de códigos HTML do blog e procure por: .sidebar .widget h2 {
MODELO 1
font-family: 'Roboto';
color: #FFFFFF;
font-size: 18px;
text-align: center;
font-weight: normal;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #5D18F0;
height: 20px;
MODELO 2
font-family: 'Cookie';color: #FFFFFF;background: #FF2063;font-size: 30px;text-align: center;font-weight: normal;border-top-right-radius: 10px;border-top-left-radius: 10px;height: 20px;
MODELO 3
border: 1px dashed #151515;font-family: 'Roboto';color: #FF2063;font-size: 25px;text-align: center;font-weight: normal;text-transform: uppercase;
MODELO 4
font-family: 'Roboto';color: #222323;font-size: 15px;text-align: center;font-weight: normal;text-transform: uppercase;background: #90E6FF;float: right;padding-bottom: 10px;
MODELO 5
font-family: 'Roboto';color: #222323;font-size: 18px;height: 15px;text-align: center;font-weight: normal;text-transform: uppercase;border-bottom: 3px solid #151515;
Vale lembrar que é recomendável fazer essas personalizações em um blog de testes, de preferência no modelo base que disponibilizei para essa série. Espero que tenham gostado, quero muito saber qual modelo você mais gostou, e qual vai usar em seu novo layout. Qualquer dúvida, deixe nos comentários.
Siga o blog e participe das minhas redes sociais para nunca perder as atualizações.
Um grande beijo e até a próxima!
Lory, no meu blog essa personalização fica no titulo dos posts e nos gadgets, como faço pra colocar só nos gadgets?
ResponderExcluirOlá Giooh! Bom eu teria que ter acesso á área de códigos do seu blog, pra saber o que está causando o erro, porque isso não é normal. Refaça o processo e veja se funciona. Esse tutorial foi feito, para personalizar um layout base que disponibilizei aqui no Manual.
ExcluirE não tinha esse codigo, o que personalizava era o H2, só que ele personalizou mais coisas do que deveria...
ResponderExcluirEsse tutorial deve ser feito no layout base que disponibilizei, por isso está dando erro no seu.
ExcluirLory eu tentei mas não ficou como deveria,eu coloquei o modelo 5,mas não ficou com o traço em baixo.O que eu faço?
ResponderExcluirobs;Parabéns pelo blog ele é lindo <3
http://versossimplesblog.blogspot.com.br/
Maria, me manda por e-mail a sua dúvida com mais detalhes, que tentarei te ajudar. Pelo comentário é meio difícil rsrs Aguardo seu contato! Bjs :*
Excluirlory testei todos os modelos e amei!!! porem meu favorito que foi o modelo 5 não foi.
ResponderExcluirOi July, qual foi o erro?
ExcluirOiê, muito obrigada pela dica !!
ResponderExcluirEu que agradeço a visita <3
ExcluirTODOS LINDOS USEI OS 3 PRIMEIROS E DEU CERTO <3
ResponderExcluir